Azure Static Web Appsの設定ファイルをAzure Pipelineで生成する

Static Web AppsとFront Doorを組み合わせた時に、staticwebapp.config.jsonにX-Azure-FDIDを書くことで、Static Web Appsへのアクセスを特定のFront Doorからのみに許可できます。

docs.microsoft.com

Static Web AppsにAzure Pipelineからデプロイする時に、X-Azure-FDIDの値をstaticwebapp.config.jsonに埋め込むためのjqテンプレートを用意します。

// staticwebapp.config.jq
{
  "networking": {
    "allowedIpRanges": [
      "AzureFrontDoor.Backend"
    ]
  },
  "forwardingGateway": {
    "requiredHeaders": {
      "X-Azure-FDID": $frontdoorId
    }
  }
}

スクリプトを実行すると、X-Azure-FDIDに値が設定されたstaticwebapp.config.jsonファイルのできあがりです。

$ jq -n --arg frontdoorId "00000000-0000-0000-0000-000000000000" -f staticwebapp.config.jq | tee staticwebapp.config.json
{
  "networking": {
    "allowedIpRanges": [
      "AzureFrontDoor.Backend"
    ]
  },
  "forwardingGateway": {
    "requiredHeaders": {
      "X-Azure-FDID": "00000000-0000-0000-0000-000000000000"
    }
  }
}

Azure Pipelineでstaticwebapp.config.json作成先をapp_location配下となるようにして、Azure Pieplineの変数にfrontdoorIdを追加、Static Web Appsへデプロイします。

# azure-pipelines.yml
trigger:
  - main

pool:
  vmImage: ubuntu-latest

steps:
  - checkout: self
    submodules: true

  - script: |
      jq -n --arg frontdoorId "$frontdoorId" -f staticwebapp.config.jq | tee src/staticwebapp.config.json
    env:
      frontdoorId: $(frontdoorId)

  - task: AzureStaticWebApp@0
    inputs:
      app_location: "/src"
      output_location: ""
    env:
      azure_static_web_apps_api_token: $(deployment_token)

Azure Static Web Appsへのアクセスをロックダウンするstaticwebapp.config.jsonのnetworkingとforwardingGatewayセクションはAzure Static Web AppsのStandardプランでのみ使用できるので、Freeプランから変更しておきましょう。