カスタム環境変数の追加

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

プロジェクトでは、環境で宣言された変数を、JSファイル内でローカルに宣言されたかのように使用できます。デフォルトでは、NODE_ENVが定義され、REACT_APP_で始まるその他の環境変数も使用できます。

警告: Reactアプリにシークレット（秘密のAPIキーなど）を保存しないでください！
環境変数はビルドに埋め込まれるため、アプリのファイルを確認することで誰でもそれらを表示できます。

環境変数はビルド時に埋め込まれます。Create React Appは静的なHTML/CSS/JSバンドルを生成するため、実行時にそれらを読み取ることはできません。実行時にそれらを読み取るには、サーバー上でHTMLをメモリにロードし、実行時にプレースホルダーを置き換える必要があります。こちらで説明されているように。または、変更するたびにサーバー上でアプリを再ビルドできます。

注記: カスタム環境変数はREACT_APP_で始める必要があります。NODE_ENV以外の変数は、誤って同じ名前を持つ可能性のあるマシンの秘密鍵を公開してしまうのを避けるため、無視されます。環境変数を変更する場合は、開発サーバーが実行されている場合は再起動する必要があります。

これらの環境変数はprocess.envで定義されます。たとえば、REACT_APP_NOT_SECRET_CODEという名前の環境変数は、JSではprocess.env.REACT_APP_NOT_SECRET_CODEとして公開されます。

NODE_ENVという組み込みの環境変数もあります。これはprocess.env.NODE_ENVから読み取ることができます。npm startを実行すると常に'development'になり、npm testを実行すると常に'test'になり、本番バンドルを作成するためにnpm run buildを実行すると常に'production'になります。NODE_ENVを手動で上書きすることはできません。これにより、開発者が誤って遅い開発ビルドを本番環境にデプロイすることを防ぎます。

これらの環境変数は、プロジェクトがデプロイされている場所に基づいて情報を条件付きで表示したり、バージョン管理の外にある機密データを使用したりするのに役立ちます。

まず、環境変数を定義する必要があります。たとえば、<form>内で環境変数を使用したいとします。

render() {
  return (
    <div>
      <small>You are running this application in <b>{process.env.NODE_ENV}</b> mode.</small>
      <form>
        <input type="hidden" defaultValue={process.env.REACT_APP_NOT_SECRET_CODE} />
      </form>
    </div>
  );
}

ビルド中、process.env.REACT_APP_NOT_SECRET_CODEはREACT_APP_NOT_SECRET_CODE環境変数の現在の値に置き換えられます。NODE_ENV変数は自動的に設定されることに注意してください。

ブラウザでアプリをロードして<input>を検査すると、その値がabcdefに設定され、太字のテキストにはnpm startを使用した場合に提供される環境が表示されます。

<div>
  <small>You are running this application in <b>development</b> mode.</small>
  <form>
    <input type="hidden" value="abcdef" />
  </form>
</div>

上記のフォームは、環境からREACT_APP_NOT_SECRET_CODEという変数を検索しています。この値を使用するには、環境で定義する必要があります。これは、シェルまたは.envファイルの2つの方法で実行できます。これらの方法は次のセクションで説明します。

NODE_ENVにアクセスできることは、条件付きでアクションを実行する場合にも役立ちます。

if (process.env.NODE_ENV !== 'production') {
  analytics.disable();
}

npm run buildを使用してアプリをコンパイルすると、ミニファイ化ステップによってこの条件が削除され、結果のバンドルは小さくなります。

HTMLでの環境変数の参照

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

public/index.htmlで、REACT_APP_で始まる環境変数にもアクセスできます。例：

<title>%REACT_APP_WEBSITE_NAME%</title>

上記のセクションの注意事項が適用されます。

いくつかの組み込み変数（NODE_ENVとPUBLIC_URL）を除いて、変数名はREACT_APP_で始める必要があります。
環境変数はビルド時に挿入されます。実行時に挿入する必要がある場合は、この方法に従ってください。

シェルでの一時的な環境変数の追加

環境変数の定義はOSによって異なります。また、この方法はシェルセッションの有効期間中は一時的なものであることも重要です。

Windows (cmd.exe)

set "REACT_APP_NOT_SECRET_CODE=abcdef" && npm start

(注記: 末尾の空白を避けるために、変数割り当てを引用符で囲む必要があります。)

Windows (Powershell)

($env:REACT_APP_NOT_SECRET_CODE = "abcdef") -and (npm start)

Linux、macOS (Bash)

REACT_APP_NOT_SECRET_CODE=abcdef npm start

`.env`での開発環境変数の追加

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

永続的な環境変数を定義するには、プロジェクトのルートに.envという名前のファイルを作成します。

REACT_APP_NOT_SECRET_CODE=abcdef

注記: カスタム環境変数はREACT_APP_で始める必要があります。NODE_ENV以外の変数は、誤って同じ名前を持つ可能性のあるマシンの秘密鍵を公開してしまうのを避けるため、無視されます。環境変数を変更する場合は、開発サーバーが実行されている場合は再起動する必要があります。

注記: .envファイルを変更した後は、開発サーバーを再起動する必要があります。

.envファイルは、(.env*.localを除いて)ソース管理にコミットする必要があります。

使用できるその他の`.env`ファイル

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

.env: デフォルト。
.env.local: ローカル上書き。このファイルは、テストを除くすべての環境でロードされます。
.env.development、.env.test、.env.production: 環境固有の設定。
.env.development.local、.env.test.local、.env.production.local: 環境固有の設定のローカル上書き。

左側のファイルは、右側のファイルよりも優先順位が高いです。

npm start: .env.development.local、.env.local、.env.development、.env
npm run build: .env.production.local、.env.local、.env.production、.env
npm test: .env.test.local、.env.test、.env（.env.localは除く）

これらの変数は、マシンが明示的に設定していない場合のデフォルトとして機能します。

詳細については、dotenvのドキュメントを参照してください。

注記: 開発用の環境変数を定義する場合は、CIやホスティングプラットフォームでもそれらを定義する必要がある可能性が高くなります。これを行う方法については、それぞれのドキュメントを参照してください。たとえば、Travis CIまたはHerokuのドキュメントを参照してください。

`.env`での環境変数の展開

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

(dotenv-expandを使用して).envファイルで使用するために、マシン上に既に存在する変数を展開します。

たとえば、環境変数npm_package_versionを取得するには

REACT_APP_VERSION=$npm_package_version
# also works:
# REACT_APP_VERSION=${npm_package_version}

または、現在の.envファイルのローカル変数を展開します

DOMAIN=www.example.com
REACT_APP_FOO=$DOMAIN/foo
REACT_APP_BAR=$DOMAIN/bar

HTMLでの環境変数の参照​

シェルでの一時的な環境変数の追加​

Windows (cmd.exe)​

Windows (Powershell)​

Linux、macOS (Bash)​

.envでの開発環境変数の追加​

使用できるその他の.envファイル​

.envでの環境変数の展開​