シンセイサクシツ ログ > Cloudflare > microCMS の投稿更新で GitHub から Cloudflare Workers へデプロイのメモ
Posted： Cloudflare Javascript その他のウェブ系

microCMS の投稿更新で GitHub から Cloudflare Workers へデプロイのメモ

これまでの制作で GitHub リモートリポジトリへのプッシュで、SSG（静的ページ）でビルドし Cloudflare Workers へデプロイすることができるようになったが、今度は miroCMS で記事を更新した時にリモートリポジトリのビルドとデプロイをするように設定したい。

デプロイの方法を変更する

今までは Cloudflare Workers のダッシュボードから GitHub 連携でデプロイしていたが、それを止めて GitHub Actions でのデプロイにするように変更する。

Webhook と GitHub Actions でのデプロイ手順

まずは以下のトークンやID準備する。

  • Cloudflare API トークン
  • Cloudflare アカウントID
  • GItHub パーソナルトークン

その後

  • microCMS の Webhook 設定
  • GitHub Actions のシークレット変数登録
  • GitHub Actions ワークフローファイル (.yml) の作成

Cloudflare のAPI トークンとアカウント ID を準備

Cloudflare のダッシュボード右上のプロフィールから、API トークンページへ移動し APIトークンを作成する。
「Cloudflare Workers を編集する」のテンプレートがあるのでそれを使用する。

アカウント ID は Workers & Pages の右側に表示されているのでコピーして控えておく。

GitHub で personal access tokens を生成

GitHub ダッシュボードのプロフィールアイコン（右上）を開き Setting ページへ。
Setting ページの左サイドバーの一番下の Developer settings をクリック。
Developer settings ページの左サイドバー personal access tokens > Fine-grained tokens でトークン名を決め、対象のリポジトリとトークンの権限を設定する。

トークンは microCMS の Webhook 設定で使うのでコピーして控えておく。（一度しか表示されない）

personal access tokens
personal access tokens

microCMS の Webhook の作成

microCMS の Webhook 設定の作成には、microCMS のダッシュボード右上の「API設定」から表示されるページの Webhook 項目で案内に従って入力していく。

GitHub トークンの部分は先に生成していた GitHub の Personal access token を使用する。
ここで決めるトリガーイベント名は、GitHub Actions のワークフローを設定する .yml ファイルで使う。

Actions シークレット変数の登録

GitHub リモートリポジトリの管理画面で、Setting > Security > secrets and variables > Actions のページで、Repository secrets に以下のシークレット変数を登録。

GitHub Actions ワークフローファイルを作成

GitHub リモートリポジトリにプッシュした時と microCMS で記事を更新した時にデプロイするワークフローファイル (.github/workflows/deploy.yml) を作成。

注意することは repository_dispatch のトリガーはデフォルトブランチのみで有効。それ以外のブランチのワークフローは実行されない。

制作中のサイトはとりあえず別のブランチだけ microCMS の更新時にデプロイされるようにしたかったので、ここでハマった..
解決策として main ブランチのワークフローファイルに ref というパラメーターを使い、別ブランチに切り替えて Actions を実行した。

// .github/workflows/preview-feature-works.yml

name: Build & Preview to CF Workers on microCMS Update
on:
  repository_dispatch: // microCMS の更新をイベントトリガーに設定
    types: [works_update]

jobs:
  build-preview:
    name: Build & Preview
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v5
        with:
          ref: feature/works // ここで別ブランチに切り替え

      - name: Install pnpm
        uses: pnpm/action-setup@v4
        with:
          version: 10

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "20"
          cache: "pnpm"

      - name: Install dependencies
        run: pnpm install --frozen-lockfile

      - name: Build project
        run: pnpm run build
        env:
          MICROCMS_SERVICE_DOMAIN: ${{ secrets.MICROCMS_DOMAIN }}
          MICROCMS_API_KEY: ${{ secrets.MICROCMS_KEY }}

      - name: Versions Upload to Cloudflare Workers
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          command: versions upload --preview-alias feature-works

GitHub Actions や Webhook、yml の書き方など知らないことばかりだったのでかなり苦戦したが、テック系ブログで色々詳しく説明してくれている人たちがいたので助かった、感謝。

GitHub Actions は色々なサービスと連携できそうだ。

参考URL

ページの先頭へ