かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

React create-react-app したアプリで 開発時 (development) と build する時 (production) とで env を切り替えたい

create-react-app で作った React アプリで yarn start での開発時と yarn build でビルドした時に使う環境変数を切り替えたい。

.env のファイル名で自動的に切り替わる

create-react-app で作られたファイルにある .gitignore を見ると次のように設定されていました。

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

どうやら次のように読み込まれる設定になっており、より細かい指定のファイルが有ればそちらが優先されるようになっているようです。

  • .env … 開発時 / ビルド時両方で使用される (デフォルト)
  • .env.local … local 環境で使用される (どの環境でも読み込まれるっぽい)
  • .env.development, .env.production, .env.test … Environment モードに合わせて使用される
  • .env.development.local, .env.production.local, .env.test.local … local 環境での実行時のEnvironment モードに合わせて使用される

開発用は .env.development.local, ビルド用は .env.production.local の設定ファイルを作成しておけばOK

yarn start 時には .env.development.local が読み込まれる。
ローカル環境で yarn build してしまう場合はビルド用の設定は .env.production.local を作成しておけばOK。

CI などでビルドする場合は、ビルドが実行される環境に .env.env.production を作成しておけば良さそう。
場合分けが少ないなら .env.loacl 一個で大丈夫そう。


[参考]

エンブん早わかり…