如何使用 React 构建 UAT 环境？

Question

根据React 文档，您可以拥有development 、 test和production环境。

NODE_ENV的值自动设置为开发（使用npm start ）、测试（使用npm test时）或生产（使用npm build时）。 因此，从 create-react-app 的角度来看，只有三个环境。

我需要根据我的部署方式更改 root rest api url。 例如

• 开发： baseURL = 'http://localhost:3004';
• 测试： baseURL = 'http://localhost:8080';
• uat: baseURL = 'http://uat.api.azure.com:8080';
• 生产： baseURL = 'http://my.cool.api.com';

如果 UAT 环境仅适用于开发、测试和生产，我该如何配置它？

我的 javascript、package.json 和 build 命令会如何自动切换这些值？

Answer 1

就像John Ruddell 在评论中所写的那样，我们仍然应该在暂存环境中使用NODE_ENV=production以使其尽可能接近 prod。 但这对我们这里的问题没有帮助。

NODE_ENV不能可靠使用的原因是大多数 Node 模块使用NODE_ENV来调整和优化正常的默认值，如 Express、React、Next 等。 Next 甚至根据常用值development 、 test和production 。

所以解决方案是创建我们自己的变量，如何做到这一点取决于我们正在处理的项目。

使用 Create React App (CRA) 的其他环境

文档说：

注意：您必须创建以REACT_APP_开头的自定义环境变量。 除了NODE_ENV之外的任何其他变量都将被忽略，以避免在机器上意外暴露可能具有相同名称的私钥。

在Ian Schmitz说的一个问题中对此进行了讨论：

相反，您可以创建自己的变量，例如REACT_APP_SERVER_URL ，如果您愿意，可以通过.env文件在 dev 和 prod 中具有默认值，然后在构建应用程序时简单地设置该环境变量，例如REACT_APP_SERVER_URL=... npm run build .

我使用的一个常用包是cross-env ，这样任何人都可以在任何平台上运行我们的 npm 脚本。

"scripts": {
  "build:uat": "cross-env REACT_APP_SERVER_URL='http://uat.api.azure.com:8080' npm run build"

任何其他 JS 项目

如果我们没有绑定到 CRA，或者已经弹出，我们可以以类似的方式轻松配置我们想要的任意数量的环境配置。

就个人而言，我喜欢dotenv-extended ，它提供对所需变量和默认值的验证。

同样，在package.json文件中：

"scripts": {
  "build:uat": "cross-env APP_ENV=UAT npm run build"

然后，在入口点节点脚本（加载的第一个脚本之一，例如在 babel 配置中需要）：

const dotEnv = require('dotenv-extended');

// Import environment values from a .env.* file
const envFile = dotEnv.load({
  path: `.env.${process.env.APP_ENV || 'local'}`,
  defaults: 'build/env/.env.defaults',
  schema: 'build/env/.env.schema',
  errorOnMissing: true,
  silent: false,
});

然后，作为一个例子，一个 babel 配置文件可以像这样使用这些：

const env = require('./build/env');

module.exports = {
  plugins: [
    ['transform-define', env],
  ],
};

运行时配置

John Ruddell 还提到，可以在运行时检测应用程序正在运行的域。

function getApiUrl() {
  const { href } = window.location;

  // UAT
  if (href.indexOf('https://my-uat-env.example.com') !== -1) {
    return 'http://uat.api.azure.com:8080';
  }

  // PROD
  if (href.indexOf('https://example.com') !== -1) {
    return 'http://my.cool.api.com';
  }

  // Defaults to local
  return 'http://localhost:3004';
}

这既快速又简单，完全无需更改构建/CI/CD 管道即可工作。 虽然它有一些缺点：

• 所有配置都在最终构建中“泄露”，
• 当使用诸如babel-plugin-transform-define或Webpack 的DefinePlugin之类的东西时，它不会从死代码删除中受益，从而导致文件大小稍大。
• 在编译时将不可用。
• 如果使用服务器端渲染会更棘手（尽管并非不可能）

Answer 2

要在 React.js 应用程序中拥有多个环境，您可以使用 NPM 中的这个插件env-cmd

然后根据您的需要创建三个文件。 例如，如果您想设置 dev、stag 和 prod 环境，您可以像这样编写命令。

"start:dev": "env-cmd -f dev.env npm start", // dev env
"build:beta": "env-cmd -f stag.env npm run build", // beta env
"build": "react-scripts build", // prod env using .env file