localhost(127.0.0.1)をHTTPS化して開発環境を作る

HTTPS locahost Freenom letsencrypt

普段、開発環境ではlocalhostをHTTPで利用してサーバを立てて遊んでいる。
しかし、WebアプリによってはHTTPSでの挙動の確認やWebAuthnAPI等のようにHTTPSでないとそもそも動作しないものもあり、面倒なことになっている。

会社であれば開発用のドメイン、証明書、EC2のようなサーバを使って好き勝手できるが、個人では億劫なのとお金がかかるのでやれていない（バリバリやれていれば気にもならないがブログすら月1ぎりぎりである）。

localhostのHTTPS化

そんな折、この記事を見つけた。
内容としては、持っているドメインと証明書を使ってlocalhost(127.0.0.1)をHTTPS化するというものである。

ドメインと証明書があれば、自身のPCに立てたlocalhostサーバをHTTPSにできる。
あとはドメインと証明書の確保であるが、証明書は非常に有名なLet's Encryptを利用することで無料で入手できる。
さらに、ドメインは最近知ったがFrreenomを利用すれば、無料で入手できる。

これなら無料でHTTPSの開発環境を構築できると思い、実際におこなった。

手順

ざっくりと手順は以下の通りになる。

Freenomでドメインを取得
127.0.0.1に対してAレコードを追加
Let's EncryptでDNS認証によるSSL証明書を取得
express等でlocalhost:3000にサーバ構築

1. Freenomでドメインを取得

以下のサイトにアクセスする。

https://www.freenom.com/ja/index.html

サインアップし、利用できる無料ドメイン名を取得する。
この辺はやり方を調べればいくらでも出てくるので割愛したい。

先程検索して上位に出てきたサイトを一応紹介しておく。

完全無料の独自ドメインを取得できるFreenomの使い方 | Lancork

2. 127.0.0.1に対してAレコードを追加

Feenomにサインインし、取得したドメイン名のDNSを管理する。
「Manage DNS」のようなリンクを押すことでレコードの追加画面に移動するはずだ。

適当なホスト名（例えばわかりやすく、localhost）に対してIPアドレス127.0.0.1を紐付けたAレコードを追加する。

自分の場合は先のFreenomでs1r-j.tkというドメインを取得しているのであとの操作が完了すれば、ローカル環境に構築したサーバに対してhttps://localhost.s1r-j.tkというURLでアクセスが可能になる。

3. Let's EncryptでDNS認証によるSSL証明書を取得

Let's Encryptを初めて使ったので躓いた。
証明書を取得するために、Linux環境でのコマンド操作が必要だがWSLで代替可能だった。

以下の記事の手順4以降を実施していけばよい。
注意点として、手順6でDNSサーバにTXTレコードを追加して手順7に進むがこのときDNSが反映されるまで若干（5分程度）待つ必要がある。

Let's EncryptのSSL証明書をDNS認証で発行してみた。（DNSはお名前.com） - Qiita

手順に戸惑ったり、詰まったら同じ内容が違った言葉で書いてあるので以下の記事も参考にしてほしい。

ここまででローカル環境のHTTPS化は完了している。
以降はおまけとして、実際にサーバを立ててHTTPS化の確認をおこなう。

4. express等でlocalhost:3000にサーバ構築

サーバ構築は何でも良い。以前だったら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でアクセスできることを確認する。