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

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

Maud Nalpas

ローカル開発に 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 が必要になります。

  • 混合コンテンツの問題のデバッグ
  • 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 ファイルをオーバーライドしていることを意味します。

    hosts ファイルを編集しているターミナルのスクリーンショット
    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 Valsorda、Milica Mihajlija、Rowan Merewood、Jake Archibald）のご協力とフィードバックに感謝いたします。🙌

ヒーロー画像: Unsplash の @moses_lee（編集済み）。