web-dev-qa-db-ja.com

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"
  }
}
reactjswebpackfrontendcreate-react-appreact-scripts
47
sigmus

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'に設定するため、いつ本番に設定するかを心配する必要はありません。

注：環境変数の変更を検出するには、サーバーを再起動する必要があります（たとえば、npm startを再度実行する）。

38
Andy_D

これで動作するようになったと思いますが、これを見つけた人は誰でも、「create-react-app」プロジェクトのルートにある.envファイルにデフォルトの環境変数を設定します。

npm startとnpm run buildを使用するときに使用される変数を分離するには、.env.developmentと.env.productionの2つのenvファイルを作成します。

npm startはREACT_APP_NODE_ENVをdevelopmentに設定するため、.env.developmentファイルを自動的に使用し、npm run buildはREACT_APP_NODE_ENVをproductionに設定し、自動的に使用します.env.production。これらで設定された値は、.envの値を上書きします。

他の人と一緒に作業していて、マシンのみに固有の値がある場合、.env.developmentおよび.env.productionの値を新しいファイルに追加することで上書きできます-.env.development.localおよび.env.production.localそれぞれ。

EDIT：設定した環境変数は、たとえば「REACT_APP_」で始まる必要があることを指摘する必要があります。 「REACT_APP_MY_ENV_VALUE」。

EDIT 2：開発や生産以上のものが必要な場合は、 env-cmd を使用します。 this comment で指定します。

95
Baldeep

別々の環境（ステージ、prod）を構築および/またはデプロイするために個別のdotenvファイルが必要な場合、 env-cmd を次のように使用できます。

npm install --save-dev env-cmd
./node_modules/.bin/env-cmd -f ./stage.env npm build

次に、それに応じてpackage.jsonを更新します。

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:stage": "env-cmd -f ./.env.stage npm run-script build"
  },

次に、ビルドするには、次のシェルコマンドを実行します。

npm run build:stage
7
chrishiestand