React应用部署Azure静态Web应用后环境变量失效问题

核心原因排查 #

React的REACT_APP_前缀环境变量仅在构建阶段会被注入，如果是直接上传本地已构建好的产物到Azure，Azure配置的环境变量不会生效——因为构建过程已完成，变量没有被替换的机会。

分步解决方案 #

• 触发云端构建流程：在Azure静态Web应用的部署设置中，直接关联你的代码仓库（GitHub/GitLab等），而非上传本地build后的dist文件夹。这样Azure会在云端执行npm run build，此时配置的环境变量会被注入到构建产物中。若必须上传本地构建产物，需在本地构建前将REACT_APP_API_URL设置到本地环境变量，再执行build命令。
• 验证变量配置准确性：确认变量名严格匹配REACT_APP_API_URL，大小写敏感，无空格或拼写错误；变量值需为完整的API根路径（如https://yourapi.azurewebsites.net），避免以斜杠结尾，防止拼接路径时出现重复斜杠。
• 代码层面添加防御逻辑：使用变量前做兜底判断，避免undefined导致错误请求：

  const apiUrl = process.env.REACT_APP_API_URL || 'https://default-api-url.com';
  // 请求前检查
  if (!apiUrl) {
    console.error('API URL未配置，请检查环境变量');
    return;
  }
  const fullUrl = `${apiUrl}/api/my-api-endpoint`;
  

• 强制重新部署：环境变量修改后，Azure不会自动触发重构，需手动在Azure门户的静态Web应用页面点击「重新部署」，确保新变量注入构建过程。

额外验证步骤 #

部署完成后，打开浏览器控制台，查看构建后的JS文件（如main.xxx.js），搜索REACT_APP_API_URL，确认它已被替换为配置的实际值，而非保留变量名。

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