本文へスキップ

開発環境でのHTTPSの使用

注記: この機能はreact-scripts@0.4.0以降で使用できます。

開発サーバーでHTTPS経由でページを提供する必要がある場合があります。これは特に、「プロキシ」機能を使用してAPIサーバーへのリクエストをプロキシする場合に役立ちます。そのAPIサーバー自体がHTTPSでサービスを提供している場合です。

これを行うには、HTTPS環境変数をtrueに設定し、通常通りnpm startで開発サーバーを起動します。

Windows (cmd.exe)​

set HTTPS=true&&npm start

(注記: 空白がないのは意図的なものです。)

Windows (Powershell)​

($env:HTTPS = "true") -and (npm start)

Linux、macOS (Bash)​

HTTPS=true npm start

サーバーは自己署名証明書を使用するため、ページにアクセスすると、ウェブブラウザに警告が表示される可能性が非常に高いことに注意してください。

カスタムSSL証明書​

カスタム証明書を設定するには、SSL_CRT_FILEおよびSSL_KEY_FILE環境変数を、上記のようにHTTPSで行うのと同じ方法で、証明書とキーファイルのパスに設定します。HTTPS=trueも設定する必要があります。

Linux、macOS (Bash)​

HTTPS=true SSL_CRT_FILE=cert.crt SSL_KEY_FILE=cert.key npm start

毎回環境変数を設定する必要を避けるために、次のように`npm start`スクリプトに含めることができます。

{
  "start": "HTTPS=true react-scripts start"
}

または、HTTPS=trueを設定した.envファイルを作成することもできます。CRAでの環境変数の詳細については、こちらをご覧ください。