Cloudflare PagesからWorkersへ移行

移行準備

静的サイトだからCloudflareでのデプロイ先はPagesだろうと思っていた。ところが、Cloudflareは静的サイトでもWorkersへのデプロイを推奨していた。将来的にPagesはWorkersへ統合する方針みたい。そこで、今のうちにWorkersに移行しておこうと思う。

まずはwrangler.jsoncが必要なのでプロジェクトのルートで以下を実行する。

npx wrangler setup

wranglerはインストールされているけど、途中でエラーになり肝心のwrangler.jsoncが作成されない。エラーを確認すると@astrojs/cloudflareがAstro 7.0以上を要求していたので、公式を参考にまずはAstroを7系にアップグレード。

npx @astrojs/upgrade

無事にAstroが7.0.3にアップグレードされたことを確認して、改めてnpx wrangler setupを実行すると無事にwrangler.jsoncが作成されている。

GitHubと連携

ここまでの変更をコミットしてGitHubにプッシュ。 CloudflareのダッシュボードでPagesのGitHub連携を解除してPage自体を削除。改めてWorkersでCreate ApplicationからGitHub連携するとすぐにビルドが走る。

画像が表示されない

デプロイしたサイトにアクセスすると画像の代わりにaltテキストが表示されている。どうやら/public配下の画像は表示されているけど、src/assets配下の画像が表示されていない。

調べるとWorkers上でAstroの画像変換がうまく動いていないみたい。astro.config.mjsにimageService: "compile",を以下の通り追加。

import { defineConfig } from "astro/config";
import cloudflare from "@astrojs/cloudflare";

export default defineConfig({
  adapter: cloudflare({
    imageService: "compile", // これを追加
  }),
});

変更をコミットしてGitHubにプッシュしたら、ちゃんと画像が表示されるようになった！🎉

これでCloudflare Workersへの移行は完了。