ほとんどの場合、http://localhost
は開発上の HTTPS のように動作します。ただし、カスタムホスト名を使用している場合や、複数のブラウザで安全な Cookie を使用している場合など、特殊なケースとして、HTTPS のように動作するよう開発サイトを明示的にセットアップして、本番環境でのサイトの動作を正確に表す必要があります。(本番環境のウェブサイトで HTTPS を使用していない場合は、HTTPS に切り替えることを優先してください)。
このページでは、HTTPS を使用してサイトをローカルで実行する方法について説明します。
簡単な手順については、mkcert のクイック リファレンスをご覧ください。**
mkcert を使用して HTTPS でサイトをローカルで実行する(推奨)
ローカルの開発サイトで HTTPS を使用して https://localhost
または https://mysite.example
(カスタムホスト名)にアクセスするには、デバイスとブラウザの信頼するエンティティ(信頼できる認証局(CA))によって署名された TLS 証明書が必要です。ブラウザは、HTTPS 接続を作成する前に、開発用サーバーの証明書が信頼できる CA によって署名されているかどうかを確認します。
クロス プラットフォームの CA である mkcert を使用して、証明書を作成し、署名することをおすすめします。その他の便利なオプションについては、HTTPS を使用してサイトをローカルで実行する: その他のオプションをご覧ください。
多くのオペレーティング システムに、openssl などの証明書を作成するためのライブラリが含まれています。ただし、mkcert よりも複雑で信頼性が低く、必ずしもクロス プラットフォームではないため、大規模なデベロッパー チームがアクセスしにくい場合があります。
設定
mkcert をインストールします(1 回だけ)。
オペレーティング システムに mkcert をインストールするためのinstructionsに沿って操作します。たとえば、macOS の場合は次のようになります。
brew install mkcert brew install nss # if you use Firefox
mkcert をローカルルート CA に追加します。
ターミナルで、次のコマンドを実行します。
mkcert -install
これにより、ローカル認証局(CA)が生成されます。mkcert で生成されたローカル CA は、デバイス上でローカルでのみ信頼されます。
mkcert で署名されたサイトの証明書を生成します。
ターミナルで、サイトのルート ディレクトリまたは証明書を保存するディレクトリに移動します。
次のコマンドを実行します。
mkcert localhost
mysite.example
などのカスタムホスト名を使用している場合は、次のコマンドを実行します。mkcert mysite.example
このコマンドは、次の 2 つのことを行います。
- 指定したホスト名の証明書を生成します。
- mkcert で証明書に署名します。
これで証明書の準備が整い、ブラウザがローカルで信頼する認証局によって署名されました。
作成した TLS 証明書を HTTPS で使用するようにサーバーを設定します。
詳しい手順については、サーバーによって異なります。以下にいくつか例を示します。
⁂️ 🚀? ノードの場合:
server.js
({PATH/TO/CERTIFICATE...}
と{PORT}
を置き換え):const https = require('https'); const fs = require('fs'); const options = { key: fs.readFileSync('{PATH/TO/CERTIFICATE-KEY-FILENAME}.pem'), cert: fs.readFileSync('{PATH/TO/CERTIFICATE-FILENAME}.pem'), }; https .createServer(options, function (req, res) { // server code }) .listen({PORT});
❌️ ❌ http-server の場合:
次のようにサーバーを起動します(
{PATH/TO/CERTIFICATE...}
の部分を置き換えます)。http-server -S -C {PATH/TO/CERTIFICATE-FILENAME}.pem -K {PATH/TO/CERTIFICATE-KEY-FILENAME}.pem
-S
は HTTPS でサーバーを実行し、-C
は証明書を設定し、-K
は鍵を設定します。⁂️ 🚀? React 開発サーバーの場合:
package.json
を次のように編集し、{PATH/TO/CERTIFICATE...}
を置き換えます。"scripts": { "start": "HTTPS=true SSL_CRT_FILE={PATH/TO/CERTIFICATE-FILENAME}.pem SSL_KEY_FILE={PATH/TO/CERTIFICATE-KEY-FILENAME}.pem react-scripts start"
たとえば、サイトのルート ディレクトリに
localhost
の証明書を作成した場合は、次のようになります。|-- my-react-app |-- package.json |-- localhost.pem |-- localhost-key.pem |--...
start
スクリプトは次のようになります。"scripts": { "start": "HTTPS=true SSL_CRT_FILE=localhost.pem SSL_KEY_FILE=localhost-key.pem react-scripts start"
⁂️ 📊? その他の例:
ブラウザで
https://localhost
またはhttps://mysite.example
を開き、サイトをローカルで HTTPS で実行していることを再度確認します。ブラウザは mkcert をローカル認証局として信頼しているため、ブラウザに関する警告は表示されません。
mkcert クイック リファレンス
HTTPS を使用してローカル開発サイトを実行するには:
-
mkcert をセットアップします。
macOS などに mkcert をまだインストールしていない場合は、インストールします。
brew install mkcert
Windows と Linux の手順について、mkcert のインストールをご覧ください。
次に、ローカル認証局を作成します。
mkcert -install
-
信頼できる証明書を作成します。
mkcert {YOUR HOSTNAME e.g. localhost or mysite.example}
これにより、mkcert が自動的に署名する有効な証明書が作成されます。
-
HTTPS とステップ 2 で作成した証明書を使用するように、開発用サーバーを構成します。
ブラウザで警告を表示せずに https://{YOUR HOSTNAME}
にアクセスできるようになりました
</div>
HTTPS を使用してローカルでサイトを実行する: その他のオプション
証明書を設定するその他の方法は次のとおりです。これらは通常、mkcert を使用するよりも複雑またはリスクが高くなります。
自己署名証明書
mkcert などのローカル認証局を使用せずに、自分で証明書に署名することもできます。このアプローチにはいくつかの注意点があります。
- ブラウザはユーザーを認証局として信頼していないため、手動でバイパスする必要がある警告が表示されます。Chrome では、
#allow-insecure-localhost
フラグを使用することで、localhost
でこの警告を自動的にバイパスできます。 - 安全でないネットワークで作業している場合、この方法は安全ではありません。
- mkcert などのローカル CA を使用するよりも、必ずしも簡単で便利ではありません。
- 自己署名証明書は、信頼できる証明書とまったく同じようには動作しません。
- ブラウザのコンテキストでこの手法を使用していない場合は、サーバーの証明書検証を無効にする必要があります。本番環境で再度有効にしないと、セキュリティの問題が発生します。
![自己署名証明書が使用されている場合は、ブラウザに表示される警告のスクリーンショットがブラウザに表示されます。](https://web.dev/static/articles/how-to-use-local-https/image/screenshots-the-warnings-953f06ad1aebc.jpg?authuser=6&hl=ja)
証明書を指定しない場合、React と Vue の開発用サーバーの HTTPS オプションにより、内部で自己署名証明書が作成されます。この処理はすぐに行えますが、自己署名証明書の場合と同様に、ブラウザによる警告やその他の注意点があります。幸いなことに、フロントエンド フレームワークの組み込み HTTPS オプションを使用して、mkcert などを使用して作成されたローカルで信頼できる証明書を指定できます。詳細については、React を使用した mkcert の例をご覧ください。
HTTPS を使用して、ローカルで実行されているサイトをブラウザで開くと、ブラウザはローカル開発用サーバーの証明書を確認します。ユーザー自身が証明書に署名したことが確認されると、信頼できる認証局として登録されているかどうかが確認されます。そうでないため、ブラウザは証明書を信頼できず、接続が安全でないことを示す警告が表示されます。続行しても HTTPS 接続は作成されますが、その場合は自己責任で行ってください。
![ブラウザが自己署名証明書を信頼しない理由: 図。](https://web.dev/static/articles/how-to-use-local-https/image/why-browsers-dont-trust-9aa014d2da64b.jpg?authuser=6&hl=ja)
通常の認証局によって署名された証明書
正式な CA によって署名された証明書を使用することもできます。これには、次のような問題が伴います。
- mkcert などのローカル CA の手法を使用する場合よりも、設定作業が多くなります。
- 管理している有効なドメイン名を使用する必要があります。つまり、次のものには正式な CA を使用できません。
localhost
と、他の予約済みドメイン名(example
、test
など)。- お客様が管理していないドメイン名。
- トップレベル ドメインが無効です。詳しくは、有効なトップレベル ドメインのリストをご覧ください。
リバース プロキシ
HTTPS を使用してローカルで実行されているサイトにアクセスするもう 1 つの方法は、ngrok などのリバース プロキシを使用することです。これには次のようなリスクがあります。
- リバース プロキシの URL を共有するユーザーなら誰でも、ローカルの開発サイトにアクセスできます。これは、プロジェクトをクライアントにデモする場合に役立ちますが、権限のないユーザーが機密情報を共有できるようになる可能性もあります。
- 一部のリバース プロキシ サービスでは使用量に応じて課金されるため、料金がサービスの選択に影響する可能性があります。
- ブラウザの新しいセキュリティ対策は、これらのツールの動作に影響を与える可能性があります。
フラグ(非推奨)
Chrome で mysite.example
などのカスタムホスト名を使用している場合は、フラグを使用して、ブラウザに mysite.example
が安全であるとみなすよう強制できます。次の理由により、この操作は行わないでください。
mysite.example
が常にローカル アドレスに解決されることを 100% 保証する必要があります。そうしないと、本番環境の認証情報が漏洩するリスクがあります。- このフラグは Chrome でのみ機能するため、ブラウザをまたいでデバッグすることはできません。
すべてのレビュアーとコントリビューター、特に Ryan Sleevi、Filippo Vablyrda、Milica Mihajlija、Rowan Merewood に多大な貢献とフィードバックをいただきました。🙌