本文へスキップ

高度な設定

シェルで環境変数を設定するか、.envを使用して、さまざまな開発および本番設定を調整できます。

注：カスタム環境変数の場合のように、以下の変数の前にREACT_APP_を宣言する必要はありません。

変数開発本番環境使用方法
BROWSER✅ 使用済み🚫 無視済みデフォルトでは、Create React Appはデフォルトのシステムブラウザを開き、macOSではChromeを優先します。この動作を上書きするにはブラウザを指定するか、完全に無効にするにはnoneに設定します。ブラウザの起動方法をカスタマイズする必要がある場合は、代わりにノードスクリプトを指定できます。npm startに渡される引数はすべてこのスクリプトにも渡され、アプリが提供されるURLが最後の引数になります。スクリプトのファイル名は.js拡張子を持つ必要があります。
BROWSER_ARGS✅ 使用済み🚫 無視済みBROWSER環境変数が指定されている場合、この環境変数に設定された引数はすべてブラウザインスタンスに渡されます。複数の引数は、スペースで区切られたリストとしてサポートされます。デフォルトでは、ブラウザに引数は渡されません。
HOST✅ 使用済み🚫 無視済みデフォルトでは、開発ウェブサーバーはデバイス上のすべてのホスト名（localhost、LANネットワークアドレスなど）にバインドされます。この変数を使用して、別のホストを指定できます。
PORT✅ 使用済み🚫 無視済みデフォルトでは、開発ウェブサーバーはポート3000でリスンしようとします。または、次の使用可能なポートを試行するように促します。この変数を使用して、別のポートを指定できます。
HTTPS✅ 使用済み🚫 無視済みtrueに設定すると、Create React Appは開発サーバーをhttpsモードで実行します。
WDS_SOCKET_HOST✅ 使用済み🚫 無視済み設定されている場合、Create React AppはホットモジュールリロードのカスタムWebsocketホスト名を使用して開発サーバーを実行します。通常、webpack-dev-serverはSockJSホスト名にwindow.location.hostnameをデフォルトで使用します。この変数を使用して、複数のCreate React Appプロジェクトで同時にローカル開発を開始できます。詳細については、webpack-dev-serverのドキュメントを参照してください。
WDS_SOCKET_PATH✅ 使用済み🚫 無視済み設定されている場合、Create React AppはホットモジュールリロードのカスタムWebsocketパスを使用して開発サーバーを実行します。通常、webpack-dev-serverはSockJSパス名に/wsをデフォルトで使用します。この変数を使用して、複数のCreate React Appプロジェクトで同時にローカル開発を開始できます。詳細については、webpack-dev-serverのドキュメントを参照してください。
WDS_SOCKET_PORT✅ 使用済み🚫 無視済み設定されている場合、Create React AppはホットモジュールリロードのカスタムWebsocketポートを使用して開発サーバーを実行します。通常、webpack-dev-serverはSockJSポートにwindow.location.portをデフォルトで使用します。この変数を使用して、複数のCreate React Appプロジェクトで同時にローカル開発を開始できます。詳細については、webpack-dev-serverのドキュメントを参照してください。
PUBLIC_URL✅ 使用済み✅ 使用済みCreate React Appは、アプリケーションが提供するWebサーバーのルートまたはpackage.json（homepage）で指定されたサブパスにホストされていると想定しています。通常、Create React Appはホスト名を無視します。この変数を使用して、提供するURL（ホスト名を含む）にアセットを逐語的に参照するように強制できます。これは、CDNを使用してアプリケーションをホストする場合に特に役立ちます。
BUILD_PATH🚫 無視済み✅ 使用済みデフォルトでは、Create React Appはコンパイルされたアセットを/srcに隣接する/buildディレクトリに出力します。この変数を使用して、Create React Appがアセットを出力する新しいパスを指定できます。BUILD_PATHは、プロジェクトのルートからの相対パスとして指定する必要があります。
CI✅ 使用済み✅ 使用済みtrueに設定すると、Create React Appはビルドで警告をエラーとして扱います。また、テストランナーを非監視モードにします。ほとんどのCIでは、このフラグがデフォルトで設定されています。
REACT_EDITOR✅ 使用済み🚫 無視済み開発中にアプリがクラッシュすると、クリック可能なスタックトレースを含むエラーオーバーレイが表示されます。それをクリックすると、Create React Appは現在実行中のプロセスに基づいて使用しているエディターを特定し、関連するソースファイルを開こうとします。お好みのエディターを検出するには、プルリクエストを送信できます。この環境変数を設定すると、自動検出が上書きされます。これを行う場合は、システムのPATH環境変数がエディターのbinフォルダを指していることを確認してください。完全に無効にするにはnoneに設定することもできます。
CHOKIDAR_USEPOLLING✅ 使用済み🚫 無視済みtrueに設定すると、ウォッチャーはポーリングモードで実行されます。これは、VM内では必要です。npm startが変更を検出しない場合は、このオプションを使用します。
GENERATE_SOURCEMAP🚫 無視済み✅ 使用済みfalseに設定すると、本番ビルド用のソースマップは生成されません。これにより、一部の小規模なマシンでのメモリ不足（OOM）の問題が解決されます。
INLINE_RUNTIME_CHUNK🚫 無視済み✅ 使用済みデフォルトでは、Create React Appは本番ビルド中にランタイムスクリプトをindex.htmlに埋め込みます。falseに設定すると、スクリプトは埋め込まれず、通常どおりインポートされます。これは、CSPを扱う場合に通常必要です。
IMAGE_INLINE_SIZE_LIMIT✅ 使用済み✅ 使用済みデフォルトでは、10,000バイトより小さい画像はbase64でデータURIとしてエンコードされ、CSSまたはJSビルドアーティファクトにインライン化されます。バイト単位のサイズ制限を制御するにはこれを設定します。0に設定すると、画像のインライン化が無効になります。
FAST_REFRESH✅ 使用済み🚫 無視済みfalseに設定すると、ページをリロードせずにリアルタイムでコンポーネントを調整できるように、高速リフレッシュの実験的サポートが無効になります。
TSC_COMPILE_ON_ERROR✅ 使用済み✅ 使用済みtrueに設定すると、TypeScriptの型チェックエラーがあっても、TypeScriptプロジェクトを正常に実行およびビルドできます。これらのエラーは、ターミナルやブラウザコンソールに警告として表示されます。
ESLINT_NO_DEV_ERRORS✅ 使用済み🚫 無視済みtrueに設定すると、開発中にESLintエラーが警告に変換されます。その結果、ESLint出力はエラーオーバーレイに表示されなくなります。
DISABLE_ESLINT_PLUGIN✅ 使用済み✅ 使用済みtrueに設定すると、eslint-webpack-pluginが完全に無効になります。
DISABLE_NEW_JSX_TRANSFORM✅ 使用済み✅ 使用済みtrueに設定すると、React 17で導入され、React 16.14.0、15.7.0、および0.14.10にバックポートされた新しいJSX変換が無効になります。新しいプロジェクトでは、デフォルトでこれをサポートするバージョンのReactが使用されますが、Reactをアップグレードできない既存のプロジェクトでは無効にする必要がある場合があります。