モチベーション
Reactでは.envに変数を記載して、jsファイルから読み込めます。
しかし、読み込みがうまくいかず少しハマったので、その際の確認観点を記載します。
まとめ
- .envファイルはプロジェクトルートに配置されているか
- 変数はREACT_APP_から始まっているか(例: REACT_APP_XX)
- サーバーを再起動したか
自分はサーバの再起動ができていなかったために読み込めていませんでした。
詳細
それぞれ解説します。
.envファイルはプロジェクトルートに配置されているか
.envはプロジェクトルートに配置しましょう。
変数はREACT_APP_から始まっているか(例: REACT_APP_XX)
Reactの場合はREACT_APP_XXというように、変数名にREACT_APPをつけましょう。
サーバーを再起動したか
.envに変数を設定後はサーバを再起動しましょう。
他ファイルは再起動しなくても反映されますが、.envは反映されないです。
参考