React App で環境変数を追加する方法

環境変数を設定する方法

環境変数をセットすると、プロジェクトの JSファイル内でローカル宣言されている変数のように扱うことができます。React App では、デフォルトで NODE_ENV と REACT_APP_ で始めるその他の環境変数が定義されています。

環境変数を使用する目的としては、アプリのソースコードにシークレット ( API キーや接続文字列等 ) を保存しないようにするためです。

開発用の環境変数を追加するためには、プロジェクトルートに .env ファイルを作成します。
環境変数を新規追加する場合は、REACT_APP_ から始まる変数名にする必要があります。

.env

REACT_APP_NOT_SECRET_CODE=abcdef

※ .env ファイルを追加時に、.gitignore で .env ファイルを除外する必要があります。

ソースコードから環境変数を利用するためには、以下のように記述します。

sample.tsx

return (
  <form>
    <input type="hidden" defaultValue={process.env.REACT_APP_NOT_SECRET_CODE} />
  </form>
)

※ なお、環境変数を反映するためには、アプリケーションを再起動する必要があります。

参考サイト

• Adding Custom Environment Variables