react-scriptsで読み込む環境変数を変える

2021.01.04
react-scriptsで読み込む環境変数を変える

react-scripts startでローカルサーバ、STGサーバそれぞれコマンドによって別のサーバに繋げたい、ということがありました。


ここでは違う .env ファイルを読み込んで接続先を変える方法をご紹介します。



そのために dotenv-cliというライブラリ を使用します。

検証した環境

1 react-scripts 3.4.1
2 dotenv-cli 4.0.0

接続先を変更するコマンドを設定する

dotenv-cliを導入

$ yarn add -D dotenv-cli

それぞれの接続先用のenvファイルを用意

ローカル環境とSTG環境用のenvファイルを用意します。

.env
REACT_APP_API_URL=http://localhost:4000
.env.stg
REACT_APP_API_URL=https://stg.hogehoge.com

npm-scriptsコマンドを追加

package.jsonにコマンドを追加します。


基本は.envを使用してくれるので、STGに繋げたい場合のみdotenv-cliを使った記述をします

package.json
{
  "name": "sample-name",
  ・・・
  "scripts": {
    "start": "react-scripts start",
    "start:stg": "dotenv -e .env.stg react-scripts start",
    "build": "react-scripts build",
    "build:stg": "dotenv -e .env.stg react-scripts build",
    ・・・
  },
}

これでnpm-scriptsを使い分ける事で、APIの向き先を変える事が出来ます。

# ローカル環境に向けて開発する場合
$ yarn run start

# STG環境に向けて開発する場合
$ yarn run start:stg



私はchromeのエクステンション開発として今回用いたため、buildbuild:stg がありますが、
お好みで変更して下さい。

コードでの使い方

コード上で実際に使う際は以下のようになります。

const baseUrl = process.env.REACT_APP_API_URL
const url = `${baseUrl}/users/1`

// yarn run start の場合
// => http://localhost:4000/users/1

// yarn run start:stg の場合
// => https://stg.hogehoge.com/users/1

おすすめ