Statiq を Azure Static Web Apps にデプロイする

MLBお兄さんこと松村です。
この記事はオルターブース Advent Calendar 2021の15日目の記事です。
adventar.org

昨日の担当は地元が激近な深井さんでした。
aadojo.alterbooth.com

さて、私は 1年前のオルターブースアドベントカレンダーで「Statiq」という C# 製の静的サイトジェネレーターを紹介しました。 aadojo.alterbooth.com

あれから1年経ちましたが Statiq はまだベータ版のままのようですが、そのあいだに Azure では静的サイトのホスティングに適した Azure Static Web Apps が一般提供されました。
なので今日の記事では、 Statiq を Azure Static Web Apps にデプロイしてみたという内容を紹介します。

なお、今回使ったサンプルはこちらに置いてます。
github.com

Statiq の静的サイトを作成する

まず Azure Static Web Apps にデプロイする前に、Statiq の静的サイトを作成してビルドする手順をおさらいします。
Statiq は NuGet でパッケージが配布されています。.NET 6 でも Statiq は動くみたいですね。

コマンド

dotnet new console --framework net6.0 --name mystatiqapp
cd mystatiqapp
dotnet add package Statiq.Web --version 1.0.0-beta.37
mkdir input
touch input/index.md

Program.cs

using Statiq.App;
using Statiq.Web;

await Bootstrapper
    .Factory
    .CreateWeb(args)
    .RunAsync();

input/index.md

Title: My First Statiq page
---
# Hello World!

Hello from my first Statiq page.

プレビュー表示

とりあえずローカルで静的サイトが表示できることを確認します。

dotnet run -- preview

ここまでをコミットして GitHub にプッシュしておきましょう。

Azure Static Web Apps を作成

続いて Statiq の静的サイトを Azure Static Web Apps にデプロイします。
今回は GitHub Actions を使ってデプロイを行います。

まず Azure Static Web Apps を作成します。
ドキュメントには様々なフレームワークにおけるカスタムビルドコマンドが列挙されていますが、 Statiq に関しては記載されていません。

docs.microsoft.com

なので、とりあえずデプロイには失敗しますが、カスタムビルド構成は初期値のままとしておきます。

GitHub Actions のカスタマイズ

続いて GitHub Actions をカスタマイズして Statiq の静的サイトを出力して、 Azure Static Web Apps にデプロイできるようにします。

1. プロジェクトのリストア
2. プロジェクトのビルド
3. 静的サイトの出力
4. 静的サイトのデプロイ

必要なカスタマイズとしては上記になります。
Azure Static Web Apps が対応しているフレームワークであれば、上記のようなビルドは自動的に実行してくれます。

では GitHub Actions の定義ファイルの build_and_deploy_job をカスタマイズします。
「追加 ここから」から「追加 ここまで」の範囲がリストア、ビルド、出力の手順です。
また、Statiq は output ディレクトリに静的サイトが出力されるため、その場所を Azure Static Web Apps の app_location に指定します。
加えて skip_app_build: true を追加することで、Azure Static Web Apps の既定のビルドを実行しないようにします。

name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
      - main
  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: Setup .NET Core SDK 6.0.x
        uses: actions/setup-dotnet@v1.7.2
        with:
          dotnet-version: '6.0.x'
      - name: Restore
        run: dotnet restore
      - name: Build
        run: dotnet build --configuration Release --no-restore
      - name: Output
        run: dotnet run -- deploy
      # 追加 ここまで
      - name: Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_WITTY_FLOWER_01E076100 }}
          repo_token: ${{ secrets.GITHUB_TOKEN }}
          action: "upload"
          app_location: "output" # Statiq は output ディレクトリに静的サイトが出力される
          api_location: ""
          output_location: ""
          skip_app_build: true # プリセットされたビルドは実行しない

  close_pull_request_job:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close Pull Request Job
    steps:
      - name: Close Pull Request
        id: closepullrequest
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_WITTY_FLOWER_01E076100 }}
          action: "close"

これで無事に Statiq を Azure Static Web Apps にデプロイすることができるようになりました！

---

明日はみっつーの担当ですね。お楽しみに！