結論
- .envまたは.env.***ファイルにREACT_APP_***の名前で定義する
- ソースコード内でprocess.env.REACT_APP***で参照する
そもそも環境変数とは
環境変数（かんきょうへんすう、英語: environment variable）はオペレーティングシステム (OS) が提供するデータ共有機能の一つ。OS上で動作するタスク（プロセス）がデータを共有するための仕組みである。特にタスクに対して外部からデータを与え、タスクの挙動・設定を変更するために用いる。
https://ja.wikipedia.org/wiki/%E7%92%B0%E5%A2%83%E5%A4%89%E6%95%B0
開発環境と本番環境で挙動を変更するために使用します。
例えば、開発環境では本番のお客様のデータにアクセスして変更してはいけませんよね。テストの為のデータを投入してもいけません。そこで、開発環境では開発環境向けのDBやAPIを使用するようにします。
開発環境 → 開発環境API、開発環境DB
本番環境 → 本番環境API、本番環境DB
そこでソースコード上に環境別の処理を書いてみます。
実行環境別に処理を分けることができました。（Reactの場合のコード）
でも、こんなの毎回書いていられませんよね？
こうしましょう。
process.env.REACT_APP_APIというのが環境変数を取得する処理です。
これで、ソースコードを変更せずに環境変数を変更するだけで環境別の処理を実現できました。
Reactで独自の環境変数を定義する
Reactではnodeを使用してソースコードをビルドします。ビルド時にnodeが読みだした値が環境変数となっています。
独自に定義したい環境変数は.evnファイルへ記載することで追加できます。
変数名のプレフィックスはREACT_APP_にしましょう。
※プレフィックスがない場合はprocess.envでは取得できません。
デフォルトの環境変数
何も指定しない場合、以下のような内容が環境変数として取得できます。
独自環境変数を追加
REACT_APP_APIが取得できています。
.env.development / .env.production でもっと便利に環境変数を使う
上記の方法で環境変数を定義してもビルド時に毎回.envファイルを書き換える手間があります。
そこで、.env.***というファイルを使用するとビルド時に自動的に読み込む環境変数を切り替えることができます。
| 環境 | 実行コマンド | 読み込まれるファイル |
|---|---|---|
| 開発環境 | yarn start など | .env .env.development |
| 本番環境 | yarn build など | .env .env.production |
用例
例えば、開発環境と本番環境を実行環境によって切り替えるのであれば、以下のようにファイルを作成するとAPIの向き先が自動的に変更されます。
なるべく環境依存の処理はソースコードから排除しメンテナンス性を上げていきましょう。
