Azure App Service部署的React应用读取应用设置异常求助

架构老林

2026-5-29

解决React部署在Azure App Service后无法读取应用设置的问题

这个问题的核心在于前端React代码的运行环境和Kudu执行命令的环境完全不同，我来帮你拆解清楚：

为什么会出现差异？

你在Kudu里执行node --print 'process.env'时，是在Azure App Service的服务器端Node.js环境中运行，这里确实能直接读取到Azure配置的应用设置（因为Azure会自动把应用设置注入到服务器的环境变量里）。
但React是前端代码，最终会被编译成静态HTML/CSS/JS文件，在用户的浏览器环境中运行——浏览器里根本不存在process.env这个Node.js专属的对象！你代码里写的process.env，其实是在构建阶段由你的构建工具（比如Create React App）注入的静态值，和运行时的Azure环境变量没有直接关联。

针对性解决方案

方案1：如果你用的是Create React App（CRA）

CRA对环境变量有明确的规则：只有以REACT_APP_开头的变量才会被注入到前端代码中。

第一步：在Azure App Service的「应用设置」里，把你的目标变量名改成REACT_APP_前缀的格式，比如原来的MY_API_URL改成REACT_APP_MY_API_URL。
第二步：确保你的部署流程是让Azure在服务器端构建应用（比如部署源代码，而不是本地构建好的静态文件），这样Azure会把应用设置作为环境变量注入到构建环境中，CRA会自动读取这些REACT_APP_开头的变量，编译到最终的前端代码里。
第三步：在React代码里直接通过process.env.REACT_APP_MY_API_URL访问即可，构建后这个值会被替换成Azure配置的实际内容。

方案2：自定义构建流程（非CRA项目）

如果是自己配置webpack或其他构建工具，可以用DefinePlugin来手动注入环境变量：

在webpack配置文件中添加插件配置：

const webpack = require('webpack');

module.exports = {
  // ...其他webpack配置
  plugins: [
    new webpack.DefinePlugin({
      // 把服务器环境中的变量注入到前端代码
      'process.env.MY_SETTING': JSON.stringify(process.env.MY_SETTING),
    }),
  ],
};

同样要确保Azure的应用设置会被注入到构建环境中，这样webpack构建时就能读取到对应的值并替换到代码里。

方案3：通过后端接口动态获取（适合运行时需要更新的场景）

如果你的应用有Node.js后端（和React一起部署在App Service），可以让后端读取环境变量，然后提供一个简单的接口返回这些设置，前端通过fetch或axios调用接口获取。这种方式适合需要在运行时动态更新设置，不需要重新构建前端的场景。

验证方法

部署完成后，你可以打开浏览器的开发者工具，查看编译后的JS文件，搜索你的变量名，应该能看到它已经被替换成Azure配置的实际值，而不是process.env.XXX的原始代码。

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