ローカル開発にHTTPSを使用する方法

場合によっては、HTTPSを使用してローカル開発サイトを実行する必要があります。これを安全かつ迅速に行うためのツールとヒント。

Jan 25, 2021

Available in: Español, 한국어, Português, Русский, 中文, English

*この投稿では、localhostに関する説明は、127.0.0.1と[::1]にも有効です。これらはいずれも、「ループバックアドレス」とも呼ばれるローカルコンピュータアドレスを記述しているためです。また、簡単にするために、ポート番号は指定されていません。*したがって、http://localhostは、 http://localhost:{PORT}またはhttp://127.0.0.1:{PORT}と読んでください。

本番WebサイトがHTTPSを使用している場合は、ローカル開発サイトをHTTPSサイトのように動作させる必要があります (本番WebサイトがHTTPSを使用していない場合は、HTTPSへの切り替えを優先します)。ほとんどの場合、 http://localhostを信頼し、HTTPSサイトのように動作させることができます。ただし、場合によっては、HTTPSを使用してサイトをローカルで実行する必要があります。次に、この方法について説明します。

⏩簡単な手順をお探しの場合、またはすでにこのトピックを読んだ場合は、チートシートを開いてください。

mkcertを使用してHTTPSでサイトをローカルで実行する (推奨) #

ローカル開発サイトでHTTPSを使用し、https://localhostまたはhttps://mysite.example (カスタムホスト名) にアクセスするには、TLS証明書が必要です。ただし、証明書だけではブラウザによって有効だと見なされません。証明書は、信頼できる認証局 (CA)と呼ばれる、ブラウザによって信頼されている機関によって署名されている必要があります。

必要な手順は、証明書を作成し、デバイスとブラウザによってローカルで信頼されているCAで署名することです。mkcertはこの手順を支援するためのツールであり、数個のコマンドで手順を実行できます。次に、このツールの仕組みについて説明します。

HTTPSを使用してブラウザでローカルに実行されているサイトを開くと、ブラウザがローカル開発サーバーの証明書を確認します。
ブラウザは、証明書がmkcertによって生成された認証局によって署名されていることを確認すると、証明書が信頼できる認証局として登録されているかどうかを確認します。
mkcertは信頼できる機関として登録されているため、ブラウザは証明書を信頼し、HTTPS接続を作成します。

mkcert (および類似したツール) には、次のようなさまざまな利点があります。

mkcertは、ブラウザによって有効な証明書と見なされる証明書に準拠した証明書の作成に特化しています。mkecertによって作成された証明書は、常に更新され、要件とベストプラクティスに適合しています。このため、mkcertコマンドを実行して、適切な証明書を生成ときには、複雑な構成や引数が必要ありません。
mkcertはクロスプラットフォームツールです。全員が使用できます。

mkcertは、ローカル開発用のTLS証明書を作成するために推奨されるツールです。他のオプションもご覧ください。

多くのオペレーティングシステムには、opensslなどの証明書を生成するためのライブラリが含まれている場合があります。このようなライブラリは、mkcertや類似したツールとは異なり、一貫して正しい証明書を生成しない可能性があります。また、複雑なコマンドの実行が必要になる場合があったり、必ずしもクロスプラットフォームではなかったりします。

注意 #

注意

- mkcert -installを実行するときにmkcertによって自動的に作成されるファイルrootCA-key.pemは絶対にエクスポートしたり共有したりしないでください。攻撃者がこのファイルを入手すると、ユーザーがアクセスしている可能性のあるすべてのサイトに対して中間者攻撃が発生する可能性があります。攻撃者はユーザーのコンピュータから銀行、医療機関、またはソーシャルネットワークなどの任意のサイトへの安全な要求を傍受する可能性があります。ファイルが安全であることを確認するために、rootCA-key.pemが格納されている場所を知る必要がある場合は、mkcert -CAROOTを実行してください。 - mkcertは開発目的でのみ使用してください。特に、絶対にエンドユーザーにmkcertコマンドの実行を依頼しないでください。 - 開発チーム: チームのすべてのメンバーは、mkcertを個別にインストールして実行する必要があります (CAと証明書は保存、共有しないこと)。

セットアップ #

mkcertをインストールします (1回のみ)。

オペレーティングシステムにmkcertをインストールするための手順に従います。たとえば、macOSの場合は次のように実行します。
```
brew install mkcert
brew install nss # if you use Firefox
```
ローカルルートCAにmkcertを追加します。

