Young Leaves

Azure Static Web Apps でブランチごとに環境を作成する

今回はAzure Static Web Apps の環境作成機能の一つ・ブランチ環境を作成し、Static Web Apps 単体でステージング環境、開発環境などの各環境を作成する方法について説明します。

若葉 香月
27 December, 2022

実施環境

Node.js

18.12.1

Next.js

13.0.7

デプロイソース

GitHub

ブランチ構成

* main
└ * staging
  └ * develop

ブランチ 環境とは

ブランチ環境とは、Production から作成したブランチに加えた変更の環境をデプロイするものです。ブランチごとに作成するため、各環境ごとに切ったブランチで動作確認を行ったり、個々のブランチで動作確認ができます。他のデプロイタイプにつきましては、以下記事を参照してください。

Azure Static Web Apps でPull Request の一時的な環境を作成する

事前準備

今回はGitHub を使用してAzure Static Web Apps を作成するため、事前にリポジトリを作成しておきます。リポジトリ作成後、Next.js のアプリケーションを作成します。また、今回はNode.js 18 系を使用するため、Package.json を事前に修正します。修正完了後、リポジトリにPush します。実行例では以下の設定を使います。

組織名

kdkwakaba

リポジトリ名

testrepo

ブランチ名

main

# Next.jsアプリを作成する
# TypeScriptとESLintについて聞かれるため、両方とも"y"を入力する
npx create-next-app branch-env

# アプリケーションに移動しリポジトリにPushする
cd app
git init
git add .
git commit -m 'first commit'
git branch -M main
git remote add origin git@github.com:kdkwakaba/testrepo.git
git push -u origin main
{
  "name": "app",
  "version": "0.1.0",
  "private": true,
  "engines": {
    "node": ">= 18.0.0"
  },
  <省略>
}

Azure Static Web Apps の作成

初めに事前作業で作成したリポジトリをソースにAzure Static Web Appsを作成します。Azure Static Web Apps は以下設定で作成します。

リソースグループ

test-rg

リージョン

East Asia

SKU

Free

デプロイのソース

GitHu

リポジトリ名

testrepo

ブランチ

main

実行するとGitHub のpersonal access token の認証を行うためのURL とコードが表示されるため、ブラウザでURL にアクセスしコードを入力しGitHub の認証を行います。

# Azure Static Web Appsを作成する
az staticwebapp create -n test-app \
    -g test-rg \
    -l eastasia \
    --sku Free \
    -s https://github.com/kdkwakaba/testrepo \
    -b main \
    --login-with-github

Azure Static Web Apps 作成後、自動的にGitHub Actions が起動しアプリケーションのデプロイを行います。デプロイ後、「https://<defaultHostnameの値>」にアクセスし、Next.js の初期画面が表示されることを確認します。

GitHub Actions のyml ファイルを修正

デプロイ後、リポジトリにGitHub Actions のyml ファイルが追加されるため、一度Pull を行います。反映後、ブランチ環境を作成するためにpush 時のbranches にGitHub Actions を動作させるブランチを追加します。また、Production のブランチを指定する必要が有るため、steps のname に「production_branch: "main"」指定します。

name: Azure Static Web Apps CI/CD

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

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_BRAVE_FIELD_0E5B1C200 }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
          action: "upload"
          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
	          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
          app_location: "/" # App source code path
          api_location: "" # Api source code path - optional
          output_location: "" # Built app content directory - optional
          production_branch: "main"
          ###### End of Repository/Build Configurations ######

yml ファイル修正後、リポジトリにPush します。

ブランチの作成

GitHub Actions のyml ファイル修正後、実施環境のブランチ構成をGitHub 上でブランチを作成します。今回は「stating」ブランチと「develop」ブランチを作成します。作成後、ブランチをローカルに適用させるためPull を行い、develop ブランチに切り替えます。

# GitHubで作成したブランチをローカルに反映する
git pull

# developブランチに変更する
git checkout develop

# 現在のブランチを確認する
git branch

ブランチ作成後、GitHub Actions が各環境へのデプロイを開始するため完了するまで待ちます。GitHub Actions 完了後、「az staticwebapp environment list」コマンドでdevelop ブランチとstaging ブランチの環境が作成されたことを確認します。

# 作成したブランチ環境を確認する
az staticwebapp environment list -n test-app -o table

後ほど動作確認で使用するため、develop ブランチとstaging ブランチ、default(production) のHostname を控えておきます。

develop ブランチに変更を加え動作確認

ブランチを作成し切り替えた後、develop ブランチに変更を加えます。今回はindex.tsx のタイトルを変更します。

export default function Home() {
  return (
    <>
      <Head>
        <title>Develop branch app</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main className={styles.main}>
      <省略>

修正後、develop ブランチにPush します。Push 後、GitHub Actions でdevelop ブランチのみジョブが実行されることを確認します。

デプロイ完了後、ブラウザから「https://<develop ブランチのHostname>」にアクセスし、タイトル部分が更新されたことを確認します。

develop ブランチの更新後、ブラウザから同様にstaging ブランチとproduction 環境にアクセスします。develop ブランチで加えた変更が反映されていないことを確認します。

ブランチの削除

ブランチ環境はリポジトリのブランチを削除しても自動的に削除されません。ブランチ環境を削除するにはAzure Portal から削除するかCLI などで削除する必要があります。Azure CLI でdevelop 環境を削除するには以下コマンドを実行します。

# ブランチ環境・developを削除する
az staticwebapp environment delete -n test-app --environment-name develop

ブランチ環境削除後にURL へアクセスすると、以下の404 ページが表示されます。

まとめ

  • Azure Static Web Apps ではリポジトリのブランチごとに環境を作成できる。
  • GitHub Actions でブランチ環境を作成するには、push 時のブランチとproduction_branch を追加する。
  • 特定のブランチに変更を加えても他の環境には影響を与えない。
  • ブランチ環境はブランチを削除しても自動的には削除されないため、明示的に削除する必要がある。

参考資料