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

Maud Nalpas
Maud Nalpas
X GitHub

ほとんどの場合、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 よりも複雑で信頼性が低く、必ずしもクロス プラットフォームではないため、大規模なデベロッパー チームがアクセスしにくい場合があります。

設定

  1. mkcert をインストールします（1 回だけ）。

    オペレーティング システムに mkcert をインストールするためのinstructionsに沿って操作します。たとえば、macOS の場合は次のようになります。

    brew install mkcert
brew install nss # if you use Firefox

  2. mkcert をローカルルート CA に追加します。

    ターミナルで、次のコマンドを実行します。

    mkcert -install

    これにより、ローカル認証局（CA）が生成されます。mkcert で生成されたローカル CA は、デバイス上でローカルでのみ信頼されます。

  3. mkcert で署名されたサイトの証明書を生成します。

    ターミナルで、サイトのルート ディレクトリまたは証明書を保存するディレクトリに移動します。

    次のコマンドを実行します。

    mkcert localhost

    mysite.example などのカスタムホスト名を使用している場合は、次のコマンドを実行します。

    mkcert mysite.example

    このコマンドは、次の 2 つのことを行います。

    • 指定したホスト名の証明書を生成します。
    • mkcert で証明書に署名します。

    これで証明書の準備が整い、ブラウザがローカルで信頼する認証局によって署名されました。

  4. 作成した 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"

    ⁂️ 📊? その他の例:

  5. ブラウザで https://localhost または https://mysite.example を開き、サイトをローカルで HTTPS で実行していることを再度確認します。ブラウザは mkcert をローカル認証局として信頼しているため、ブラウザに関する警告は表示されません。

mkcert クイック リファレンス

mkcert クイック リファレンス

HTTPS を使用してローカル開発サイトを実行するには:

  1. mkcert をセットアップします。

    macOS などに mkcert をまだインストールしていない場合は、インストールします。

    brew install mkcert

    Windows と Linux の手順について、mkcert のインストールをご覧ください。

    次に、ローカル認証局を作成します。

    mkcert -install

  2. 信頼できる証明書を作成します。

    mkcert {YOUR HOSTNAME e.g. localhost or mysite.example}

    これにより、mkcert が自動的に署名する有効な証明書が作成されます。

  3. HTTPS とステップ 2 で作成した証明書を使用するように、開発用サーバーを構成します。

ブラウザで警告を表示せずに https://{YOUR HOSTNAME} にアクセスできるようになりました

</div>

HTTPS を使用してローカルでサイトを実行する: その他のオプション

証明書を設定するその他の方法は次のとおりです。これらは通常、mkcert を使用するよりも複雑またはリスクが高くなります。

自己署名証明書

mkcert などのローカル認証局を使用せずに、自分で証明書に署名することもできます。このアプローチにはいくつかの注意点があります。

  • ブラウザはユーザーを認証局として信頼していないため、手動でバイパスする必要がある警告が表示されます。Chrome では、#allow-insecure-localhost フラグを使用することで、localhost でこの警告を自動的にバイパスできます。
  • 安全でないネットワークで作業している場合、この方法は安全ではありません。
  • mkcert などのローカル CA を使用するよりも、必ずしも簡単で便利ではありません。
  • 自己署名証明書は、信頼できる証明書とまったく同じようには動作しません。
  • ブラウザのコンテキストでこの手法を使用していない場合は、サーバーの証明書検証を無効にする必要があります。本番環境で再度有効にしないと、セキュリティの問題が発生します。
自己署名証明書が使用されている場合は、ブラウザに表示される警告のスクリーンショットがブラウザに表示されます。
自己署名証明書を使用すると、ブラウザに警告が表示されます。

証明書を指定しない場合、React と Vue の開発用サーバーの HTTPS オプションにより、内部で自己署名証明書が作成されます。この処理はすぐに行えますが、自己署名証明書の場合と同様に、ブラウザによる警告やその他の注意点があります。幸いなことに、フロントエンド フレームワークの組み込み HTTPS オプションを使用して、mkcert などを使用して作成されたローカルで信頼できる証明書を指定できます。詳細については、React を使用した mkcert の例をご覧ください。

ブラウザが自己署名証明書を信頼しないのはなぜですか？

HTTPS を使用して、ローカルで実行されているサイトをブラウザで開くと、ブラウザはローカル開発用サーバーの証明書を確認します。ユーザー自身が証明書に署名したことが確認されると、信頼できる認証局として登録されているかどうかが確認されます。そうでないため、ブラウザは証明書を信頼できず、接続が安全でないことを示す警告が表示されます。続行しても HTTPS 接続は作成されますが、その場合は自己責任で行ってください。

ブラウザが自己署名証明書を信頼しない理由: 図。
ブラウザが自己署名証明書を信頼しない理由。

通常の認証局によって署名された証明書

正式な CA によって署名された証明書を使用することもできます。これには、次のような問題が伴います。

  • mkcert などのローカル CA の手法を使用する場合よりも、設定作業が多くなります。
  • 管理している有効なドメイン名を使用する必要があります。つまり、次のものには正式な CA を使用できません。

リバース プロキシ

HTTPS を使用してローカルで実行されているサイトにアクセスするもう 1 つの方法は、ngrok などのリバース プロキシを使用することです。これには次のようなリスクがあります。

  • リバース プロキシの URL を共有するユーザーなら誰でも、ローカルの開発サイトにアクセスできます。これは、プロジェクトをクライアントにデモする場合に役立ちますが、権限のないユーザーが機密情報を共有できるようになる可能性もあります。
  • 一部のリバース プロキシ サービスでは使用量に応じて課金されるため、料金がサービスの選択に影響する可能性があります。
  • ブラウザの新しいセキュリティ対策は、これらのツールの動作に影響を与える可能性があります。

Chrome で mysite.example などのカスタムホスト名を使用している場合は、フラグを使用して、ブラウザに mysite.example が安全であるとみなすよう強制できます。次の理由により、この操作は行わないでください。

  • mysite.example が常にローカル アドレスに解決されることを 100% 保証する必要があります。そうしないと、本番環境の認証情報が漏洩するリスクがあります。
  • このフラグは Chrome でのみ機能するため、ブラウザをまたいでデバッグすることはできません。

すべてのレビュアーとコントリビューター、特に Ryan Sleevi、Filippo Vablyrda、Milica Mihajlija、Rowan Merewood に多大な貢献とフィードバックをいただきました。🙌

ヒーロー画像の背景（投稿者: @anandu、Unsplash より）