Azure Pipelines机密变量部署React应用到IIS后不生效问题咨询

你遇到的差异是以下两个规则共同作用的结果：

• React（默认Create React App配置）的环境变量仅在构建（yarn build）阶段被注入到静态产物中，打包完成后变量值已经硬编码到js文件里，部署阶段配置的任何环境变量都不会生效
• Azure Pipelines的机密变量默认不会自动传递给任务的子进程环境，必须手动显式映射，而明文变量默认会自动暴露给所有任务的进程上下文，这就是明文变量正常、机密变量失效的核心原因

按以下步骤调整流水线配置即可：

1. 首先确认React代码中读取环境变量的命名符合规则：Create React App要求所有客户端可访问的环境变量必须带REACT_APP_前缀，即你代码里应该是process.env.REACT_APP_TEST，没有该前缀的变量不会被注入到前端产物中
2. 调整你的流水线构建任务配置，手动将机密变量映射到构建任务的环境变量中，参考YAML配置如下：

- task: NodeTool@0
  inputs:
    versionSpec: '16.x' # 对应你项目需要的Node版本
  displayName: '安装Node.js'

- script: |
    yarn install
    yarn build
  displayName: '构建React应用'
  env:
    # 左侧为React代码中读取的变量名，右侧为你在Azure流水线中定义的机密变量名
    REACT_APP_TEST: $(你配置的流水线机密变量名)

3. 你之前添加的PowerShell读取机密变量的任务可以删除，只要在构建任务的env字段完成映射即可，机密变量在映射过程中不会明文输出到流水线日志中
4. 构建完成后可以抽查构建产物下static/js目录的打包js文件，搜索REACT_APP_TEST确认变量值已正确注入，再执行后续IIS部署步骤即可

• 不要把高敏感数据通过React环境变量注入，所有REACT_APP_前缀的变量都会出现在公开的客户端静态代码中，所有访问网站的用户都可以通过查看源码拿到变量值，敏感数据请走后端接口动态获取
• 如果你用的是Vite/自定义Webpack配置的React项目，要对应调整变量前缀规则：Vite要求变量带VITE_前缀，自定义Webpack需要配置DefinePlugin规则注入变量，同样需要在构建任务的env字段完成机密变量的映射

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