このページは Cloud Translation API によって翻訳されました。

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

Maud Nalpas

ほとんどの場合、http://localhost は開発では HTTPS のように動作しますあります。ただし、中には特殊なケース、ブラウザ間での安全な Cookie の使用など、必要な場合に HTTPS のように動作するよう開発サイトを明示的に設定し、本番環境でのサイトの動作を表します（本番環境のウェブサイトで HTTPS への切り替えを優先的に行います）。

このページでは、HTTPS を使用してサイトをローカルで実行する方法について説明します。

簡単な手順については、mkcert クイックリファレンスをご覧ください。**

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

ローカルの開発サイトで HTTPS を使用して https://localhost または https://mysite.example（カスタムホスト名）を使用するには、 TLS 証明書デバイスとブラウザが信頼するエンティティ（信頼できる 認証局（CA）。ブラウザは、開発用サーバーの証明書が作成する前に、HTTPS 接続を作成します。

mkcert を使用することをおすすめします。クロスプラットフォーム CA を使用して証明書を作成し、署名する必要があります。その他の有用なオプションについては、HTTPS を使用してサイトをローカルで実行する: その他のオプションをご覧ください。

多くのオペレーティングシステムには、 openssl.ただし、そのほうが複雑で、 mkcert よりも信頼性が高く、必ずしもクロスプラットフォームとは限らないため、大規模なデベロッパーチームにとって利用しにくいものになります

注意: <ph type="x-smartling-placeholder">

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
```
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"
```
🅰?️ 💻? その他の例:
- Angular 開発用サーバー
- Python
ブラウザで https://localhost または https://mysite.example を開いて、以下を行います。サイトが HTTPS を使用してローカルで実行されていることを確認してください。何も表示されません。ブラウザが mkcert をローカル証明書として信頼しているため、ブラウザの警告できます。

mkcert クイックリファレンス

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

mkcert を設定する。

mkcert をまだインストールしていない場合は、macOS などにインストールします。
```
brew install mkcert
```
[install 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 を使用するよりも簡単で迅速とは限りません。

自己署名証明書は、信頼できる証明書とまったく同じようには動作しない提供します。

ブラウザでこの手法を使用しない場合は、無効にする必要がありますサーバーの証明書の検証を行うこともできます。再度有効にするのを忘れたセキュリティの問題が発生しています。

で確認できます。 <ph type="x-smartling-placeholder">
</ph>
自己署名証明書が使用されている場合、ブラウザが警告を表示します。

証明書を指定しない場合、React のおよび Vue 開発用サーバーの HTTPS オプションを使用すると、証明書の配下に自己署名証明書があります。この操作は簡単ですが、同じブラウザ上で表示される警告やその他の注意点があります。幸いなことに、フロントエンド API を使用してフレームワークオプションを使用して、ローカルで信頼されている証明書を mkcert などを使用して作成されます。詳しくは、 React を使用した mkcert の例。

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

ローカルで実行されているサイトを HTTPS を使用してブラウザで開くと、ブラウザはローカル開発用サーバーの証明書をチェックします。タイミングユーザー自身で証明書に署名した場合は、信頼できる認証局として登録されていること。なぜなら、ブラウザは証明書を信頼できないため、警告が表示されます。接続が安全でないというメッセージが表示される。引き続き HTTPS レイヤを接続する場合は、ご自身の責任で行ってください。
<ph type="x-smartling-placeholder">
</ph>
ブラウザが自己署名証明書を信頼しない理由

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

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

ローカル CA の手法を使用する場合よりも多くの設定作業を行う必要があります。 mkcert.

お客様が管理している有効なドメイン名を使用する必要があります。つまり次の場合は正式な CA を使用します。 <ph type="x-smartling-placeholder">
</ph>
localhost とその他予約済み example や test などのドメイン名。

お客様が管理していないドメイン名。

トップレベルドメインが無効です。詳細については、有効なトップレベルドメインのリストをご覧ください。

リバースプロキシ

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

リバースプロキシの URL を共有した相手は、誰でもローカル開発にアクセスできます。サイトをご覧ください。お客様にプロジェクトのデモを行う際に役立つだけでなく、不正なユーザーが機密情報を共有できるようにすることです。

一部のリバースプロキシサービスは使用量に応じて課金されるため、選択できます。

ブラウザの新しいセキュリティ対策が理解することが重要です。

フラグ（非推奨）

Chrome で mysite.example などのカスタムホスト名を使用している場合は、ブラウザに mysite.example を安全と見なすフラグを設定します。避けるべき回答 理由は次のとおりです。

mysite.example が常にローカルに解決されることを保証する必要があります。あります。そうしないと、本番環境の認証情報が漏洩するリスクがあります。

このフラグは Chrome でのみ機能するため、複数のブラウザをまたいでデバッグすることはできません。

すべてのレビュアーとコントリビューター、特に Ryan Sleevi 氏の貢献とフィードバックに感謝の意を表します。 Filippo Valsorda、Miliica Mihajlija、Rowan Merewood。🙌

ヒーロー画像の背景（@anandu、Unsplash より編集）

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

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

セットアップ

mkcert クイック リファレンス

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

自己署名証明書

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

リバース プロキシ

フラグ（非推奨）

mkcert クイックリファレンス

リバースプロキシ