koukiitou.com

Astro製のブログをCloudflare PagesからCloudflare Workersに移行した

Astro製のブログをCloudflare PagesからCloudflare Workersに移行しました。
そのときの作業のメモをまとめ直してから、ブログの記事にしてますので、もしかすると抜けや漏れがあるかもしれません。

Cloudflareの公式のドキュメントによれば、今後はCloudflare Workersに注力していくと書かれていました。
そのため、新規プロジェクトではCloudflare PagesではなくてCloudflare Workersを利用することが推奨されておりました。

Migrate from Pages to Workers · Cloudflare Workers docs

Workers will receive the focus of Cloudflare's development efforts going forwards, so we therefore are recommending using Cloudflare Workers over Cloudflare Pages for any new projects.

目次

Cloudflare Workersでワーカーを作成する

既存のCloudflare Pagesのページから、直接的にCloudflare Workersのワーカーには移行することができません。
なので、自分の場合には、Cloudflare Workersからリポジトリをインポートする形で、新たにワーカーを作成しました。

Cloudflare Workersにデプロイする準備をする

まずはwranglerというパッケージをインストールします。
このパッケージをインストールして、特定のコマンドを実行すると、Cloudflare Workersにデプロイすることができます。

$ npm install --save-dev wrangler

wranglerでデプロイする際のコマンドをpackage.jsonに書きます。
これは好き嫌いだと思いますので、書かなくても問題はありません。

"scripts": {
	"deploy": "wrangler deploy",
	...
}

それから、wrangler.jsoncというファイルを作成します。
このファイルにはCloudflare Workersの設定を記述します。

nameには、Cloudflare Workersで作成したワーカーの名前を入力します。
compatibility_dateには、Cloudflareの公式のドキュメントなどを参考にして、好きな日付を入力します。
assets.directoryには、Astroでビルドしたファイルが出力されるディレクトリのパスを入力します。
assets.not_found_handlingには、404-pageと入力しなければ、404.htmlが適切に表示されなくなってしまいます。

{
	"name": "my-blog",
	"compatibility_date": "2025-09-04",
	"assets": {
		"directory": "./dist",
		"not_found_handling": "404-page"
	}
}

Cloudflare Workersにデプロイする

まずはAstroのビルドのコマンドを実行します。
ビルドされたファイルは、デフォルトの設定では./distのディレクトリに出力されると思われます。

$ npx astro build

それから、wranglerでデプロイのコマンドを実行します。
初回のコマンド実行時には、自動的にブラウザが開き、Cloudflareにログインを求められます。

$ npx wrangler deploy

デプロイが問題なく実行された場合、コンソールにCloudflare WorkersのサブドメインのURLが表示されます。
そのURLにアクセスして、ファイルの確認をすることができたら、デプロイは成功となります。

.gitignoreに.wranglerのディレクトリを追記する

wranglerのコマンドを実行したら、.wranglerというディレクトリが作成されました。
調べたところ、.gitignoreに.wranglerを含めても問題は発生しないようです。

.wrangler/

アセットのみのワーカーとなるため、mainのフィールドなどは記述しない

今回の構成ではアセットのみのワーカーとなるので、mainやassets.binding、assets.run_worker_firstなどのフィールドを入力しているとエラーとなってしまいます。
それから、アセットのみのワーカーではobservabilityを設定していても、特に効果を発揮しませんので、コメントアウトしておいてもいいかもしれません。

{
	"name": "my-blog",
	"compatibility_date": "2025-09-04",
	"main": "src/api/index.js",
	"assets": {
		"directory": "./dist",
		"binding": "ASSETS",
		"not_found_handling": "404-page",
		"run_worker_first": [ "/api/*" ]
		// "run_worker_first": true
	},
	"observability": {
		"logs": {
			"enabled": true
		}
	}
}

アセットのみのワーカーでmainやassets.binding、assets.run_worker_firstなどのフィールドを入力している場合には、下記のようなエラーが発生してしまいます。
アセットのみのワーカーと、アセットのみではないワーカーでは、仕様が異なるのかもしれません。

✘ [ERROR] Cannot use assets with a binding in an assets-only Worker.
✘ [ERROR] Cannot set run_worker_first without a Worker script.
✘ [ERROR] Cannot use assets with a binding in an assets-only Worker.

リポジトリにプッシュしたら、自動的にデプロイされる

リポジトリをインポートする形でワーカーを作成した場合、そのリポジトリにプッシュしたら、自動的にデプロイされます。
それから、ワーカーの設定を確認してみましたが、現時点では自動デプロイの設定は存在しませんでした。
ですので、自動デプロイを無効化する場合には、ワーカーからリポジトリを切断しなければいけないのかもしれません。

Cloudflare Pagesでは、デプロイメント数の多いページを削除できないという問題がある

Cloudflare Pagesのページを削除しようとしたら、エラーが発生しました。
自分の場合には対処などはせずに、そのままにしておいても、特に問題は発生しないであろうと判断しました。
ただし、Cloudflare Pagesの自動デプロイだけは無効化しております。

Known issues · Cloudflare Pages docs

You may not be able to delete your Pages project if it has a high number (over 100) of deployments.
The Cloudflare team is tracking this issue.

Cloudflare Workersには、まだデプロイフックは実装されていない

Cloudflare Pagesにはデプロイフックの設定がありましたが、Cloudflare Workersにはありません。
ですので、互換性の一覧を見てみましたが、Cloudflare Workersには、まだデプロイフックは実装されておりませんでした。

Migrate from Pages to Workers · Cloudflare Workers docs

参考記事