reactのaxios API接続先をdev/stage/prodの３環境で分けたい

reactのAPI接続先をdev/stage/prodの3環境でｘ分けたい

が、意外とジャストインケースに説明してる記事がなかった。
develop/productionならbuild時に.env.xxxのファイル名を見て勝手に分けてくれるのですが、ステージングがない。

開発環境→localhost:3000がAPIサーバー
ステージング→stage.xxxx.xxxx:8000がAPIサーバー
本番環境→ xxx.xxxがAPIサーバー

という風にdev/prod以外の環境を追加するには工夫が必要でした。

それぞれ環境の.envファイルを用意します

.env
.env.stage
.env.prod

envファイルに接続先の設定を書きます

REACT_APP_NODE_ENV='production'
REACT_APP_API_BASE_URL="https://xxxxxx.xxxxxx:8000"

axiosのconfigファイルを作ります

適当にbaseURLを環境変数から取得して設定します。
baseURLをnullにするとhostが0.0.0.0にされてしまうのでこういう風に分岐。

configs/axios.js

import axios from "axios";

if (process.env.REACT_APP_NODE_ENV === "production") {
  instance = axios.create({
    baseURL: process.env.REACT_APP_API_BASE_URL,
    // 以下省略
  });
} else {
  instance = axios.create({
    // 以下省略
  });
}

export default instance;

もちろん、axiosを使うときは、上記のファイルを読み込むように。

import axios from "configs/axios";

するんやで。

最後に、dotenvで環境変数を分ける

dotenv-cliをインストールしてね。

yarn add -D dotenv-cli

package.jsonを変更

package.json

  "scripts": {
    "start": "react-scripts start",
    "build:stg": "dotenv -e .env.stg react-scripts build",
    "build:prod": "dotenv -e .env.prod react-scripts build",
  }

これで、それぞれ指定した環境のenvファイルを読み込んでくれます。

参考

https://dev.classmethod.jp/articles/react-dotenv-cli/
https://teratail.com/questions/202331
https://qiita.com/T_unity/items/2dfe1d7326f18b020b6d