使用ADO Pipeline YAML部署React项目时ENV文件加载异常排查

核心原因：CRA环境变量是构建阶段注入，而非运行时读取 #

Create React App（CRA）的环境变量机制是在npm run build构建过程中，将.env文件里的变量直接注入到打包后的静态JS文件中，网站运行时是静态资源，不会去读取服务器上的.env文件。你部署后把.env.development放到服务器上完全无效，因为时机已经晚了。另外，额外安装dotenv也是多余的——CRA本身已经内置了dotenv的处理逻辑，仅在构建阶段生效。

具体问题排查点 #

• 环境文件命名不匹配CRA规则：CRA只识别特定命名的.env文件：
  • .env：所有环境通用
  • .env.development：对应npm start开发环境
  • .env.production：对应npm run build生产环境
    如果你在ADO中用生产环境构建命令，但只放置了.env.development，CRA会直接忽略它。
• ADO构建前未加载.env文件：必须在执行npm run build之前，就把.env文件放到项目根目录。构建才是变量注入的关键时机，部署后再复制文件毫无意义。
• 变量未加REACT_APP_前缀：CRA会过滤所有不以REACT_APP_开头的变量，比如variablename必须改成REACT_APP_VARIABLENAME，否则构建时不会被注入。

正确的ADO Pipeline配置步骤 #

1. 在ADO安全文件中上传对应环境的.env文件（比如生产环境用.env.production）
2. 在Pipeline的构建阶段，先将该安全文件下载到项目根目录
3. 执行npm run build，此时CRA会自动读取根目录的.env文件，把变量注入到打包产物中
4. 最后将构建好的build文件夹部署到服务器

额外注意事项 #

• 无需在部署阶段复制.env文件到服务器，完全没必要
• 不需要额外安装dotenv包，CRA已内置相关处理逻辑
• 所有需要注入的变量必须带有REACT_APP_前缀

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