Local 環境の https 化

自己署名証明書を発行してブラウザに証明書を入れるという方法も面倒そうなので、他の方法はないか調べてみたところ、実際にドメインをとって 127.0.0.1 にアクセスするように設定する方法を書いている人がいた。

ローカル開発環境の https 化 | blog.jxck.io

SSL 証明書は Let’s Encrypt で無料で取得できるのは知っていたが、この方法だとドメインを取る必要がある。ドメインはお金がかかると思っていたが、ドメインも Freenom で無料で取れることを知ったので、上記の環境は無料で作ることができた。

ドメインの取得と設定

  1. Freenom で欲しいドメインを探す。この時、トップレベルドメインも指定して検索しないと、選んでも何故か Not Available と表示されてしまう
  2. 検索後、指定したドメインが Selected になっているので Checkout に進む
  3. そのまま Continue して確認画面に進み、金額が 0 であるのを確認後、Verify My Email Address
  4. ここで新規登録する場合は、必須項目の氏名、住所、パスワードを入力
  5. Complete Order した後、ログインし Services > My Domains で設定
  6. 取得したドメインの Manage Domain をクリック
  7. Manage Freenom DNS をクリックし、IP アドレスを設定 (例えば Name を local にし、Type A, Target 127.0.0.1 を設定)

これで、local.mydomain.cf などにアクセスすると、localhost がリクエストされる。

証明書の取得

公開している環境がない場合の Let’s Encrypt で証明書を取得する方法。

  1. Certbot をインストール
  2. コマンドを実行
    certbot certonly --manual --domain mydomain.cf --email myemail@example.com --agree-tos --manual-public-ip-logging-ok --preferred-challenges dns-01
  3. Email 共有に関する質問は N で良い
  4. Token が表示されるので、そのまま進めずに Freenom の DNS 設定を開く
  5. 表示されたサブドメインと Token を TXT レコードとして登録する
  6. 念のため TXT レコードを確認 (Windows の場合、nslookup -q=txt _acme-challenge.local.mydomain.cf で確認できる。その他の環境は dig -t TXT _acme-challenge.local.mydomain.cf など)
  7. 登録が確認できたら、Certbot の画面で Enter を押して先に進む
  8. コマンドを実行したフォルダ配下に証明書が保存される

後は使用している Web サーバなどに応じて設定を行えば、上記ドメインに https でアクセスするとローカルのサーバへ接続できる。

Local 環境の https 化

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s