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.comnpm-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のエクステンション開発として今回用いたため、build と build: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
