create-react-app で .env.staging に記述した環境変数を使うようにビルドする方法

まず env-cmd をインストール。

yarn add env-cmd

ステージング環境用の環境変数を記述した .env.staging ファイルを用意。

REACT_APP_BASE_PATH="https://testapi-staging.example.com"

React アプリ内では process.env を使って環境変数を参照しておく。

const basePath = process.env.REACT_APP_BASE_PATH;

package.json の scripts に、ステージング環境用のビルドを行うスクリプトを追加。

{
  "scripts": {
    "build": "react-scripts build",
    "build:staging": "env-cmd .env.staging npm run build"
  }
}

あとは

yarn build:staging

でビルドすれば、.env.staging に記述した環境変数が埋め込まれた JavaScript ファイルが出力される。