ローカル開発( localhost )で、HTTPSを使用する方法を調査

ピン留めされたアイテム

まさぴょん

結論: ngrokやcaddyを使って、 https化&外部公開が、一番簡単🌟

ngrok について

caddy について

まさぴょん

ドメインを取得して、本物の証明書を取る方法

個人の場合、普段の開発でカジュアルに hosts や証明書ストアをいじるよりも、実在するドメインを用意し、本物の証明書を取ってしまうのが一番安全かつ完全だ。何も変えず何も騙さず、何の危険もなく正しく動く。
例として、筆者が普段から個人的な開発や検証に使っている手元の https サーバの構成を紹介する。
まず、自分が所有する jxck.io のサブドメインとして localhost.jxck.io を登録している。
これは「本物のドメイン」だ。
そして、このドメインの A レコードを 127.0.0.1 にし、変えない。 (dig してもらえればわかる)
ここに対して Let's Encrypt で証明書を発行する。
127.0.0.1 ではサーバ(.well-known url)での認証はできないので、 DNS 認証で証明書を取る。
すると、「本物の https の証明書」(すでに証明書ストアに入った証明書で検証できる証明書)が手に入る。
この証明書と鍵を、ローカルで立てるサーバが読むようにし、ブラウザに https://localhost.jxck.io:3000 と入れれば、ブラウザには本物の https 環境がローカルで手に入る。

まさぴょん

[F-E]関連での localhostの HTTPS対応

Next の場合

Nuxt の場合

React の場合

まさぴょん

Apache の場合

まさぴょん

mkcertの使い方について理解する

https://github.com/FiloSottile/mkcert

まさぴょん

localhost を HTTPS化して開発する際の注意点

チーム開発・実際のProductの場合は、developmentだけのModeとして、個々人で管理する。
- 証明書 (localhost-key.pemファイル) と鍵 (localhost.pemファイル)は、個々人で違うはずなので。
- 本番環境に余計な証明書と鍵を含めない。