如何通过Terraform将Azure静态Web应用连接至Azure DevOps？

使用Terraform创建Azure静态Web应用时，无法实现Azure门户手动创建时的Azure DevOps项目关联功能，查阅Terraform官方文档后仍未找到明确配置方法，同时创建出的资源属性与门户手动创建的不一致。

现有Terraform代码 #

resource "azurerm_static_web_app" "admin_crm_app" {
  name                         = "${var.env_prefix}-crm-stapp-westeu"
  resource_group_name          = azurerm_resource_group.admin_rg.name
  location                     = azurerm_service_plan.admin_plan.location
  sku_tier                     = "Free"
  sku_size                     = "Free"

  preview_environments_enabled = false

  app_settings = {
    WEBSITE_TIME_ZONE                          = "Europe/Rome"
    ASPNETCORE_ENVIRONMENT                     = "${var.env}"
   # WEBSITE_WEBDEPLOY_USE_SCM                  = false

    APPINSIGHTS_INSTRUMENTATIONKEY             =  azurerm_application_insights.admin_appi.instrumentation_key
    APPLICATIONINSIGHTS_CONNECTION_STRING      =  azurerm_application_insights.admin_appi.connection_string
    ApplicationInsightsAgent_EXTENSION_VERSION = "~3"
  }

  tags = {
    Source = "${var.iac}"
  }
}

解决方案 #

1. 添加Azure DevOps关联配置 #

Terraform的azurerm_static_web_app资源通过source_control块实现Azure DevOps项目关联，这是门户手动创建时DevOps连接对应的底层配置，现有代码缺失该块。以下是补充后的完整代码：

resource "azurerm_static_web_app" "admin_crm_app" {
  name                         = "${var.env_prefix}-crm-stapp-westeu"
  resource_group_name          = azurerm_resource_group.admin_rg.name
  location                     = azurerm_service_plan.admin_plan.location
  sku_tier                     = "Free"
  sku_size                     = "Free"

  preview_environments_enabled = false

  # 配置Azure DevOps源代码关联
  source_control {
    repo_url      = "https://dev.azure.com/你的组织名/你的项目名/_git/你的仓库名"
    branch        = "main" # 替换为你要关联的分支
    repo_token    = var.azure_devops_pat # 通过变量传入Azure DevOps个人访问令牌，避免硬编码

    azure_devops_configuration {
      app_location      = "/" # 静态应用代码根目录，无特殊结构则填"/"
      api_location      = "" # 无API后端则留空，有Azure Functions后端则填对应目录（如"api"）
      app_build_command = "npm run build" # 项目构建命令，根据技术栈调整（如yarn build）
      output_location   = "dist" # 构建产物目录，如Vue/React的dist、Angular的dist/<项目名>
    }
  }

  app_settings = {
    WEBSITE_TIME_ZONE                          = "Europe/Rome"
    ASPNETCORE_ENVIRONMENT                     = "${var.env}"
    # WEBSITE_WEBDEPLOY_USE_SCM                  = false

    APPINSIGHTS_INSTRUMENTATIONKEY             = azurerm_application_insights.admin_appi.instrumentation_key
    APPLICATIONINSIGHTS_CONNECTION_STRING      = azurerm_application_insights.admin_appi.connection_string
    ApplicationInsightsAgent_EXTENSION_VERSION = "~3"
  }

  tags = {
    Source = "${var.iac}"
  }
}

2. 参数说明 #

• repo_url：Azure DevOps仓库的完整URL，可从DevOps仓库页面复制
• repo_token：Azure DevOps个人访问令牌（PAT），需具备代码读取和构建执行权限，建议通过Terraform变量或密钥管理服务传入
• azure_devops_configuration子块：
  • app_location：静态应用源代码所在目录，根目录则填"/"
  • api_location：若使用Azure Functions作为API后端，填写后端代码目录；无后端则留空字符串
  • app_build_command：项目的构建命令，需匹配项目技术栈（如React/Vue用npm run build，静态HTML可留空）
  • output_location：构建完成后产物的输出目录，需与项目构建配置一致

3. 对齐门户手动创建效果 #

若仍存在属性差异，可检查以下项：

• 预览环境：门户默认可能开启预览环境，若需一致，将preview_environments_enabled设为true
• 应用设置：对比门户中静态Web应用的应用设置列表，确保Terraform的app_settings包含所有配置项
• SKU配置：确认sku_tier和sku_size与门户选择的层级一致

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