如何将.env文件中的变量导入Azure Pipeline用于React应用构建

架构老林

2026-10-6

React Azure Pipeline环境变量异常修复方案

根因说明

你看到的随机哈希字符串是React构建工具的默认逻辑：所有客户端侧可访问的环境变量必须携带REACT_APP_前缀，不符合命名规则的变量会在构建时被替换为随机占位值，且每次构建值都会变化。本地生效是因为你本地的构建配置可能做了自定义兼容，但流水线的标准构建流程遵循React默认规则。

第一步：统一调整所有环境变量命名
本地.env文件、代码读取逻辑、流水线配置中的变量，全部改为REACT_APP_前缀，例如原HOSTNAME调整为REACT_APP_HOSTNAME：
```
# .env文件示例
REACT_APP_HOSTNAME=google.com
```
代码读取同步修改：
```
// 替换原process.env.HOSTNAME
const host = process.env.REACT_APP_HOSTNAME
```
第二步：调整流水线变量配置
以下两种配置方式二选一即可：
1. 直接在构建任务中绑定env
  确保env字段绑定在执行gulp构建的任务节点上，不要配置在流水线全局，避免作用域不生效：
```
- script: gulp build
  env:
    REACT_APP_HOSTNAME: 'google.com'
  displayName: '执行gulp构建'
```
1. 引用流水线变量/安全文件
  如果用DevOps界面配置的流水线变量，先在界面添加REACT_APP_HOSTNAME变量，再在构建任务中引用：
```
- script: gulp build
  env:
    REACT_APP_HOSTNAME: $(REACT_APP_HOSTNAME)
  displayName: '执行gulp构建'
```
如果用Secure Files存储.env文件，拉取文件到项目根目录后，先增加一步验证逻辑确认变量配置正确：
```
- script: |
    cat .env
    echo $REACT_APP_HOSTNAME
  displayName: '验证环境变量配置'
```
第三步：检查gulp构建逻辑
确认你的gulp配置中没有额外的环境变量过滤规则，若使用dotenv加载.env文件，确保加载逻辑在构建任务执行前触发，未过滤REACT_APP_前缀的变量。