Check! Terraform で Azure Static Web App をデプロイする(GitHub 利用)

6 min read読了の目安(約5400字

Prologue

こんにちは、 @dz_ こと、大平かづみです。

先日、大変盛り上がった Hack Azure! #6 - Static Web Apps GA 祭り! (#hackazure) でとりあげた Azure Static Web Apps、GA を迎えて、Terraform でも v2.60 のリリースで対応されました!🎉

https://github.com/terraform-providers/terraform-provider-azurerm/releases/tag/v2.60.0

早速試していきます🤓

Azure Static Web Apps とは

Azure Static Web Apps は、静的サイトをホストできるサービスです。まさに、Azure 版 Netlify, Vercel といえるような、待望のサービスです!

すでに公式ドキュメントも充実していますし、

https://docs.microsoft.com/en-us/azure/static-web-apps/overview

Microsoft MVP の @kazuyukimiyake さんががっつりまとめてくださっているので、ぜひご参照ください💡

https://k-miyake.github.io/blog/azure-static-web-apps-ga/
https://k-miyake.github.io/blog/tags/Static-Web-Apps/

Terraform による Azure Static Web App のデプロイ

さて、本題の Terraform による Azure Static Web App のデプロイについて解説します。

Azure Static Web App は、そのリソースをデプロイする際に GitHub(または Azure DevOps)を接続することにより、一連の CI/CD を含めて簡単に構築・運用できる点が非常に便利なサービスです。

この GitHub との接続に関して、Terraform でリソースをデプロイする場合は、 Azure Static Web App のリソースデプロイした際に生成される APIキー を用いて接続することになります。

(Azure ポータル、Visual Studio Code 拡張、Azure CLI 等を用いる場合は、リソースデプロイ時に GitHub または Azure DevOps を接続する流れになります。)

なお、今回の検証に利用したコードはこちらに置いています。

https://github.com/dzeyelid/azure-static-web-app-playground

Terraform

Azure Static Web App のリソースをデプロイするには、今回のリリースで追加された azurerm_static_site を利用します。

https://registry.terraform.io/providers/hashicorp/azurerm/latest/docs/resources/static_site

Terraform の記述はこのようになります。

main.tf
terraform {
  required_providers {
    azurerm = {
      source  = "hashicorp/azurerm"
      version = "=2.60.0"  # <- azurerm_static_site が対応されたバージョン 2.60 を指定
    }
  }
}

provider "azurerm" {
  features {}
}

# リソースグループのリソース作成
resource "azurerm_resource_group" "main" {
  name = "rg-${var.identifier}"
  location = var.location
}

# Azure Static Web App のリソース作成
resource "azurerm_static_site" "main" {
  name = "stapp-${var.identifier}"
  resource_group_name = azurerm_resource_group.main.name
  location = var.swa_location
}
variables.tf
variable "identifier" {
  type = string
}

variable "location" {
  type = string
  default = "japaneast"
}

# Azure Static Web App のロケーションは、現時点(2021年5月)では限られているので明示的に指定
variable "swa_location" {
  type = string
  default = "eastasia"
}
outputs.tf
# Azure Static Web App の API キー を出力する(センシティブ有効)
output "swa_api_key" {
  value = azurerm_static_site.main.api_key
  sensitive = true
}

これをいつも通りデプロイしたのち、出力させた Azure Static Web App の APIキー を下記コマンドで表示し、コピーしておきます。

terraform output -raw swa_api_key

GitHub actions

前項で取得した Azure Static Web App の APIキーを、対象の GitHub リポジトリにシークレットとして設定します。

ここでは、例として AZURE_STATIC_WEB_APPS_API_TOKEN というシークレットを作成します。(シークレット名は任意です。)

ブラウザで手動で行う場合は、リポジトリの「Setting」から「Secrets」にて、シークレットを作成します。

Creat a GitHub secret with the API key

もしくは、GitHub CLI を利用すると、表示やコピーをすることなく、よりセキュアにシークレットを作成できるでしょう。

API_KEY=`terraform output -raw swa_api_key`
gh auth login
gh secret set AZURE_STATIC_WEB_APPS_API_TOKEN -b"${API_KEY}" --repo <owner>/<repo>

https://cli.github.com/manual/gh_secret

シークレットの設定ができたら、ワークフローファイルを作成します。

下記のように Azure/static-web-apps-deploy アクションの azure_static_web_apps_api_token に、前項で設定した APIキー のシークレットを指定します。

.github/workflows/deploy-to-azure-static-web-app.yml
name: Deploy to Azure Static Web App created by Terraform

on:
  push:
    branches:
      - main
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - main

jobs:
  build_and_deploy:
    name: Build and Deploy
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Deploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          # Azure Static Web App の APIキー を指定する
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
          repo_token: ${{ secrets.GITHUB_TOKEN }}
          action: "upload"
          app_location: "/vite-project"
          output_location: "dist"

  close_pull_request:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close Pull request
    steps:
      - name: Close Pull Request
        uses: Azure/static-web-apps-deploy@v1
        with:
          # Azure Static Web App の APIキー を指定する
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
          action: "close"

Azure/static-web-apps-deploy に関するワークフローの書き方については、下記をご参照ください。

https://docs.microsoft.com/ja-jp/azure/static-web-apps/github-actions-workflow#build-and-deploy

これで準備ができました! GitHub にコードとワークフローを push し、Azure Static Web App にデプロイできれば成功です🤓✨

Deployed code to Azure Static Web App successfully

Epilogue

ずっとこのプルリクエストをウォッチしてまして、リリースしてすぐに試せて満足です🚀

https://github.com/terraform-providers/terraform-provider-azurerm/pull/7150

Azure Functions への接続も Terraform でできるといいな~♪