ターミナルで、次のコマンドを実行します。
```
mkcert -install
```
これにより、ローカル認証局 (CA) が生成されます。 mkcertで生成されたローカルCAは、デバイス上でローカルでのみ信頼されます。
mkcertによって署名されたサイトの証明書を生成します。

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

次のコマンドを実行します。
```
mkcert localhost
```
mysite.exampleようなカスタムホスト名を使用している場合は、次のコマンドを実行します。
```
mkcert mysite.example
```
上記のコマンドは2つの処理を実行します。
- 指定したホスト名の証明書を生成する
- mkcert (手順2でローカルCAとして追加した認証局) にこの証明書に署名させます。
これで、証明書の準備が整い、ブラウザによってローカルで信頼される認証局が署名しました。これで手順はほぼ完了ですが、サーバーはまだ証明書を認識していません。
サーバーを構成します。

(開発サーバーはデフォルトでHTTPを使用する傾向があるため) ここで、HTTPSを使用し、作成したTLS証明書を使用するようにサーバーに命令します。

この正確な方法はサーバーによって異なります。次に例をいくつか示します。

👩🏻‍💻ノードあり:

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サーバーを使用:

次のようにサーバーを起動します ({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"
```
👩🏻‍💻その他の例:
- Angular開発サーバー
- Python
✨これで完了です。 https://localhostまたはhttps://mysite.exampleをブラウザ開きます。HTTPSを使用してローカルでサイトを実行しています。ブラウザはローカル認証局としてmkcertを信頼しているため、ブラウザの警告は表示されません。

mkcertの使用: チートシート #

mkcertの概要

HTTPSを使用してローカル開発サイトを実行するには、次の手順に従います。

mkcertを設定します。

まだインストールしていない場合は、mkcertをインストールします。次に、macOSの例を示します。
```
brew install mkcert
```
WindowsおよびLinuxの手順については、 mkcertのインストールを確認してください。

次に、ローカル認証局を作成します。
```
mkcert -install
```
信頼できる証明書を作成します。
```
mkcert {YOUR HOSTNAME e.g. localhost or mysite.example}
```
これにより、有効な証明書が作成されます (mkcertによって自動的に署名されます)。
HTTPSと手順2で作成した証明書を使用するように開発サーバーを構成します。
✨これで完了です。これで、ブラウザで警告が表示されずにhttps://{YOUR HOSTNAME}にアクセスできます。

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

自己署名証明書 #

また、mkcertのようなローカル認証局を使用せずに自分で証明書に署名することもできます。

この方法には問題点がいくつかあるので注意が必要です。

ブラウザによって認証局として信頼されていないため、手動でバイパスする必要があるという警告が表示されます。 Chromeでは、#allow-insecure-localhostフラグを使用して、localhostで表示されるこの警告を回避できます。
保護されていないネットワークで作業している場合は、安全ではありません。
自己署名証明書は、信頼できる証明書とまったく同じようには動作しません。
mkcertのようなローカルCAを使用する場合と比べ、必ずしも簡単または高速であるとは限りません。
ブラウザのコンテキストでこの手法を使用していない場合、サーバーの証明書の検証を無効にしなければならないことがあります。本番環境で再有効化しないと危険です。

自己署名証明書が使用されたときにブラウザに表示される警告のスクリーンショット。 — 自己署名証明書が使用されると、警告ブラウザが表示されます。

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

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

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

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

また、ローカルではなく実際の認証局に証明書に署名させるという手法もあります。

これらの手法の使用を検討している場合は、次の点に注意してください。

mkcertなどのローカルCA手法を使用するときよりも、セットアップ作業が多くなります。
管理している有効なドメイン名を使用する必要があります。つまり、次の場合には、実際の認証局を使用できません。
- localhostおよび予約されているその他のドメイン名 (例: exampleやtest)。
- 管理していないドメイン名。
- 無効な最上位のドメイン。有効な最上位のドメインの一覧を参照してください。

リバースプロキシ #

別の方法として、HTTPSを使用してローカルで実行されているサイトにアクセスするときに、ngrokなどのリバースプロキシを使用できます。

次の点を考慮してください。

リバースプロキシで作成されたURLを共有すると、全員がローカル開発サイトにアクセスできます。これは、顧客に対してプロジェクトのデモを行うときには非常に便利です。しかし、プロジェクトの機密性が高い場合は、これがマイナス面になる可能性があります。
価格設定を検討する必要があるかもしれません。
ブラウザの新しいセキュリティ対策は、このようなツールの動作に影響を与える可能性があります。