[メモ] react-scriptsで環境毎にビルドできる様にする

概要

Create React Appで書いたフロントエンドのソースを環境毎に値を変更してビルドしたかったので対応しました。

やり方

環境変数を使います。
詳しくはこちらを参照してください。
Adding Custom Environment Variables

簡単に要点をまとめると

• .envファイル内に環境変数を定義しておけばJavaScript内でprocess.env.XXXXXで取得可能
  • REACT_APP_ というプリフィックスにしておけば public/index.html 内でも使用可能
• yarn start 時には .env.development 系、 yarn build 時には .env.production 系の環境変数が使用される
  • この辺りのルールは上記のページを参照する

複数の環境変数を切り替えられないか調べましたが特に情報が見つかりませんでした。
npmに何かありそうな気配でしたが、あまり依存するのもどうかと思ったので簡単な仕組みで実現することにしました。
ビルド時は .env.production.local に書かれている環境変数が最も優先されて使用されるため、このファイルをビルド時に入れ替えれば要件は満たせます。
簡易なshellスクリプトを作成しました。

set-env-file-for-react-script.sh

単に .env.production.xxxx という環境毎の.envファイルを作成しておくと、それをコピーするだけのshellです。
このファイルと package.json のスクリプトを組み合わせて以下の様なコマンドを用意しました。

"build:develop": "./set-env-file-for-react-script.sh develop && yarn build && rm ./.env.production.local"

これで build:develop を実行すると .env.production.develop を .env.production.local に入れ替えてビルドするという事が実現できます。
最低限ですがこれでやりたい事は一旦実現できました。

よりよいやり方や標準的な手法があれば教えて下さい。