loading . . . このブログのデプロイ先をCloudflare PagesからCloudflare Workersに移行した # 概略
このブログをデプロイするのには今まで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は不要になったので無効化しておく。
参考にした記事
https://vermilion3.xyz/posts/t2ryc8b_xc1r/