create-react-app で作った環境で、production/staging/xxxなどを process.envを使って切り替える

create-react-appした環境では、start/build/test の環境はできて、ビルドするときに
必要な環境変数が process.env.NODE_ENV にセットされますが・・・

production環境のとき、stagingのとき　と切り替えたいときに、
process.env.NODE_ENVではうまく行きません。

create-react-appした環境では、

「REACT_APP_xxxxxxx」 という環境変数を使うことができます！

なので、環境変数に
REACT_APP_CURR_ENV という変数を用意します。

で、環境毎に違う設定などは、ごく僅かだと思うので、私の場合こんなjavascriptを作って対応してます。

[bash]
let const_HOST_ADDR;
let const_WS_HOST_ADDR;

if (process.env.REACT_APP_CURR_ENV === “production” ){
const_HOST_ADDR = “https://myapp.jp”;
const_WS_HOST_ADDR = “ws://myapp.jp”;
}
else if (process.env.REACT_APP_CURR_ENV === “staging” ){
const_HOST_ADDR = “https://stg.myapp.jp”;
const_WS_HOST_ADDR = “ws://stg.myapp.jp”;
}
else {
const_HOST_ADDR = “http://localhost:4000”;
const_WS_HOST_ADDR = “ws://localhost:4000”;
}

export const HOST_ADDR = const_HOST_ADDR;
export const WS_HOST_ADDR = const_WS_HOST_ADDR;

[/bash]

package.jsonを以下のように編集します。

[bash]

{
“name”: “front”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“scripts”: {
“start”: “react-scripts start”,
“build”: “REACT_APP_CURR_ENV=production react-scripts build”,
“staging”: “REACT_APP_CURR_ENV=staging react-scripts build”,
“test”: “react-scripts test”,
“eject”: “react-scripts eject”
},
　　　・
　　　・
　　　以下略
　　　・
　　　・

[/bash]

production環境のビルドを行いたいときは

[bash]
$ npm run build
[/bash]

staging環境のビルドを行いたいときは

[bash]
$ npm run staging
[/bash]

これで、めでたし、めでたし。