Check! Terraform で Azure Static Web App をデプロイする（GitHub 利用）
Prologue
こんにちは、 @dz_ こと、大平かづみです。
先日、大変盛り上がった Hack Azure! #6 - Static Web Apps GA 祭り！ (#hackazure) でとりあげた Azure Static Web Apps、GA を迎えて、Terraform でも v2.60 のリリースで対応されました！🎉
早速試していきます🤓
Azure Static Web Apps とは
Azure Static Web Apps は、静的サイトをホストできるサービスです。まさに、Azure 版 Netlify, Vercel といえるような、待望のサービスです！
すでに公式ドキュメントも充実していますし、
Microsoft MVP の @kazuyukimiyake さんががっつりまとめてくださっているので、ぜひご参照ください💡
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 を接続する流れになります。）
なお、今回の検証に利用したコードはこちらに置いています。
Terraform
Azure Static Web App のリソースをデプロイするには、今回のリリースで追加された azurerm_static_site を利用します。
Terraform の記述はこのようになります。
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
}
variable "identifier" {
type = string
}
variable "location" {
type = string
default = "japaneast"
}
# Azure Static Web App のロケーションは、現時点（2021年5月）では限られているので明示的に指定
variable "swa_location" {
type = string
default = "eastasia"
}
# 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」にて、シークレットを作成します。
もしくは、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>
シークレットの設定ができたら、ワークフローファイルを作成します。
下記のように Azure/static-web-apps-deploy アクションの azure_static_web_apps_api_token に、前項で設定した APIキー のシークレットを指定します。
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 に関するワークフローの書き方については、下記をご参照ください。
これで準備ができました！ GitHub にコードとワークフローを push し、Azure Static Web App にデプロイできれば成功です🤓✨
Epilogue
ずっとこのプルリクエストをウォッチしてまして、リリースしてすぐに試せて満足です🚀
Azure Functions への接続も Terraform でできるといいな～♪
Discussion