IIS托管React应用中REACT_APP_SERVER_URL环境变量未定义问题排查

React是前端单页应用，最终构建后是静态HTML/CSS/JS文件，运行在用户的浏览器环境中——而process.env是Node.js运行时的专属对象，浏览器环境根本不存在这个对象，所以直接读取process.env.REACT_APP_SERVER_URL必然返回undefined。

同一IIS实例上的Express服务器能正常读取，是因为Express是Node.js后端服务，运行在服务器端，能直接访问IIS的web.config配置。

根据你的需求场景，选择对应的方案：

1. 构建时注入环境变量（适合不需要动态修改配置的场景） #

React在构建阶段（npm run build）会自动读取项目根目录下的.env文件，注入符合规则的环境变量：

• 在React项目根目录创建.env文件，写入：

  REACT_APP_SERVER_URL=http://hostname.api
  

  注意：变量名必须以REACT_APP_开头，React才会识别并注入到构建后的代码中。
• 执行npm run build，将生成的build目录部署到IIS。
• 此时React代码中console.log(process.env.REACT_APP_SERVER_URL)就能正确输出配置值（构建时已被替换为实际字符串）。

2. 运行时动态获取配置（适合部署后需修改配置的场景） #

如果需要在IIS部署后不用重新构建就能修改服务器地址，可采用以下方法：

方法A：通过静态JSON文件读取 #

• 在React项目的public目录下创建config.json文件，内容：

  {
    "serverUrl": "http://hostname.api"
  }
  

• 在React代码中通过请求该文件获取配置：

  // 组件中使用示例
  useEffect(() => {
    fetch('/config.json')
      .then(res => res.json())
      .then(config => {
        console.log(config.serverUrl);
        // 后续业务逻辑使用该配置
      })
      .catch(err => console.error('读取配置失败:', err));
  }, []);
  

• 部署到IIS后，直接修改config.json的内容即可更新服务器地址，无需重新构建React应用。

方法B：通过IIS注入全局变量 #

如果必须从web.config读取配置，可借助IIS的服务器端解析能力，将配置注入到HTML页面的全局变量中：

• 在React项目的public/index.html中添加一个脚本标签：

  <script>
    window.REACT_APP_SERVER_URL = '<%= ConfigurationManager.AppSettings["REACT_APP_SERVER_URL"] %>';
  </script>
  

• 确保IIS站点启用了ASP.NET解析（或使用对应模块支持服务器端变量替换），这样IIS会在返回HTML页面时，将web.config中的值填充到全局变量中。
• React代码中直接读取window.REACT_APP_SERVER_URL即可获取配置。

1. 确认React应用部署的是静态构建产物：检查IIS站点的物理路径是否指向React的build目录，目录下是否只有静态文件（无Node.js相关依赖或启动脚本）。
2. 检查构建后的代码：打开build目录下的主JS文件，搜索REACT_APP_SERVER_URL，若能找到对应的值，说明构建注入成功；若找不到，检查.env文件是否正确、变量名是否符合REACT_APP_前缀规则。

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