[解決済み] create-react-appビルドスクリプトを実行する際に、ビルド.env変数を設定するには？

質問

create-react-appで以下の環境変数を使用しています。

console.log(process.env.REACT_APP_API_URL) // http://localhost:5555

を実行すると動作します。 npm start を読み取ることで .env ファイルを作成します。

REACT_APP_API_URL=http://localhost:5555

のように別の値を設定するにはどうすればよいのでしょうか？ http://localhost:1234 を実行する際に npm run build ?

これは私の package.json ファイルを作成します。

{
  "name": "webapp",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "react-scripts": "0.9.0"
  },
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

解決方法は？

を使用することができます。 process.env.NODE_ENV というように

const apiUrl = process.env.NODE_ENV === 'production' ? process.env.REACT_APP_PROD_API_URL : process.env.REACT_APP_DEV_API_URL;

が必要でしょう。 REACT_APP_PROD_API_URL と REACT_APP_DEV_API_URL を設定します。

あるいは、制作URLが常に同じであれば、それを簡略化することもできます。

const apiUrl = process.env.NODE_ENV === 'production' ? 'https://example.com' : process.env.REACT_APP_DEV_API_URL;

Create React Appは NODE_ENV をビルド時に 'production' に設定してくれるので、いつ production に設定するのかを気にする必要はありません。

注意 を実行する場合は、サーバーを再起動する必要があります。 npm start 環境変数の変更を検出するために、再度)