Astro で作成したサイトを GitHub Actions を利用して Cloudflare で公開する

Astro で作成したプロジェクト

今回、このサイトをリニューアルをするにあたって、Astro でリニューアルを行いました。すべてのコンテンツは Markdown で記述することで、個人的には簡単に更新できるようにしました。

この際、Markdown ファイルの frontmatter に publishDate を設定し、未来の日付と設定した場合、ビルド時にページが生成されないような仕込みをしました。つまり、ローカルで npm run dev を実行した場合は問題なくすべてのコンテンツを参照できるようになっています。このため、GitHub のリポジトリにプッシュして Cloudflare に対して展開した場合でも、仕込んでいるコンテンツが表示されることがありません。

一方、定期的に更新をするのであれば、GitHub Actions を利用してビルドをスケジューリングすることで、未来の日付を設定したコンテンツもビルド時に反映させることができます。

Cloudflare の設定を取得する

GitHub Actions と連携して Cloudflare が動くようにするために、Cloudflare 側からデプロイ Webhook を取得する必要があります。取得する手順は以下の通りです。

1. Cloudflare のダッシュボードから対象のプロジェクトを選択します。
2. 左側のメニューから設定 > デプロイフック にある + をクリックします
3. 任意の名前を入力して、展開をするブランチを選択します。
4. 保存をクリックする

これで Webhook が生成されますので、URL をコピーしておきます。

リポジトリにシークレットキーの登録

取得した URL は CLOUDFLARE_DEPLOY_HOOK という名前のシークレットとしてリポジトリに登録します。手順は以下の通りです。

1. GitHub のリポジトリの Settings > Secrets and variables > Actions とアクセスします。
2. New repository secret をクリックします
3. Name に CLOUDFLARE_DEPLOY_HOOK を入力します
4. Secret に取得した URL を入力します
5. Add secret をクリックします

これで準備ができました

GitHub Actions コードの追加

次にリポジトリのコードに対して、GitHub Actions のコードを追加します。コードとしては、.github/workflows/scheduled-build.yml というファイル名で作成します。今回は毎日 UTC 0 時、つまり日本では毎朝 9 時にビルドが実行されるように設定しました。

name: Scheduled Daily Build

on:
  schedule:
    # 09:00 AM JST is 00:00 UTC (GitHub Actions cron uses UTC)
    - cron: '0 0 * * *'
  workflow_dispatch: # Allows manually triggering the build from the GitHub Actions tab

jobs:
  trigger-build:
    name: Trigger Cloudflare Pages Build
    runs-on: ubuntu-latest
    steps:
      - name: Trigger Webhook
        env:
          CLOUDFLARE_DEPLOY_HOOK: ${{ secrets.CLOUDFLARE_DEPLOY_HOOK }}
        run: |
          if [ -z "$CLOUDFLARE_DEPLOY_HOOK" ]; then
            echo "Error: CLOUDFLARE_DEPLOY_HOOK secret is not set."
            exit 1
          fi
          curl -s -X POST "$CLOUDFLARE_DEPLOY_HOOK" > /dev/null

          echo "Successfully triggered build."

これで、バッチ処理が動くように設定をしました。実際に、以下のような形で公開されて、無事新着記事が自動的にアップされるようになりました。

将来的なコンテンツに関して、どんどんアップしておけば、サイトは自動更新されるわけです。