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
一個で大丈夫そう。
[参考]
エンブん早わかり…