このページは Cloud Translation API によって翻訳されました。

ローカルでの開発に HTTPS を使用する場合

特別なケースを除き、ほとんどの場合、ローカルでの開発には http://localhost を使用して問題ありません。この投稿では、どのような場合にローカルの開発サイトを HTTPS で運用する必要があるかについて説明します。

Maud Nalpas

この投稿では、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 です。Secure Cookie は HTTPS でのみ設定され、すべてのブラウザで http://localhost で設定されるわけではありません。また、SameSite:none と __Host では Cookie を Secure にする必要があるため、ローカルの開発サイトでこのような Cookie を設定するには HTTPS も必要です。

Secure Cookie をローカルで設定する場合、すべてのブラウザで同じように動作するわけではありません。たとえば、Chrome や Safari では Secure Cookie は localhost に設定されませんが、Firefox では設定します。Chrome では、これはバグと見なされます。
混合コンテンツの問題など、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 より、編集）。