ローカル開発では、特別なケースを除き、ほとんどの場合 http://localhost を使用できます。この記事では、ローカル開発サイトを HTTPS で実行する必要がある場合について説明します。
ローカル開発で HTTPS を使用する方法もご覧ください。
この投稿では、localhost
に関する記述は 127.0.0.1
と [::1]
にも適用されます。どちらもローカル コンピュータのアドレス(ループバック アドレス)を表すためです。また、簡潔にするために、ポート番号は指定していません。http://localhost
は http://localhost:{PORT}
または http://127.0.0.1:{PORT}
と読みます。
概要
ローカルで開発する場合は、デフォルトで http://localhost
を使用します。Service Workers、Web Authentication API などが機能します。ただし、次の場合にはローカル開発で HTTPS が必要になります。
- 混合コンテンツの問題のデバッグ
- HTTP/2 以降の使用
- HTTPS を必要とするサードパーティ製ライブラリまたは API を使用する
カスタムホスト名を使用する
✨ 以上が、詳細については、以下をご覧ください。
開発サイトを安全に動作させる理由
予期しない問題が発生しないように、ローカル開発サイトを本番環境のウェブサイトにできるだけ近づける必要があります。そのため、本番環境のウェブサイトで 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 を使用する必要があるのは、次のケースです。
- HTTPS ウェブサイトでのみ発生し、HTTP サイトや
http://localhost
では発生しない問題(混合コンテンツの問題など)は、ローカルでデバッグする必要があります。 - HTTP/2 以降に固有の動作をローカルでテストまたは再現する必要があります。たとえば、HTTP/2 以降での読み込みパフォーマンスをテストする必要がある場合です。安全でない HTTP/2 以降は、
localhost
であってもサポートされていません。 - HTTPS を必要とするサードパーティのライブラリや API(OAuth など)をローカルでテストする必要がある。
localhost
ではなく、ローカル開発用のカスタム ホスト名(mysite.example
など)を使用している。通常、これはローカル hosts ファイルをオーバーライドしたことを意味します。この場合、Chrome、Edge、Safari、Firefox では、
mysite.example
がローカル サイトであるにもかかわらず、デフォルトで安全と見なされません。そのため、HTTPS サイトのように動作しません。その他のケースただし、ここに記載されていないケースに遭遇した場合は、
http://localhost
で問題が発生するか、本番環境サイトのように動作しないことを認識してください。🙃
これらの場合、ローカル開発で HTTPS を使用する必要があります。
ローカル開発で HTTPS を使用する方法
ローカル開発で HTTPS を使用する必要がある場合は、ローカル開発で HTTPS を使用する方法をご覧ください。
カスタムホスト名を使用している場合のヒント
hosts ファイルを編集するなど、カスタムホスト名を使用している場合:
mysite
のような単純なホスト名は使用しないでください。同じ名前(mysite
)のトップレベル ドメイン(TLD)があると、問題が発生する可能性があります。2020 年現在、TLD は 1,500 を超えており、その数は増え続けています。coffee
、museum
、travel
などの多くの大企業名(勤務先の会社も含む)は TLD です。全リストはこちらをご覧ください。- 自分のドメイン、またはこの目的のために予約されたドメインのみを使用してください。独自のドメインがない場合は、
test
またはlocalhost
(mysite.localhost
)を使用できます。test
はブラウザで特別な処理を受けませんが、localhost
は特別な処理を受けます。Chrome と Edge はhttp://<name>.localhost
を標準でサポートしており、localhost が安全に動作している場合はhttp://<name>.localhost
も安全に動作します。試すには、localhost で任意のサイトを実行し、Chrome または Edge でhttp://<whatever name you like>.localhost:<your port>
にアクセスします。まもなく Firefox と Safari でも可能になる予定です。mysite.localhost
のようなサブドメインを使用できるのは、localhost
が単なるホスト名ではなく、com
のような完全な TLD でもあるためです。
その他の情報
すべてのレビュー担当者(特に Ryan Sleevi、Filippo Valsorda、Milica Mihajlija、Rowan Merewood、Jake Archibald 氏)のご協力とフィードバックに感謝いたします。🙌?
Unsplash の @moses_lee によるヒーロー画像を編集。