普段、開発環境ではlocalhostをHTTPで利用してサーバを立てて遊んでいる。
しかし、WebアプリによってはHTTPSでの挙動の確認やWebAuthnAPI等のようにHTTPSでないとそもそも動作しないものもあり、面倒なことになっている。
会社であれば開発用のドメイン、証明書、EC2のようなサーバを使って好き勝手できるが、個人では億劫なのとお金がかかるのでやれていない(バリバリやれていれば気にもならないがブログすら月1ぎりぎりである)。
そんな折、この記事を見つけた。
内容としては、持っているドメインと証明書を使ってlocalhost(127.0.0.1)をHTTPS化するというものである。
ドメインと証明書があれば、自身のPCに立てたlocalhostサーバをHTTPSにできる。
あとはドメインと証明書の確保であるが、証明書は非常に有名なLet's Encryptを利用することで無料で入手できる。
さらに、ドメインは最近知ったがFrreenomを利用すれば、無料で入手できる。
これなら無料でHTTPSの開発環境を構築できると思い、実際におこなった。
ざっくりと手順は以下の通りになる。
以下のサイトにアクセスする。
https://www.freenom.com/ja/index.html
サインアップし、利用できる無料ドメイン名を取得する。
この辺はやり方を調べればいくらでも出てくるので割愛したい。
先程検索して上位に出てきたサイトを一応紹介しておく。
Feenomにサインインし、取得したドメイン名のDNSを管理する。
「Manage DNS」のようなリンクを押すことでレコードの追加画面に移動するはずだ。
適当なホスト名(例えばわかりやすく、localhost
)に対してIPアドレス127.0.0.1
を紐付けたAレコードを追加する。
自分の場合は先のFreenomでs1r-j.tk
というドメインを取得しているのであとの操作が完了すれば、ローカル環境に構築したサーバに対してhttps://localhost.s1r-j.tk
というURLでアクセスが可能になる。
Let's Encryptを初めて使ったので躓いた。
証明書を取得するために、Linux環境でのコマンド操作が必要だがWSLで代替可能だった。
以下の記事の手順4以降を実施していけばよい。
注意点として、手順6でDNSサーバにTXTレコードを追加して手順7に進むがこのときDNSが反映されるまで若干(5分程度)待つ必要がある。
手順に戸惑ったり、詰まったら同じ内容が違った言葉で書いてあるので以下の記事も参考にしてほしい。
ここまででローカル環境のHTTPS化は完了している。
以降はおまけとして、実際にサーバを立ててHTTPS化の確認をおこなう。
サーバ構築は何でも良い。以前だったらJavaだったが最近はNode.jsを頑張っているのでexpressを使って構築した。
適当なフォルダを作成し、npm init
をおこない、必要なモジュールをインストールする。
フォルダは概ね以下のような形になるはず。
index.js サーバの実装
package.json
node_modules/
ssl/
├ privatekey.pem Let's Encryptが作成した秘密鍵
└ fullchain.pem Let's Encryptが作成した証明書
index.js
の実装は以下のようにする。
ssl
フォルダ以下においた秘密鍵と証明書を読み込ませる。
あとはnode index.js
を実行すればサーバが立ち上がる。
HTTPS化するまえと同じく、http://localhost:3000
でアクセスできることを確認。
さらにhttps://localhost.s1r-j.tk
もしくはhttps://localhost.s1r-j.tk/hello
のようにHTTPS化したURLでアクセスできることを確認する。
以上、無料でHTTPS化したローカル開発環境の構築である。
自身で思いついて何かをしたわけでも、特段わかりやすい記事なわけでもない。
先人たちの知恵に感謝するばかりである。
Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。
また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!
こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?
コメント