Azure静态Web应用部署：能否用单个管道变量传递多环境变量？

方案一：用单个管道变量整合所有环境变量 #

1. 定义单个管道变量 #

在Azure DevOps管道的变量配置中，创建一个名为AAD_ENV_VARS的变量，值为所有环境变量的键值对（每行一个，或用\n分隔）：

REACT_APP_AAD_UI_APP_CLIENT_ID=你的客户端ID值
REACT_APP_AAD_API_APP_CLIENT_ID=你的API客户端ID值
REACT_APP_AAD_APP_TENANT_ID=你的租户ID值
REACT_APP_AAD_APP_SERVICE_BASE_URI=你的服务基础URI值

2. 添加脚本任务解析变量 #

在AzureStaticWebApp@0任务前，添加一个Bash或PowerShell任务，将单个变量解析为构建可用的环境变量：

Bash版本

- task: Bash@3
  displayName: '配置AAD环境变量'
  inputs:
    targetType: 'inline'
    script: |
      echo "$(AAD_ENV_VARS)" | while IFS='=' read -r key value; do
        export "$key"="$value"
        echo "##vso[task.setvariable variable=$key]$value"
      done

PowerShell版本

- task: PowerShell@2
  displayName: '配置AAD环境变量'
  inputs:
    targetType: 'inline'
    script: |
      $envVars = $(AAD_ENV_VARS) -split "`n"
      foreach ($var in $envVars) {
        if (-not [string]::IsNullOrEmpty($var)) {
          $keyValue = $var -split '=', 2
          $key = $keyValue[0].Trim()
          $value = $keyValue[1].Trim()
          [Environment]::SetEnvironmentVariable($key, $value, 'Process')
          Write-Host "##vso[task.setvariable variable=$key]$value"
        }
      }

3. 修改部署任务 #

移除原任务中的env字段，脚本已将环境变量注入构建环境，npm run build会自动读取这些变量：

- task: AzureStaticWebApp@0
    name: DeployStaticWebApp
    displayName: Deploy Static Web App
    inputs:
      app_location: 'web-app'
      app_build_command: 'npm ci && npm run build'
      cwd: '${{ parameters.root }}/webapp_package'
      azure_static_web_apps_api_token: $(deployment_token)

方案二：用变量组整合（更易管理） #

如果不需要严格的单个变量，用变量组整合会更方便维护：

1. 创建变量组 #

在Azure DevOps的库中新建变量组（比如命名为AAD_Env_Vars），添加以下四个变量并设置对应值：

• REACT_APP_AAD_UI_APP_CLIENT_ID
• REACT_APP_AAD_API_APP_CLIENT_ID
• REACT_APP_AAD_APP_TENANT_ID
• REACT_APP_AAD_APP_SERVICE_BASE_URI

2. 在管道中引用变量组 #

variables:
- group: AAD_Env_Vars

3. 调整部署任务 #

变量组中的变量会自动成为管道全局变量，构建命令npm run build可直接读取，因此可以移除原env字段，或保留字段直接引用变量：

- task: AzureStaticWebApp@0
    name: DeployStaticWebApp
    displayName: Deploy Static Web App
    inputs:
      app_location: 'web-app'
      app_build_command: 'npm ci && npm run build'
      cwd: '${{ parameters.root }}/webapp_package'
      azure_static_web_apps_api_token: $(deployment_token)
    # 可选：如果需要显式声明，可保留以下env字段
    # env:
    #   REACT_APP_AAD_UI_APP_CLIENT_ID: $(REACT_APP_AAD_UI_APP_CLIENT_ID)
    #   REACT_APP_AAD_API_APP_CLIENT_ID: $(REACT_APP_AAD_API_APP_CLIENT_ID)
    #   REACT_APP_AAD_APP_TENANT_ID: $(REACT_APP_AAD_APP_TENANT_ID)
    #   REACT_APP_AAD_APP_SERVICE_BASE_URI: $(REACT_APP_AAD_APP_SERVICE_BASE_URI)

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