单构建多发布的Azure Web App中React应用无法获取REACT_APP_ENV变量

核心原因 #

React的REACT_APP_*系列环境变量是构建阶段注入的，一旦执行完react-scripts build，这些变量就会被固化到打包后的静态代码中。你当前的单构建多发布模式下，构建时没有注入对应环境的REACT_APP_ENV，后续发布阶段的Azure应用设置或流水线变量无法修改已打包的前端代码，所以打印结果始终是undefined。而NODE_ENV是react-scripts build默认强制设置为production，和具体部署环境无关。

解决方案（适配单构建多发布） #

方法1：构建时保留占位符，发布时替换配置 #

这是最适配单构建多发布的方案，步骤如下：

1. 在React项目根目录的public文件夹下创建配置文件env-config.js，内容为：

window.appEnv = {
  REACT_APP_ENV: "{{REACT_APP_ENV_PLACEHOLDER}}"
};

2. 执行常规构建（不注入任何环境变量）：

npm run build

3. 在Azure发布流水线的每个环境（DEV/TEST/PROD）阶段，添加文件替换任务：
   • 目标文件选择build/env-config.js（构建后的对应文件路径）
   • 将占位符{{REACT_APP_ENV_PLACEHOLDER}}替换为当前发布环境的流水线变量值（比如DEV填dev，TEST填test）
4. 在React代码中，读取这个全局变量替代process.env.REACT_APP_ENV：

console.log(window.appEnv.REACT_APP_ENV);

方法2：通过Azure Web App后端注入变量（需Node.js托管） #

如果你的Web App是用Node.js托管（而非纯静态部署），可以通过后端将Azure应用设置的变量注入到HTML中：

1. 修改public/index.html，添加一段脚本占位符：

<script>
  window.appEnv = {
    REACT_APP_ENV: '<%= process.env.REACT_APP_ENV %>'
  };
</script>

2. 在Azure门户的每个环境Web App的「配置-应用设置」中添加REACT_APP_ENV，设置对应环境的值（dev/test/prod）
3. 确保Web App的启动脚本会渲染index.html（比如用Express托管静态文件时，添加对应的路由处理）
4. 同样在React代码中读取window.appEnv.REACT_APP_ENV

为什么之前的尝试无效 #

• Azure门户的应用设置是服务器端的运行时变量，前端静态代码运行在浏览器中，无法直接访问这些变量
• 发布流水线中的变量如果没有在构建阶段传递给react-scripts build，构建后的代码中不会包含该变量的任何引用，自然打印为undefined

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