Astro のサイトを Cloudflare Pages から Workers へ移行

2025年6月1日

このサイトとレグナスポータルを Pages から Workers に移行しました。
どちらも Astro で構成されており（非SSR）、工程をメモします。
パッケージマネージャーは pnpm を使っています。

Cloudflare による解説はこちら。

wrangler.jsonc を作成

まずはプロジェクトフォルダの直下にwrangler.jsoncファイルを作成。
SSR でなければ中身は下記のようにシンプルで済みました。

wrangler.jsonc

{
  "name": "my-astro-app",
  // Update to today's date
  "compatibility_date": "2025-03-25",
  "assets": {
    "directory": "./dist",
    "not_found_handling": "404-page"
  }
}

compatibility_date は互換性の日付を記載するものです。コメントアウトにもあるようにこの作業を行う日を書くと良さそうです。
参考リンク：Compatibility dates
not_found_handling で 404-page を指定しないと 404 ページが表示されなかったので追記。

package.json にコマンドを変更する

package.json

"scripts": {
  // 変更前
  "preview": "astro preview",

  // 変更後
  "preview": "wrangler dev",
  "deploy": "pnpm run build && wrangler deploy"
}

自分の場合はデプロイコマンド時にビルドを行うようにしています。
pnpm run deploy を実行します。
wrangler deploy が走ると、assets > directory で指定したフォルダの中身が Cloudflare に展開されます。
Pages と同様に、このフォルダ内は静的コンテンツとして扱われ、フリープランでも無制限に利用できます！

デプロイを始めて行う場合は、ブラウザーで Cloudflare の認証ページが開きます。
ページの指示に従って簡単な操作をする必要があります。
完了すると Workers & Pages に wrangler.jsonc > name に記載した名前の Workers が出来ており、訪問するからページが見れると成功です！
スクリーンショット2025-06-01122114.png

ドメイン

ドメインを当てる場合にはその Workers プロジェクトの中の設定から行います。
ドメインとルートの中に追加ボタンがあるのでクリック。
スクリーンショット2025-06-01122810.png
するとカスタムドメインがあるのでそちらを選ぶと、ドメインを記載できます。
記載する前に Pages で同じドメインを当てている場合は、DNS レコードのページから削除しておく必要があります。

環境変数

Workers 用に用意されている変数とシークレットでは、今回の静的コンテンツのみの利用では使用することが出来ないようです。
しかし、Git リポジトリと連携すると専用の変数とシークレットの設定が出てきますので、これが利用できます。
スクリーンショット2025-06-01122347.png

GitHub 連携での自動デプロイ

package.json の dependencies/devDependencies に wrangler を追加しておかないと push 時にデプロイが失敗しました。

undefined

pnpm add -D wrangler

ビルド構成のコマンドも変更。
ここはよくわからなかったので、claude に聞きました。

undefined

ビルド コマンド: pnpm install && pnpm run build
デプロイ コマンド: pnpm exec wrangler deploy

これで GitHub に push 時に正常にデプロイされるようになりました。

Pages の削除

ドメインやビルド環境に異常がなければ Pages を削除します。
これはお好みだと思いますが、残していると煩雑になるので不要ならば消したいところです。
ただしビルド数が100を超えているプロジェクトを設定から削除しようとすると「Your project has too many deployments to be deleted, follow this guide to delete them: https://cfl.re/3CXesln」とエラーになります。
参考リンク：デプロイ数が多いプロジェクトを削除する
試したのですが、自分は上手く行きませんでした…。
なので今のところ残ってしまっていますが、デプロイ履歴から昔のページを懐かしむこともできるので、これはこれでありなのかなと思っています。

以上

以上で完了です！
Workers に初めて触れると何が何だか分かりませんでしたが、とりあえず Cloudflare が凄過ぎる！という感想に至りました…笑。