Azure Static Web Appsのブランチ管理をAmplifyと比較する

はじめに

AzureのStatic Web Apps（日本語では静的Webアプリ）では、Webサイトのホスティングを行うことができます。AWSにおいては、Amplifyが同様の機能を持つサービスです。
この記事では、Amplify利用者に向けたStatic Web Appsのブランチ管理機能を記述します。
なお、GitHubリポジトリのデプロイを前提としています。

構造

Amplifyでは、まずブランチを接続し、各ブランチに対して本番稼働ブランチやプレビュー有効化を設定していきます。
一方Static Web Appsの場合は、まず単一の運用環境があり、それ以外はすべてプレビュー環境となります。

運用環境

Static Web Appsの運用環境は、Amplifyにおける本番稼働ブランチとなります。
カスタムドメインとグローバルなトラフィック分散は、運用環境のみに適用されます。(参考)

ブランチ環境

Static Web Appsでは、プレビュー環境のうち恒久的なものをブランチ環境と呼びます。（参考）
上記の図では、stagingやdevelopが相当し、ブランチへのマージをトリガーとしてデプロイされます。
Amplifyにおける、本番稼働ではない接続ブランチと同じ使い方をすることができます。Amplifyのドキュメントでは機能ブランチ(feature branch)と記載されています。（参考）

PullRequest環境

PRをトリガーに作成・削除されるプレビュー環境は、PullRequest環境と呼ばれます。（参考）
上記の図では、develop PRが相当します。
Amplify同様に、ブランチごとにプレビューの有効化を行うことができます。

デプロイ方法

Amplifyのデプロイは、Amplify側で実行され、GitHub連携によって通知されます。
Static Web Appsの場合は、GitHub Actionsによってビルドとデプロイを行います。

初回デプロイ時、アプリ作成画面でGitHubアカウントに設定したアカウントによって、本番環境ブランチに自動でデプロイ用ワークフロー（.github/workflows/azure-static-web-apps-{ドメイン名}.yml）が追加されます。

設定方法

以降は、Static Web Appsにおける各環境の設定方法を記載します。

運用環境

初期設定

Amplify同様、初期設定時にブランチを指定します。（静的 Web アプリの作成 > 基本 > デプロイの詳細）
ソースでGitHubを選択し、各種項目を設定した後、分岐で運用環境のブランチを選びます。

Static Web Appsの作成後、自動追加されたGitHub Actionsによって初回デプロイが動きます。
運用環境は、環境画面で確認することができます。（対象アプリ > 設定 > 環境）

変更

GitHub Actionsのデプロイ用ワークフローによって変更できます。

.github/workflows/azure-static-web-apps-{ドメイン名}.yml

on:
  push:
    branches:
      - main
      - new-main # 追加
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - main
      - new-main # 追加

jobs:
  # 中略
      - name: Build And Deploy
       # 中略
        with:
          # 中略
          production_branch: "new-main" # 追加

上記の設定でデプロイすることで、運用環境のブランチがnew-mainとなります。
このとき、もともと運用環境だったmainはプレビュー環境に移らず削除されるのでご注意ください。

ブランチ環境

追加

こちらもGitHub Actionsのデプロイ用ワークフローによる指定となります。
あらかじめ、プレビュー環境機能を有効にしておきます。アプリ作成時はデフォルトで有効となっています。
設定画面に移動し（対象アプリ > 設定 > 設定）、プレビュー環境を有効にするにチェックして適用を押下します。

続いて、ワークフローのpushトリガーに対象ブランチを追加します。

.github/workflows/azure-static-web-apps-{ドメイン名}.yml

on:
  push:
    branches:
      - main
      - develop # 追加
  # 中略

jobs:
  # 中略
      - name: Build And Deploy
       # 中略
        with:
          # 中略
          production_branch: "main" # 追加

上記の設定でdevelopにpushすると、デプロイが実行されます。
環境画面の環境のプレビュー一覧にある参照リンクから、デプロイされたサイトを見ることができます。（対象アプリ > 設定 > 環境）

プレビュー機能が無効になっている場合、GitHub Actionsでビルドが動いた後、デプロイされず次のメッセージが出力されて正常終了します。
[WARNING] Staging environments are not allowed for this Static Web App.
ビルドにかかる時間はGitHub Actionsの実行時間に加算されてしまうため、プレビュー機能を無効化する場合は同時にワークフロー上のトリガーも変更すると効率的です。

削除

ワークフローのpushトリガーから対象ブランチを削除します。
管理画面の環境のプレビューに残っている場合は、対象にチェックを付けて削除ボタンを押下します。

なお、プレビュー機能を無効にしても、すでに作成された環境は手動削除するまで残ります。

Pull Request環境

追加

mainのPull Request環境はもともと設定されているため、ここではdevelopのプレビューを追加します。

.github/workflows/azure-static-web-apps-{ドメイン名}.yml

on:
  # 中略
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - main
      - develop # 追加

上記のとおり、pull_requestトリガーにdevelopを追加します。
これにより、developに対するPRでプレビュー環境が作成されるようになります、
なお、デフォルトではDraft状態のPRであってもワークフローが動くのでご注意ください。

ブランチ環境同様、環境画面の環境のプレビュー一覧にある参照リンクから、デプロイされたサイトを見ることができます。（対象アプリ > 設定 > 環境）

削除

PRのクローズ時にワークフローが動き、自動削除されます。
手動で削除したい場合はブランチ環境同様、管理画面の環境のプレビューで対象にチェックを付けて削除ボタンを押下します。