Azure PipelinesでmicroCMS+Next.jsのブログをStatic Web Appsにデプロイする #Next.js

今回はmicroCMS+Next.jsで作成したシンプルなブログをAzure Pipelinesでビルドし、Azure Static Web Appsにデプロイする手順をご紹介します。

また、合わせてmicroCMSで記事を公開した際に、自動でビルド＆デプロイを実行する方法もご紹介します。

仕組みづくりのために利用したサービスのご紹介

microCMS
- 日本で開発されたAPIベースのヘッドレスCMSの一つです。
Next.js
- Reactベースのフロントエンドフレームワークです。
- microCMSと組み合わせることで簡単にブログサイトを作成することができます。
Azure Pipelines
- Azure DevOpsの機能の一つで、ビルドやテスト、デプロイ等の自動で行うことができます。
Azure Static Web Apps
- Azureが提供する静的サイトのリソースです。今回紹介するAzure PipelinesやGitHubなどでビルドし、静的サイトにデプロイすることができます。

前提

Azure PortalおよびAzure DevOpsを利用するためのサブスクリプションは適用済みとします。
Azure DevOpsのOrganizationおよびProjectは既に作成済みとします。
Node.jsのバージョンはv18.xとします。（2022年11月現在のLTS）
Gitは既にインストールされているものとします。

microCMS+Next.jsのブログ作成

まずは、microCMS+Next.jsで簡単なブログサイトのプロジェクトを作成します。

また、Azure Pipelinesを利用し作成したプロジェクトをStatic Web Appsにデプロイします。

microCMSのサービス作成

microCMSのサイトにアクセスし、サインアップおよびサービスの作成を行います。

https://microcms.io/

microCMS+Next.jsのプロジェクト作成

下記のmicroCMS公式サイトのチュートリアルを「7. CSSで見た目を装飾する」まで手順に従い進めていき、Next.jsのプロジェクト作成およびmicroCMSの記事呼び出しを行えるよう実装します。
- microCMS + Next.jsでJamstackブログを作ってみよう
プロジェクト直下に.env.productionを作成します。内容は上記チュートリアルの.env.development.localと同じくmicroCMSのAPI Keyを指定します。
```
API_KEY=xxxxxxxxxxxx
```

今回microCMSでは、このような記事を登録してみました。

Static Web Appsの作成（Azure Portal）

Azure PortalでStatic Web Appsのリソースをを作成します。

「リソースの作成」からStatic Web Apps（静的Webアプリ）を選択します。
下記の通りプロジェクトの詳細を入力します。他はデフォルトでOKです。
- リソースグループ：任意のリソースグループ（なければ新規追加）
- プラン: Free
- Azure Functions とステージングの詳細: East Asia
- デプロイの詳細: 今回は「その他」を選びます
作成後、リソースの管理画面トップから「デプロイメントトークンの管理」を選択し、表示されたトークンをコピーします。（後の手順で利用します。）

リポジトリ、パイプライン作成（Azure DevOps）

Azure DevOpsでリポジトリとパイプラインを作成します。

リポジトリ

Reposから新しいリポジトリを作成します。
リポジトリをCloneし、作成したNext.jsプロジェクトの資材をリポジトリにコミット＆プッシュします。

パイプライン

Azure Pipelinesから新しいパイプラインを作成します。
リポジトリは「Azure Repos Git」を選択し、リポジトリはさきほど作成したものを指定します。
パイプラインのテンプレートは「Starter Pipeline」を選択します。

yamlファイルの編集では、下記のとおりStatic Web Appsのデプロイタスクを追加します。

trigger:
- main

pool:
  vmImage: ubuntu-latest

steps:
- script: echo Hello, world!
  displayName: 'Run a one-line script'

- script: |
    echo Add other tasks to build, test, and deploy your project.
    echo See https://aka.ms/yaml
  displayName: 'Run a multi-line script'

# Static Web Appsのデプロイ
- task: AzureStaticWebApp@0
  inputs:
    app_location: '/'
    api_location: ''
    output_location: '.next'
  env:
    azure_static_web_apps_api_token: $(deployment_token)

Variablesから下記のとおり新しい変数を作成し、Static Web Appsのデプロイに必要なトークンを追加します。
- Name: deployment_token
- Value: Static Web Appsのデプロイメントトークン
  - Azure PortalのStatic Web Apps管理画面 > 「デプロイメントトークンの管理」から取得
- Keep this value secret: チェック

パイプラインを実行してみる

yamlファイルの編集後、Save and Runでパイプラインを実行してみます。

パイプライン完了後、Static Web Appsにアクセスしてみるとこのように記事が取得できることが確認できます。

記事一覧ページ
「最初のブログ」のページ

microCMS記事投稿後の自動デプロイ対応

Static Web Appsは公開されたものの、microCMS側で新しい記事を投稿したり、既存の記事を更新してもStatic Web Apps側は再度Pipelineを実行しないかぎり何も変わりません。

これはなぜかと言うと、今回作成したmicroCMS+Next.jsの構成はJamStackという考え方を採用しているためです。

JamStackを簡単に説明すると、「ビルド時に事前にデータを取得してHTMLに組み込む」といった考え方です。

従来はブログ記事のデータ等を都度Webサーバーとやり取りして取得していましたが、ビルド時にデータ取得しHTMLを生成しておくことで負荷軽減などのメリットがあります。

microCMSでのWebhook設定

下記の手順に従ってmicroCMS側でWebhookの設定を行います。

Azure DevOpsの場合は、下記のように設定します。

Webhookの種類：カスタム通知
基本設定
- Webhookの識別名：任意の名前
- URL：https://dev.azure.com/<DevOps Organization名>/_apis/public/distributedtask/webhooks/<DevOps Webhook名>?api-version=6.0-preview
  - DevOps Organization名：Azure DevOpsのURLのhttps://dev.azure.com/の直後の名前です
  - DevOps Webhook名：任意の名前を設定します。この値は、後述のAzure DevOpsでの受信Webhookの名前と一致させる必要があるため控えておきます。
- シークレット：任意のシークレットの値
  - こちらも、後述のAzure DevOpsでの設定で利用するため控えておきます。

Azure DevOpsでの受信Webhook設定

次に、Azure DevOpsで受信Webhookを設定します。

この設定をすることにより、microCMSで記事が公開された通知をAzure DevOps側が受け取ることができます。

参考：https://learn.microsoft.com/ja-jp/azure/devops/pipelines/process/resources?view=azure-devops&tabs=schema#define-a-webhooks-resource

Azure DevOpsのProject Settingsから「Service connections」を選択し新規作成します。
コネクションの種類は「Incoming WebHook」を選択します。
Webhookの設定を入力し、保存します。
- WebHook Name：microCMS側で設定したURLの「DevOps Webhook名」と同じ名前を入力します。
- シークレット：microCMS側で設定したシークレットと同じ値
- Service Connection Name：任意の名前。後述のAzure Pipelinesのyamlで利用するため控えておきます。
Azure Pipelinesのyamlファイル（azure-pipelines.yml）の最初に下記を追加します。
- WebHook Name：Azure DevOpsで設定した受信Webhookの「WebHook Name」を入力します
- connection：Azure DevOpsで設定した受信Webhookの「Service Connection Name」を入力します。
```
# Webhook受信時にパイプラインを実行
resources:
  webhooks:
    - webhook: CMSWebhook                     # Webhook名
      connection: microCMSWebhookConnection   # Service Connection名

trigger:
- main

...
```