Zenn
🐥

CloudflarePagesからWorkersへ移行してみた(Gatsby)

に公開
Gatsby.js
microCMS
Cloudflare Workers
Cloudflare Pages
tech

Gatsby + MicroCMSで構築した静的なブログサイトを、Cloudflare Pages から Cloudflare Workers に移行した手順をまとめました。

移行前の考慮事項

移行にあたって、私のサイトの都合上以下の要素を考慮する必要がありました。

  • サイト構成: Gatsby製の完全静的サイト
  • コンテンツ取得: MicroCMSからデータを取得してビルド
  • 従来の仕組み: MicroCMSのWebhookでCloudflareに通知し、Cloudflare側のビルド環境で npm run build を実行してデプロイ
  • 新しい仕組み: Workersではビルド済みの静的アセットを配置して配信するため、ビルドを外部（GitHub Actions）で実施する必要がある

Pages と Workers の違い

Cloudflare Pages の仕組み

  • GitHub連携している場合、Cloudflareがリポジトリをpull
  • Cloudflareのビルド環境でbuild実行
  • 生成物をまるごとアトミックデプロイ

Cloudflare Workers の仕組み

  • GitHub Actions（CI）でbuild実行
  • wrangler deployで生成物（public/）+ Workerコードを一括アップロード
  • ビルドした生成物をassetsに配置し、WorkerからそれらTop配信

Pagesの方が設定が簡単で、Cloudflareが自動的に処理してくれる印象でした。しかし、Workersでは柔軟性が向上します。

移行手順

既存のPagesプロジェクトに以下のファイル構成を追加します。

my-awesome-site/
├── wrangler.toml                # Workers用設定ファイル
├── package.json                 # wrangler関連コマンドを追加
├── src/
│   └── worker.js                # Workersのエントリーポイント
└── .github/
    └── workflows/
        ├── deploy-production.yml # 本番デプロイ用ワークフロー
        └── deploy-staging.yml    # ステージングデプロイ用ワークフロー（任意）

各ファイルの役割は以下の通りです。

  • wrangler.toml: Workersのビルド方法、静的ファイルディレクトリ、環境別設定を記述
  • package.json: npm run workers:devやnpm run workers:deployなどの実行用スクリプトを追加
  • src/worker.js: fetch()ハンドラでenv.ASSETS.fetch()を呼び、public/内の静的アセットを返す
  • .github/workflows/: GitHub Actionsワークフロー定義。wrangler-action@v3を使ってビルド済みファイルをWorkersにデプロイ

ステップ1: Wranglerの導入

Wrangler公式ドキュメントに従って、プロジェクトローカルにインストールします。

npm i -D wrangler@latest

ステップ2: wrangler.tomlの作成

Worker名、Workerコード、配信する静的データのパスなどを記述します。このファイルを元にWranglerコマンドでWorkerをデプロイできます。

name = "hogehoge"
main = "src/worker.js"
compatibility_date = "2024-08-08"

# Static assets configuration using [assets]
[assets]
directory = "public"

# Build configuration
[build]
command = "npm run build"

# Environment variables for production
[env.production]
name = "my-awesome-site"
vars = { NODE_ENV = "production" }
routes = [
  "hoge.com/*"
]

# Environment variables for staging
[env.staging]
name = "my-awesome-site-dev"
vars = { NODE_ENV = "staging" }
routes = [
  "staging.hoge.com/*"
]

ステップ3: package.json にスクリプト追加

{
  "scripts": {
    "workers:dev": "wrangler dev",
    "workers:deploy": "wrangler deploy",
    "workers:build": "npm run build && wrangler deploy"
  }
}

ステップ4: Worker作成

静的サイトのホスティングであれば、以下の必要最低限の記述で十分です。

// Cloudflare Workers with [assets] configuration
export default {
  async fetch(request, env) {
    // 静的アセットを返す
    return env.ASSETS.fetch(request);
  }
}

ステップ5: テストデプロイ

ここまでの設定が完了したら、以下のコマンドでローカル環境からデプロイできます。

npm run workers:build

GitHub Actions ワークフローの設定

PagesではCloudflare環境でbuildしていましたが、移行後はビルド済みファイルをWorkerにデプロイする必要があります。GitHub Actionsの設定を行います。

参考記事: CloudflareのPages→Workersへの移行

MicroCMS Webhook設定の変更

MicroCMSで記事の投稿など更新があった際のWebhook通知先を、CloudflareからGitHub環境での自動ビルドに変更します。

公式手順に従って設定すれば特に問題ありません。

参考: MicroCMS - GitHub Actions連携設定

ドメインの移行

PagesからWorkersへドメインを移行します。

Workersの設定タブから「カスタムドメイン」の割り当てが行えます。管理画面からカスタムドメインの追加を行いCNAMEレコードを作成し直します。

おわりに

以上の手順でCloudflare PagesからWorkersへの移行が完了しました。Pagesからの移行が推奨されているようですが、想定より手間がかかりました。

せっかく移行したので、Worker機能を活用した新しい機能も実装してみようと思います。

移行を行った個人ブログも運営していますので、ぜひ遊びに来てください！
augustaro.com

Discussion