create-react-app:多环境变量

Posted 2023-04-12

参考技术A

1.使用cross-env配置多环境变量

2.在项目根目录下创建多环境文件：.env.development ，.env.production ，.env.uat...
环境变量文件中的变量必须以： REACT_APP_ 开头

4.在项目中使用：

运行 create-react-app 构建脚本时如何设置构建 .env 变量？

【中文标题】运行 create-react-app 构建脚本时如何设置构建 .env 变量？

【英文标题】：How to set build .env variables when running create-react-app build script?

【发布时间】：2017-07-16 10:53:41

【问题描述】：

我在我的 create-react-app 中使用以下环境变量：

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

当我通过读取.env 文件运行npm start 时，它可以工作：

REACT_APP_API_URL=http://localhost:5555

在执行npm run build 时如何设置不同的值，例如http://localhost:1234？

这是我的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"
  

【参考方案1】：

我想你现在已经完成了这个工作，但是对于发现这个的任何其他人，你在“create-react-app”项目的根目录下的 .env 文件中设置默认环境变量。

要分离使用 npm start 和 npm run build 时使用的变量，您可以再创建两个 env 文件 - .env.development 和 .env.production。

npm start 会将REACT_APP_NODE_ENV 设置为development，因此它会自动使用.env.development 文件，而npm run build 会将REACT_APP_NODE_ENV 设置为production，因此它将自动使用.env.production .这些中设置的值将覆盖您的 .env 中的值。

如果您正在与其他人一起工作，并且只有特定于您的机器的值，您可以通过将这些值添加到新文件（分别为 .env.development.local 和 .env.production.local）来覆盖 .env.development 和 .env.production 中的值.

编辑：我应该指出您设置的环境变量必须以“REACT_APP_”开头，例如。 “REACT_APP_MY_ENV_VALUE”。

编辑 2：如果您需要的不仅仅是开发和生产，请使用 env-cmd，由 this comment 指定。

【讨论】：

@SebastianBean 它使用来自节点的 process.env：process.env.REACT_APP_API_URI。见CRA documentation

@caffeinescript 目前除了“开发”和“生产”之外没有其他环境。我有一个真正迂回的解决方法是在 package.json 中添加一个脚本，它设置一个表示它的测试模式的环境变量，即build_testing": "set REACT_APP_ENV=test & react-scripts build，然后有一个 settings.js 文件，其中每个环境变量都有它自己的函数，带有一个 if检查process.env.REACT_APP_ENV 的内容并返回测试环境的硬编码值或真实环境变量的语句。

感谢您提供有关需要从 REACT_APP_ 开始的信息；我遇到了一个问题。

另外，不要忘记从终端重新启动应用程序。

create-react-app.dev/docs/adding-custom-environment-variables/… 该文档还帮助添加了更多详细信息

【参考方案2】：

您可以像这样使用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 设置为“生产”，因此您无需担心何时将其设置为生产。

注意：您必须重新启动服务器（例如再次运行npm start）以检测环境变量更改。

【讨论】：

谢谢。我知道这种方法。您认为这是针对这种情况的规范解决方案吗？

如果你“手动”进行 webpack 配置，会有很多方法可以做到这一点。老实说，我不知道它是否“规范”，但这种方式有效，并且不会从 CRA 弹出，所以我喜欢它。

我们也在考虑在未来增加对特定环境的 .env 文件的支持。

我想我可以解决这个问题，但这里是github.com/facebookincubator/create-react-app/pull/1344

一些我不知道但希望可以帮助其他没有经验的开发人员的傻事，package.json 文件中设置的环境变量需要在react-scripts build 之前定义之前命令以便被检测到，例如REACT_APP_YOUR_VARIABLE=here react-scripts build。

【参考方案3】：

如果您想使用单独的 dotenv 文件来构建和/或部署到单独的环境（stage、prod），那么您可以像这样使用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 ./.stage.env npm run-script build"
  ,

然后构建你只需要运行这个 shell 命令：

npm run build:stage

【讨论】：

这里有一个指向env-cmd 的链接很有帮助，但是 IMO 对不同的部署有不同的构建是很危险的

@helt 你能详细说明一下吗？您担心的风险因素是什么？

好吧，如果我在构建过程中烘焙配置，我必须为每个部署/环境单独构建应用程序。我不能将一个构建移植到另一个环境，当我们不想要它时，这会使事情变得复杂（墨菲定律）。另外，如果 CI 必须多次构建以替换 env var，那么这对 CI 来说是相当大的开销。基本上，我偶然发现了so thread，这大致是我的用例。

这些是值得肯定的权衡。但我不认为它们是每个用例中最重要的因素。对于某些人来说，每次提交都有多个工件可能是可以接受的。而替代解决方案也有其自身的负面影响：额外的基础设施要求（例如 node.js 服务器），或者容器启动时间明显变慢。 IMO，这是一个最适合您的问题。

这是我能看到的唯一可行的解​​决方案。我不明白您如何（使用默认的 create-react-app 环境变量设置）实际创建可以部署到测试或开发的构建文件。 npm run build 为生产创建构建文件，但仅此而已，据我所知（我错过了什么，我一定错过了什么？）

【参考方案4】：

安装“env-cmd”包

"scripts": 
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "deploy": "gh-pages -d build",
    "start:qa": "env-cmd -f .env.qa react-scripts start",
    "build:qa": "env-cmd -f .env.qa react-scripts build"
  ,

如果我们想在本地运行 qa 环境，请使用 npm run start:qa

【讨论】：

dev.to/jam3/managing-env-variables-for-provisional-builds-h37 参考此链接

【参考方案5】：

另外，它可以在没有额外依赖的情况下完成：

"scripts": 
  "build": "sh -ac '. ./.env.$REACT_APP_ENV; react-scripts build'",
  "build:staging": "REACT_APP_ENV=staging npm run build",
  "build:production": "REACT_APP_ENV=production npm run build"
,

并拥有相应的.env.staging、.env.production 文件

【讨论】：

只可惜​​它直接引用了npm。如果我们能够首先捕获调用目标的二进制文件会很好，这样它在通过纱线调用时也能工作，然后调用纱线而不是 npm run。

"build:production": "REACT_APP_ENV=production yarn build" 也可以使用

是的，我知道，这就是我使用的 :-) 但是我的同事必须为 npm 添加一个不同的，因为他想使用 npm。无论如何，小问题可能可以通过 TOOL env 参数解决。不确定。