概略

このブログをデプロイするのには今までCloudflare Pagesを使っていたが、この度Cloudflare Workersに移行することにした。

なぜ移行することにしたのか

CloudflareがPagesの機能をWorkersに統合しつつあって、5月ごろからPagesの設定画面にも「Workersへの移行をお勧めします」という表示が出るようになっていたからである。

いざサービス終了してから（もしくはサービス終了が発表されてから）慌てて移行することになるのも嫌だったので、「いずれ移行しないとな」とは思っていたが、今回機会があったので移行することになった。

移行手順

公式やほかの人たちの知見を参考に移行のための実装を行った。

ブログのリポジトリにWranglerをインストール

これに関しては以前Pages Functionsを利用していた関係で既にインストールしていた。

npm i -D wrangler@latest

Workers用の設定ファイルを準備

基本的に公式が用意した手順に従っていく。

今回はwrangler.jsoncを用意した。

wrangler.jsonc

{
  "name": "blog",
  // Update to today's date
  "compatibility_date": "2025-08-12",
  "assets": {
    "directory": "./dist"
  }
}

Workersへのデプロイ用のGitHub Actionsを用意する

これが一番の問題だった。GitHubのリポジトリから自動でビルドしてくれるCloudflare Pagesに慣れすぎていて、Workersでは自分でビルドしてからデプロイしなければいけないというのがよくわからず、何回か失敗してしまった。

まずGitHubリポジトリのSetting→Secrets and variables→ActionsでGitHub Actions実行時の環境変数を設定する。

.github/workflows/にcloudflare-workers-deploy.ymlというGitHub Actions用の設定ファイルを用意して、ブログのビルドとWorkersへのデプロイの設定を書いていく。

.github/workflows/cloudflare-workers-deploy.yml

name: cloudflare-workers-deploy
on:
  repository_dispatch:
    types: [update]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: "22" # プロジェクトで指定のNode.jsバージョン
      - name: Install Dependencies
        run: npm ci # 関連パッケージをインストール
      - name: Build Project
        run: npm run build # 静的ファイルを生成
        env:
          PUBLIC_MICROCMS_SERVICE_DOMAIN: ${{ secrets.PUBLIC_MICROCMS_SERVICE_DOMAIN }}
          PUBLIC_MICROCMS_API_KEY: ${{ secrets.PUBLIC_MICROCMS_API_KEY }}
          SITE_TITLE: ${{ secrets.SITE_TITLE }}
          SITE_DESCRIPTION: ${{ secrets.SITE_DESCRIPTION }}
          PIXIV: ${{ secrets.PIXIV }}
          FANBOX: ${{ secrets.FANBOX }}
          DEVIANTART: ${{ secrets.DEVIANTART }}
          CARD_IMAGE: ${{ secrets.CARD_IMAGE }}
          ICON_HEADER: ${{ secrets.ICON_HEADER }}
          FAVICON: ${{ secrets.FAVICON }}
          BLUESKY: ${{ secrets.BLUESKY }}
          BLUESKY_BRIDGE: ${{ secrets.BLUESKY_BRIDGE }}
          XFOLIO: ${{ secrets.XFOLIO }}
          OLD_SITE: ${{ secrets.OLD_SITE }}
      - name: Deploy
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CF_API_TOKEN }}
          accountId: ${{ secrets.CF_ACCOUNT_ID }}

やたらビルド時の環境変数が多いが、これは各種アカウントへのリンクやfaviconなども環境変数で指定するようにしているためである。MicroCMSのHobbyアカウントで使用できるAPIの数が3→5に増えたことだし、アカウントのリンクなんかはMicroCMSで管理する方式にしてもいいなと考えているが、未だに実装はできていない。

普通にやるんだったらPUBLIC_MICROCMS_SERVICE_DOMAINとPUBLIC_MICROCMS_API_KEY、CF_API_TOKEN、CF_ACCOUNT_IDくらいしか指定する必要はないはずである。なおMicroCMSのAPI関係がpublicになっているのは下記の方式で画面プレビューと検索機能を実装したためである。設定でGETしか使えないようになっているから問題ないはず。

microCMSからGitHub ActionsへのWebhookを設定する

公式の記事を参考に実装していく。うちはすでにBridgy Fedへの通知用にGitHub ActionsへのWebhookを設定していたのでそちらを流用した。

これでCloudflare PagesへのWebhookは不要になったので無効化しておく。

追記:

よく考えたらGitHubのメインリポジトリに更新をPushしたときのActionを作っていなかったので追加した。

cloudflare-workers-deploy-on-main-pushed.yml

name: cloudflare-workers-deploy-on-main-pushed
on:
  push:
    branches:
      - main
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: "22" # プロジェクトで指定のNode.jsバージョン
      - name: Install Dependencies
        run: npm ci # 関連パッケージをインストール
      - name: Build Project
        run: npm run build # 静的ファイルを生成
        env:
          PUBLIC_MICROCMS_SERVICE_DOMAIN: ${{ secrets.PUBLIC_MICROCMS_SERVICE_DOMAIN }}
          PUBLIC_MICROCMS_API_KEY: ${{ secrets.PUBLIC_MICROCMS_API_KEY }}
          SITE_TITLE: ${{ secrets.SITE_TITLE }}
          SITE_DESCRIPTION: ${{ secrets.SITE_DESCRIPTION }}
          PIXIV: ${{ secrets.PIXIV }}
          FANBOX: ${{ secrets.FANBOX }}
          DEVIANTART: ${{ secrets.DEVIANTART }}
          CARD_IMAGE: ${{ secrets.CARD_IMAGE }}
          ICON_HEADER: ${{ secrets.ICON_HEADER }}
          FAVICON: ${{ secrets.FAVICON }}
          BLUESKY: ${{ secrets.BLUESKY }}
          BLUESKY_BRIDGE: ${{ secrets.BLUESKY_BRIDGE }}
          XFOLIO: ${{ secrets.XFOLIO }}
          OLD_SITE: ${{ secrets.OLD_SITE }}
      - name: Deploy
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CF_API_TOKEN }}
          accountId: ${{ secrets.CF_ACCOUNT_ID }}

また、カスタム404ページへのリダイレクトも設定していなかったので追記した。

wrangler.jsonc

{
  "name": "blog",
  // Update to today's date
  "compatibility_date": "2025-08-12",
  "assets": {
    "directory": "./dist",
    "not_found_handling": "404-page" // If you have a custom `src/pages/404.astro` page
  }
}

追追記:

よく調べたらGitHub Actionsのトリガーは複数指定ができたのだった。

なので、.github/workflows/cloudflare-workers-deploy.ymlにメインにプッシュされた場合のトリガーを追加し、cloudflare-workers-deploy-on-main-pushed.ymlは削除した。