環境変数を設定する方法
環境変数をセットすると、プロジェクトの 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>
)
※ なお、環境変数を反映するためには、アプリケーションを再起動する必要があります。