Azure DevOps中React应用在发布管道设置环境变量

你的方案不可行，原因在于React（尤其是基于Create React App的项目）的process.env.REACT_APP_*变量是在构建阶段静态注入到代码中的——执行npm run build时，Webpack会把所有process.env.REACT_APP_XXX替换为具体的字符串值，打包进最终的JS bundle里。构建完成后，这些值就已经硬编码在产物中，发布阶段再修改Azure DevOps管道变量根本无法改变已打包的代码内容。

要满足SOX合规的「单一构建/工件」要求，同时实现发布阶段的环境差异化配置，推荐以下两种方案：

方案一：使用静态JSON配置文件 #

1. 在项目根目录创建一个配置模板文件，比如config.template.json：

{
  "configValue": "{{REACT_APP_CONFIG_VALUE}}"
}

2. 修改package.json的build脚本，确保构建后将模板文件复制到dist目录（如果用Create React App，直接把模板放在public目录会自动同步到dist）：

"scripts": {
  "build": "react-scripts build && cp config.template.json build/config.json"
}

3. 在Azure DevOps发布管道中添加「Replace Tokens」任务，将dist/config.json中的{{REACT_APP_CONFIG_VALUE}}占位符替换为对应环境的管道变量值。
4. 前端代码中通过异步加载配置文件获取值：

// 示例：在App.js中加载配置
fetch('/config.json')
  .then(res => res.json())
  .then(config => {
    console.log(config.configValue); // 使用环境特定配置值
  });

方案二：在index.html中注入全局环境变量 #

1. 构建时在public/index.html中保留占位符：

<head>
  <!-- 其他页面内容 -->
  <script>
    window.appConfig = {
      configValue: '{{REACT_APP_CONFIG_VALUE}}'
    };
  </script>
</head>

2. 发布阶段用「Replace Tokens」任务替换dist/index.html中的占位符为对应环境的变量值。
3. 前端代码直接访问全局变量：

console.log(window.appConfig.configValue);

这两种方案都不需要重新构建，仅在发布阶段修改构建产物中的配置内容，完全符合「单一构建工件」的合规要求。

内容的提问来源于stack exchange，提问作者mint