dotenv-cliを使ってReactの環境変数を切り替える

はじめに

reactで環境変数を切り替える方法を毎回忘れるのでメモりました。ここではdotenvのサンプルコードを動かして検証していきます。

参考サイト

https://www.npmjs.com/package/dotenv
- サンプルコードはここから取ってきました。
https://www.npmjs.com/package/dotenv-cli
- react-scripts buildコマンドで読み込む.envファイルの切り替えができないのでdotenv-cliというツールを使いました。
https://create-react-app.dev/docs/adding-custom-environment-variables/#what-other-env-files-can-be-used
- Reactにはデフォルトでdotenvが含まれていて、何もしなくても.envファイルの読み込み先が切り替わります。ただ、dotenv-cliがないと細かい指定はできないみたいです。
  ex) Staging用の環境変数を用意したい場合はdotenv-cliの導入が必要など。
https://stackoverflow.com/questions/42182577/is-it-possible-to-use-dotenv-in-a-react-project

サンプルアプリの起動

Git
node.js

git clone https://github.com/dotenv-org/examples.git
cd examploe/dotenv-react
npm i
npm run start

上手く起動ができました！ .envに書かれている”CHANGE_ME”が表示されてることが確認できます！

スクリーンショット 2022-10-14 23.10.53.png

環境ごとに切り替える

ここで他の環境変数へ切り替えたいので、開発用、ステージング用、本番用のenvファイルを作成します。

スクリーンショット 2022-10-14 23.58.47.png

ただReact公式ドキュメントを見ると、.env.development（開発環境）と.env.production（本番環境）はnpm run start, npm run buildで切り分けられていると書かれていて、これだと開発環境をデプロイしたり、ステージング環境を追加したりといったことができません。

Files on the left have more priority than files on the right: npm start: .env.development.local, .env.local, .env.development, .env npm run build: .env.production.local, .env.local, .env.production, .env npm test: .env.test.local, .env.test, .env (note .env.local is missing) What other .env files can be used?

dotenv-cliを入れて、コマンドで読み込む.envファイルの読み込みを切り替えられるようにしましょう。

npm install --save-dev dotenv-cli

スクリプトの実装

package.jsonを以下のように書き換えると、npm run build-developmentで.env.developmentを、npm run build-productionで.env.productionを参照するようになります。

  "scripts": {
    "start": "react-scripts start",
    "build-development": "dotenv -e .env.development react-scripts build",
    "build-production": "dotenv -e .env.production react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },