无法在Azure静态Web应用中配置设置，手动设置也被禁用

开发者阿泽

2026-7-27

问题描述

我使用以下YAML部署静态Web应用：

steps:
  - task: AzureResourceManagerTemplateDeployment@3
    displayName: 'Deploy WebApp compute resources'
    inputs:
      azureResourceManagerConnection: ${{parameters.serviceConnection}}
      subscriptionId: ${{parameters.subscriptionId}}
      resourceGroupName: ${{parameters.resourceGroupName}}
      location: ${{parameters.location}}
      csmFile: ${{ parameters.root }}/compute/template.bicep
      csmParametersFile: ${{ parameters.root }}/compute/parameters.json      
      deploymentMode: 'Incremental'
      deploymentOutputs: deploymentOutputs

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

对应的template.bicep内容：

resource staticWebApp 'Microsoft.Web/staticSites@2022-03-01' = {
  name: '${solutionAbbreviation}-ui'
  location: location
  sku: {
    name: 'Free'
    tier: 'Free'
  }
  properties: {
    allowConfigFileUpdates: true
    branch: branch
    buildProperties: {
      appLocation: 'UI/web-app'
      skipGithubActionWorkflowGeneration: true
    }
    enterpriseGradeCdnStatus: 'Disabled'
    provider: 'DevOps'
    repositoryUrl: repositoryUrl
    stagingEnvironmentPolicy: 'Disabled'
  }
}

resource staticWebAppAppSettings 'Microsoft.Web/staticSites/config@2022-03-01' = {
  parent: staticWebApp
  name: 'appsettings'
  properties: {
    REACT_APP_AAD_UI_APP_CLIENT_ID: 'ui-client-id'
    REACT_APP_AAD_API_APP_CLIENT_ID: 'api-client-id'
    REACT_APP_AAD_APP_TENANT_ID: 'tenant-id'
    REACT_APP_AAD_APP_SERVICE_BASE_URI: 'url'
  }
}

部署完成后，静态Web应用成功上线，但存在两个问题：

Bicep中定义的应用配置未显示在门户中
门户里的手动设置选项全部被禁用

问题原因及解决方案

1. 手动设置被禁用的原因

这是正常行为：当你通过AzureStaticWebApp@0这类CI/CD任务部署静态Web应用时，Azure会默认将应用配置的管理权限交给CI/CD管道，因此门户中的手动编辑选项会被禁用，所有配置变更需要通过管道或基础设施即代码（比如Bicep）来完成。

2. Bicep配置未显示的原因及解决办法

原因1：构建路径不一致导致部署冲突

Bicep中buildProperties.appLocation设置为UI/web-app，但YAML任务中的app_location是web-app，两者路径不匹配。这种不一致会导致部署任务覆盖Bicep中定义的构建配置，进而影响应用设置的生效。
解决办法：统一两处的路径，比如将YAML任务中的app_location改为UI/web-app，确保和Bicep中的配置一致。

原因2：REACT_APP_*变量的生效时机错误

React应用中的REACT_APP_*前缀变量是构建时注入的，而Bicep中设置的是静态Web应用的运行时环境变量。运行时变量无法被已经构建完成的React应用读取，因为这些变量在构建阶段就已经被打包到静态文件中了。
解决办法：如果这些变量是给React应用使用的，应该在AzureStaticWebApp@0任务中通过environment_variables参数传递，让构建过程注入这些变量：

- task: AzureStaticWebApp@0
  name: DeployStaticWebApp
  displayName: Deploy Static Web App
  inputs:
    app_location: 'UI/web-app' # 和Bicep保持一致
    cwd: '${{ parameters.root }}/webapp_package'
    azure_static_web_apps_api_token: $(deployment_token)
    environment_variables: |
      REACT_APP_AAD_UI_APP_CLIENT_ID=ui-client-id
      REACT_APP_AAD_API_APP_CLIENT_ID=api-client-id
      REACT_APP_AAD_APP_TENANT_ID=tenant-id
      REACT_APP_AAD_APP_SERVICE_BASE_URI=url

如果确实需要运行时变量（比如给后端API使用），可以保留Bicep中的配置，但需要确认Bicep部署是否成功：

用Azure CLI命令验证配置是否已部署：

az staticwebapp appsettings list --name <你的静态Web应用名称> --resource-group <资源组名称>

原因3：Bicep参数未正确传递

检查Bicep中的solutionAbbreviation、branch、repositoryUrl等参数是否在parameters.json中提供了正确的值，确保静态Web应用资源和配置资源都成功部署到了目标资源组中。

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