Bicep을 사용하여 외부 API를 Azure Static Web Apps의 환경에 연결

Azure Static Web Apps 및 Api Multiverse라는 강연을 준비하고 있었는데 여기서 관리되는 기능 대신 외부 api를 연결하고 싶었습니다. 가장 먼저 하고 싶었던 일은 백엔드에서 일종의 API를 호출하는 프런트 엔드를 배치하는 것입니다. 나는 Static Web App 'the magic way'를 만들고 싶지 않았지만 IaC로 시작하고 싶었기 때문에 이를 위해 bicep 파일을 만들었습니다.

param location string = resourceGroup().location

resource swamv_ui 'Microsoft.Web/staticSites@2022-03-01' = {
  name: 'swamv'
  location: location
  sku: {
    name: 'Standard'
    tier: 'Standard'
  }
  properties: {
    stagingEnvironmentPolicy: 'Enabled'
    allowConfigFileUpdates: true
    provider: 'Custom'
    enterpriseGradeCdnStatus: 'Disabled'
  }
}

빌드 및 배포

다음으로 템플릿에서 간단한 WASM Blazor 앱을 만들고 빌드/배포 파이프라인을 시작했습니다. 이 파이프라인에서 코드가 빌드되고 Azure CLI는 Bicep을 사용하여 리소스를 만드는 데 사용됩니다. 이제 정적 웹 앱 리소스에 앱을 게시하기 위해 푸시 배포를 수행하는 방법은 SWA CLI를 사용하는 것입니다. 이 게시 명령에는 배포 토큰이 필요하며 파이프라인의 일부 비밀 변수에 저장할 수 있지만 Azure CLI가 있기 때문에 쿼리만 하기로 결정했습니다.

trigger:
- main

pool:
  vmImage: ubuntu-latest

steps:
- script: |
    cd swamv-ui
    dotnet publish -o bin/publish
  displayName: 'build blazor app'

- task: AzureCLI@2
  displayName: 'Create SWA (IaC)'
  inputs:
    azureSubscription: 'REDACTED'
    scriptType: 'pscore'
    scriptLocation: 'inlineScript'
    inlineScript: |
      az deployment group create -g swamv-rg -f swamv.bicep

- task: AzureCLI@2
  displayName: 'Deploy Blazor app to SWA'
  inputs:
    azureSubscription: 'REDACTED'
    scriptType: 'pscore'
    scriptLocation: 'inlineScript'
    inlineScript: |
      npm install -g @azure/static-web-apps-cli
      $token = az staticwebapp secrets list --name swamv --query "properties.apiKey"
      swa deploy -d $token -a ./swamv-ui/bin/publish/wwwroot/ --env production

Bicep과 API 연결

내가 하고 있는 데모에서 여러 API를 연결하고 싶었습니다. 첫 번째는 간단한 Azure 함수입니다. Azure Portal에서 단추를 클릭하고 드롭다운에서 백엔드를 선택하여 백엔드를 연결할 수 있습니다. Bicep에서 링크를 정의하려는 경우 자체 리소스입니다. 이미 생성한 Static WebApp, 연결하려는 백엔드에 대한 리소스(참조), 링크 리소스 자체를 설명하는 세 가지 구성 요소가 필요합니다.

resource swamv_backend_azure_functions 'Microsoft.Web/sites@2021-03-01' existing = {
  name: 'funcapiapp'
  scope: resourceGroup('functions-api-app-rg')
}

resource swamv_ui_backend_functions 'Microsoft.Web/staticSites/linkedBackends@2022-03-01' = {
  parent: swamv_ui
  name: 'swamv_backend_functions'

  properties: {
    backendResourceId: swamv_backend_azure_functions.id
    region: 'westeurope'
  }
}

API를 다른 환경에 연결

하지만 제 강연에서 여러 다른 백엔드를 보여드리고 싶었습니다. 링크를 재정의하면 Azure에서 여러 백엔드를 추가하려고 하기 때문에 배포를 허용하지 않는 것 같습니다.

나는 다른 백엔드에 대해 다른 환경(기본적으로 스테이징 슬롯)을 사용하기로 결정했습니다. 연결된 백엔드 리소스에 환경을 지정할 수 있는 필드가 없기 때문에 약간 혼란스러웠습니다.

하지만 기다려! Bicep에서 환경을 지정하지 않고 SWA CLI를 사용하여 직접 게시하면 자동으로 생성됩니다. 알고 보니 환경은 하위 리소스이며 '내역' 때문에 '빌드'라고 부르며 명명이 어렵습니까?

resource swamv_backend_appservice 'Microsoft.Web/sites@2022-03-01' existing = {
  name: 'swamv-appservice-api'
  scope: resourceGroup('swamv-appservice-api')
}

resource swamv_ui_environment_appservice 'Microsoft.Web/staticSites/builds@2022-03-01' existing = {
  parent: swamv_ui
  name: 'appservice'
}

resource swamv_ui_linkedbackend_appservice 'Microsoft.Web/staticSites/builds/linkedBackends@2022-03-01' = {
  name: 'swamv_backend_appservice'
  parent: swamv_ui_environment_appservice
  properties: {
    backendResourceId: swamv_backend_appservice.id
    region: 'westeurope'
  }
}

이 마지막 부분에서 bicep가 'swamv-appservice-api'라는 기존 앱 서비스 리소스를 참조하고 있음을 알 수 있습니다. 이 경우에는 appservice라는 기존 환경 리소스 '빌드'를 사용하고 있으며 둘 사이에 링크를 생성하고 있습니다. 'swamv_ui_linkedbackend_appservice'라는 정의된 리소스에서.