如何在Azure DevOps中为React应用管理多环境CI/CD流水线？

一、用变量组替代单一安全文件（更推荐） #

放弃上传多个.env安全文件，改用Azure DevOps的变量组来管理不同环境的变量，灵活性更高：

• 在Azure DevOps项目的「库」→「变量组」中，为每个环境创建独立的变量组（比如Dev_Variables、Prod_Variables）。
• 将原.env文件中的变量（如REACT_APP_API_URL、REACT_APP_SECRET）分别添加到对应环境的变量组里，敏感变量勾选「保密」选项。

二、同一流水线中动态生成对应环境的.env文件 #

React构建时依赖.env文件，你可以在流水线的不同阶段，从对应变量组读取值，动态生成.env文件，再执行构建：

stages:
  # 通用安装依赖阶段（可选，也可以每个环境单独安装）
  - stage: InstallDependencies
    jobs:
      - job: Install
        steps:
          - script: npm install
            displayName: 'Install npm dependencies'

  # Dev环境构建与部署
  - stage: DeployDev
    variables:
      - group: Dev_Variables # 引用Dev环境变量组
    jobs:
      - job: BuildAndDeployDev
        steps:
          - script: |
              # 从变量组读取值生成.env文件
              echo "REACT_APP_API_URL=$(REACT_APP_API_URL)" > .env
              echo "REACT_APP_SECRET=$(REACT_APP_SECRET)" >> .env
            displayName: 'Generate Dev .env file'
          - script: npm run build
            displayName: 'Build React app for Dev'
          # 这里添加部署到Dev环境的步骤（比如Azure Static Web Apps部署任务）

  # Prod环境构建与部署（可添加审批）
  - stage: DeployProd
    variables:
      - group: Prod_Variables # 引用Prod环境变量组
    jobs:
      - job: BuildAndDeployProd
        steps:
          - script: |
              echo "REACT_APP_API_URL=$(REACT_APP_API_URL)" > .env
              echo "REACT_APP_SECRET=$(REACT_APP_SECRET)" >> .env
            displayName: 'Generate Prod .env file'
          - script: npm run build
            displayName: 'Build React app for Prod'
          # 这里添加部署到Prod环境的步骤，建议开启手动审批

三、如果坚持使用安全文件管理多环境 #

若你更倾向于上传.env文件作为安全文件，可按以下方式操作：

1. 将每个环境的.env文件（如.env.dev、.env.prod）上传到Azure DevOps的「库」→「安全文件」中。
2. 在流水线的不同阶段，下载对应环境的安全文件并重命名为.env，再执行构建：

- stage: DeployDev
  jobs:
    - job: DevJob
      steps:
        - task: DownloadSecureFile@1
          name: devEnvFile
          inputs:
            secureFile: '.env.dev'
        - script: cp $(devEnvFile.secureFilePath) .env
          displayName: 'Replace with Dev env file'
        - script: npm run build
          displayName: 'Build for Dev'
        # Dev环境部署步骤

- stage: DeployProd
  jobs:
    - job: ProdJob
      steps:
        - task: DownloadSecureFile@1
          name: prodEnvFile
          inputs:
            secureFile: '.env.prod'
        - script: cp $(prodEnvFile.secureFilePath) .env
          displayName: 'Replace with Prod env file'
        - script: npm run build
          displayName: 'Build for Prod'
        # Prod环境部署步骤

新手实用建议 #

• 优先选择变量组方案：无需反复上传文件，修改变量直接在Azure DevOps界面操作，敏感变量的保密管理更规范。
• 为生产环境阶段添加手动审批：在Azure DevOps流水线的阶段设置中开启审批，避免误部署到生产环境。
• 验证变量注入：构建完成后，可添加一个脚本步骤打印.env内容（注意不要打印保密变量），或在部署后检查页面中的环境变量是否生效。

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