Azure Pipeline更新.env文件后静态Web应用未生效问题

React应用的环境变量是在构建阶段嵌入到静态文件中的，并非运行时读取.env文件。你遇到的问题大概率是更新.env的时机或方式不对，以下是具体排查方向：

1. 更新.env的时机错误 #

如果你的流水线是先执行npm run build构建应用，再修改.env文件，那这个修改完全不会生效——因为构建过程已经把旧的环境变量打包进了静态资源里。

解决方法：调整流水线步骤顺序，确保更新.env的脚本在构建之前执行：

1. 拉取代码仓库
2. 运行脚本修改项目根目录下的.env文件
3. 执行npm install安装依赖
4. 执行npm run build构建应用
5. 部署构建后的build文件夹到Azure静态Web应用

2. 脚本未修改正确的.env文件 #

检查你的修改脚本是否指向了项目根目录的.env文件，比如脚本里的路径是否正确（比如是不是写成了其他目录的.env）。可以在修改脚本后加一行命令确认：

cat .env

确保输出的内容确实是更新后的REACT_APP_DEV_API_KEY=Test。

3. 构建时使用了错误的环境配置文件 #

如果你的项目里存在.env.development、.env.production等多环境配置文件，要注意：

• npm run build默认会加载.env.production的配置，而非根目录的.env
• 如果你的开发环境构建需要使用特定的.env文件，要明确指定构建模式：

npm run build -- --mode development

或者直接修改对应环境的配置文件（比如.env.development）。

4. 缓存导致旧资源未更新 #

Azure静态Web应用或浏览器可能缓存了旧的构建产物：

• 检查Azure静态Web应用的部署记录，确认最新的构建产物已经上传
• 强制刷新浏览器（Ctrl+Shift+R），跳过本地缓存加载新资源
• 确保Create React App的构建输出自动添加了资源哈希（默认会加，比如main.abc123.js），这样新部署的资源会有不同的文件名，避免CDN缓存

5. 环境变量命名或拼写错误 #

虽然你用了REACT_APP_前缀，但还是要确认变量名拼写完全一致，比如大小写、下划线是否正确——React会忽略不符合REACT_APP_前缀的变量，拼写错误也会导致读取不到新值。

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