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

## 概要
[前回](https://qiita.com/hibohiboo/items/5a5bd1fae07fd4a0dd61)は、手動でリソースを作成して、パイプラインからコンテンツをデプロイすることを行った。

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

## azure-cliの準備

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

<details><div>

[azure cli](https://community.chocolatey.org/packages/azure-cli)

```
choco install azure-cli -y
```

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

azコマンドのトラブルを避けるため、[Azure CLI を Git Bash で使う時の必須環境変数 MSYS_NO_PATHCONV](https://qiita.com/mnrst/items/bb25eae3fcdf5fc53429)を参考に、下記の設定を行っておく。

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

</div></details>

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

<details><div>

### AzureStaticApps
ポータルでAzureStaticAppsのページを開き、テンプレートのエクスポートを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/bdb5a68f-2ea6-f0a1-73e6-46dcb3aaf6bb.png)

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

```json: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の コマンドを利用する。

```bash
 az bicep decompile --file ./staticWebApp.json 
```


```bicep: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としてエラーが出ているので修正する。

```diff:
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'
  }
}

```

</div></details>

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

[Bicep を使ってリソース グループを作成する](https://learn.microsoft.com/ja-jp/azure/azure-resource-manager/bicep/create-resource-group)より

```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
```

```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のサンプルアプリのデプロイ](https://qiita.com/y__saito/items/298826ae0f476eeb3c61)
[Azure Static Web Apps のドキュメント](https://learn.microsoft.com/ja-jp/azure/static-web-apps/)
[Azure Static Web Apps が GA になりました（速報）](https://k-miyake.github.io/blog/azure-static-web-apps-ga/)
[Azure Static Web Apps 活用プラクティス (2021年末版)](https://k-miyake.github.io/blog/swa-best-practices-2021/)