特別なケースを除き、ほとんどの場合、ローカルでの開発には http://localhost を使用して問題ありません。この投稿では、どのような場合にローカルの開発サイトを HTTPS で運用する必要があるかについて説明します。
ローカルでの開発に HTTPS を使用する方法もご覧ください。
この投稿では、localhost に関するステートメントは、127.0.0.1 と [::1] にも有効です。どちらも「ループバック アドレス」とも呼ばれるローカル コンピュータのアドレスを記述しているからです。また、簡潔にするために、ポート番号は指定されていません。したがって、http://localhost と表示された場合は、http://localhost:{PORT} または http://127.0.0.1:{PORT} と読みます。
まとめ
ローカルで開発する場合は、デフォルトで http://localhost を使用します。Service Worker、Web Authentication API などが動作します。
ただし、以下のケースでは、ローカルでの開発に HTTPS が必要になります。
- ブラウザ間で一貫した方法でセキュア Cookie を設定する
- 混合コンテンツの問題のデバッグ
- HTTP/2 以降の使用
- HTTPS を必要とするサードパーティのライブラリまたは API の使用
カスタムホスト名の使用
ローカル開発で HTTPS を使用する場合
✨ 知っておくべきことはこれだけです。さらに詳しく知りたい方は、続きをお読みください。
開発サイトが安全に動作すべき理由
予期しない問題に遭遇しないように、ローカルの開発サイトは可能な限り本番ウェブサイトと同様に動作する必要があります。そのため、本番環境のウェブサイトで HTTPS を使用している場合、ローカルの開発サイトは HTTPS サイトのように動作する必要があります。
デフォルトで http://localhost を使用する
ブラウザは http://localhost を特別な方法で扱います。つまり、HTTP ですが、ほとんどの場合 HTTPS サイトのように動作します。
http://localhost では、Service Worker、Sensor API、Authentication API、Payments、特定のセキュリティ保証を必要とするその他の機能がサポートされており、HTTPS サイトとまったく同じように動作します。
ローカルでの開発に HTTPS を使用するタイミング
http://localhost が HTTPS サイトのように動作しない特別なケースや、http://localhost 以外のカスタムサイト名を使用したい場合もあるでしょう。
次の場合は、ローカルでの開発に HTTPS を使用する必要があります。
ローカルで Cookie を設定する必要があります。Cookie は
Secure、SameSite:none、または接頭辞__Hostです。SecureCookie は HTTPS でのみ設定され、すべてのブラウザでhttp://localhostで設定されるわけではありません。また、SameSite:noneと__Hostでは Cookie をSecureにする必要があるため、ローカルの開発サイトでこのような Cookie を設定するには HTTPS も必要です。混合コンテンツの問題など、HTTPS ウェブサイトでのみ発生し、HTTP サイトでは発生しない問題（
http://localhostでも発生しない問題）をローカルでデバッグする必要がある場合。HTTP/2 以降に固有の動作をローカルでテストまたは再現する必要がある場合。たとえば、HTTP/2 以降で読み込みパフォーマンスをテストする必要がある場合などです。安全でない HTTP/2 以降はサポートされていません（
localhostでもサポートされていません）。HTTPS（OAuth など）を必要とするサードパーティのライブラリまたは API をローカルでテストする必要がある場合。
localhostではなく、ローカル開発用のカスタムホスト名（mysite.exampleなど）を使用している。通常、これはローカル hosts ファイルをオーバーライドしたことを意味します。
ホストファイルを編集してカスタムホスト名を追加する。 この場合、Chrome、Edge、Safari、Firefox は、デフォルトでは
mysite.exampleがローカルサイトであっても、安全とは見なされません。HTTPS サイトのようには動作しません。その他のケースこのリストはすべてを網羅しているわけではありませんが、ここに掲載されていないケースが発生した場合は、
http://localhostに問題が発生するか、本番環境サイトのように正常に動作しない可能性があります。🙃
いずれの場合も、ローカルでの開発には HTTPS を使用する必要があります。
ローカルでの開発に HTTPS を使用する方法
ローカルでの開発に HTTPS を使用する必要がある場合は、ローカルでの開発に HTTPS を使用する方法をご覧ください。
カスタムホスト名を使用する場合のヒント
カスタムホスト名を使用する場合（hosts ファイルの編集など）は以下のようになります。
mysiteのような単純なホスト名は使用しないでください。同じ名前（mysite）のトップレベル ドメイン（TLD）があると問題が発生するためです。その可能性はそれほど低いわけではありません。2020 年には 1,500 を超える TLD があり、その数は増え続けています。coffee、museum、travel、および多くの大企業（働いている会社を含む）は TLD です。こちらの一覧をご覧ください。- お客様所有のドメイン、またはこの目的のために予約されているドメインのみを使用してください。独自のドメインがない場合は、
testまたはlocalhost（mysite.localhost）を使用できます。testはブラウザでの特別な処理はありませんが、localhostは対応しています。Chrome と Edge はすぐにhttp://<name>.localhostをサポートしており、localhost がサポートしている場合も安全に動作します。試してみるには、localhost で任意のサイトを実行し、Chrome または Edge でhttp://<whatever name you like>.localhost:<your port>にアクセスします。Firefox と Safari でもすぐにご利用いただけるようになる見込みです。このように設定できる（mysite.localhostのようなサブドメインがある）理由は、localhostは単なるホスト名ではなく、comのような完全な TLD でもあるためです。
詳細
すべてのレビュアー（特に Ryan Sleevi、Filippo V 縦軸、Milica Mihajlija、Rowan Merewood、Jake Archibald）に多大な貢献とフィードバックをいただきました。🙌
ヒーロー画像（投稿者: @moses_lee、Unsplash より、編集）。