Bicepを使ってAzure Static Web Appsのリソースをデプロイしたメモ

概要

前回は、手動でリソースを作成して、パイプラインからコンテンツをデプロイすることを行った。

今回は、IaC (Bicep)で同様のことを行うようにする。

azure-cliの準備

まだazがインストールされていなかったので、インストールを行った。

azure cli

choco install azure-cli -y

インストール後、azコマンドを認識させるためにvscodeを立ち上げなおす必要があった（bashのコンソールを新しく開くだけでは認識されなかった）。

azコマンドのトラブルを避けるため、Azure CLI を Git Bash で使う時の必須環境変数 MSYS_NO_PATHCONVを参考に、下記の設定を行っておく。

echo 'export MSYS_NO_PATHCONV=1' >> ~/.bashrc

ARMからBicepへの変換

前回作成したリソースから、ARMテンプレートをダウンロードし、Bicepに変換して使うものとする。

AzureStaticApps

ポータルでAzureStaticAppsのページを開き、テンプレートのエクスポートを選択

エクスポートしたファイルに名前を付けて保存。

staticWebApp.json

{
    "$schema": "https://schema.management.azure.com/schemas/2019-04-01/deploymentTemplate.json#",
    "contentVersion": "1.0.0.0",
    "parameters": {
        "staticSites_my_first_static_web_app_name": {
            "defaultValue": "my-first-static-web-app",
            "type": "String"
        }
    },
    "variables": {},
    "resources": [
        {
            "type": "Microsoft.Web/staticSites",
            "apiVersion": "2023-01-01",
            "name": "[parameters('staticSites_my_first_static_web_app_name')]",
            "location": "East Asia",
            "sku": {
                "name": "Free",
                "tier": "Free"
            },
            "properties": {
                "repositoryUrl": "[concat('https://dev.azure.com/hibo/test/_git/', parameters('staticSites_my_first_static_web_app_name'))]",
                "branch": "main",
                "stagingEnvironmentPolicy": "Enabled",
                "allowConfigFileUpdates": true,
                "provider": "DevOps",
                "enterpriseGradeCdnStatus": "Disabled"
            }
        },
        {
            "type": "Microsoft.Web/staticSites/basicAuth",
            "apiVersion": "2023-01-01",
            "name": "[concat(parameters('staticSites_my_first_static_web_app_name'), '/default')]",
            "location": "East Asia",
            "dependsOn": [
                "[resourceId('Microsoft.Web/staticSites', parameters('staticSites_my_first_static_web_app_name'))]"
            ],
            "properties": {
                "applicableEnvironmentsMode": "SpecifiedEnvironments"
            }
        }
    ]
}

次に、このJSONファイルをbicepファイルにする。 azure-cliの コマンドを利用する。

 az bicep decompile --file ./staticWebApp.json 

staticWebApp.bicep

param staticSites_my_first_static_web_app_name string = 'my-first-static-web-app'

resource staticSites_my_first_static_web_app_name_resource 'Microsoft.Web/staticSites@2023-01-01' = {
  name: staticSites_my_first_static_web_app_name
  location: 'East Asia'
  sku: {
    name: 'Free'
    tier: 'Free'
  }
  properties: {
    repositoryUrl: 'https://dev.azure.com/hibo/test/_git/${staticSites_my_first_static_web_app_name}'
    branch: 'main'
    stagingEnvironmentPolicy: 'Enabled'
    allowConfigFileUpdates: true
    provider: 'DevOps'
    enterpriseGradeCdnStatus: 'Disabled'
  }
}

resource staticSites_my_first_static_web_app_name_default 'Microsoft.Web/staticSites/basicAuth@2023-01-01' = {
  parent: staticSites_my_first_static_web_app_name_resource
  name: 'default'
  location: 'East Asia'
  properties: {
    applicableEnvironmentsMode: 'SpecifiedEnvironments'
  }
}

自動変換された状態だと、bicepとしてエラーが出ているので修正する。

param staticSites_my_first_static_web_app_name string = 'my-first-static-web-app'

resource staticSites_my_first_static_web_app_name_resource 'Microsoft.Web/staticSites@2023-01-01' = {
  name: staticSites_my_first_static_web_app_name
-   location: 'East Asia'
+   location: 'eastasia'
  sku: {
    name: 'Free'
    tier: 'Free'
  }
  properties: {
    repositoryUrl: 'https://dev.azure.com/hibo/test/_git/${staticSites_my_first_static_web_app_name}'
    branch: 'main'
    stagingEnvironmentPolicy: 'Enabled'
    allowConfigFileUpdates: true
    provider: 'DevOps'
    enterpriseGradeCdnStatus: 'Disabled'
  }
}

resource staticSites_my_first_static_web_app_name_default 'Microsoft.Web/staticSites/basicAuth@2023-01-01' = {
  parent: staticSites_my_first_static_web_app_name_resource
  name: 'default'
-   location: 'East Asia'
  properties: {
    applicableEnvironmentsMode: 'SpecifiedEnvironments'
  }
}

リソースグループのBicepの作成

Bicep を使ってリソース グループを作成するより

resourceGroup.bicep

targetScope='subscription'

param resourceGroupName string
param resourceGroupLocation string

resource newRG 'Microsoft.Resources/resourceGroups@2022-09-01' = {
  name: resourceGroupName
  location: resourceGroupLocation
}

実行スクリプトの作成

作成したテンプレートファイルと実行ファイルを以下の配置にした

- infrastructure
  - biceps
    - resourceGroup.bicep
    - staticWebApp.bicep
  - bin
    - create.bash

infrastructer/bin/create.bash

#!/bin/bash

BIN_DIR=$(cd $(dirname $0) && pwd)
BICEP_DIR=$(cd $BIN_DIR/../biceps && pwd)
RESOURCE_GROUP_NAME='test'
LOCATION=japaneast

cd $BICEP_DIR && az deployment sub create \
  --name demoSubDeployment \
  --location $LOCATION \
  --template-file resourceGroup.bicep \
  --parameters resourceGroupName=$RESOURCE_GROUP_NAME resourceGroupLocation=$LOCATION

cd $BICEP_DIR && az deployment group create \
  --name ExampleDeployment \
  --template-file staticWebApp.bicep \
  -g $RESOURCE_GROUP_NAME

実行

./infrastructure/bin/create.bash

実行し、リソースが作成できることを確認した。

参考

BicepとAzure DevOpsを使ったAzure Static Web AppsへのReactのサンプルアプリのデプロイ
Azure Static Web Apps のドキュメント
Azure Static Web Apps が GA になりました（速報）
Azure Static Web Apps 活用プラクティス (2021年末版)