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

ローカル開発では、特別なケースを除き、ほとんどの場合 http://localhost を使用できます。この記事では、ローカル開発サイトを HTTPS で実行する必要がある場合について説明します。

Maud Nalpas
Maud Nalpas
X GitHub

ローカル開発で 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 を使用する場合。

✨ 以上が、詳細については、以下をご覧ください。

開発サイトを安全に動作させる理由

予期しない問題が発生しないように、ローカル開発サイトを本番環境のウェブサイトにできるだけ近づける必要があります。そのため、本番環境のウェブサイトで 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 によるヒーロー画像を編集。