WaterPunch
← ブログ一覧

Cloudflare Pages で静的サイトをデプロイしたら wrangler deploy で爆死した話

Cloudflare Pagesデプロイ静的サイト個人開発

はじめに

WaterPunch の LP と技術ブログを Cloudflare Pages に載せる際、ビルドは通ったはずなのにデプロイだけ失敗する という経験をしました。本記事は、その原因と正しい設定を記録したデプロイメモです。

症状

Git 連携後のビルドログはこうでした。

  1. npm clean-install … 成功
  2. npx wrangler deploy … 実行される
  3. Asset too large: node_modules/workerd/bin/workerd (119 MiB)失敗

静的 HTML サイトなのに、なぜ Worker のデプロイが走るのか。

原因:Pages と Workers の混同

Cloudflare Pages には Deploy command という項目があります。ここに npx wrangler deploy が入っていたため、Pages の静的ホスティングではなく Workers + assets モード として動いていました。

設定上の問題点:

HTML と CSS だけ載せたいサイトに、Worker デプロイは不要です。

正しい設定(静的サイト)

Cloudflare Dashboard → Pages プロジェクト → Settings → Builds:

項目 設定
Framework preset None
Build command 空欄
Build output directory / または .
Deploy command 空欄(削除)

Deploy command を消すと、Git から取得した静的ファイルがそのまま配信されます。

package.json をどうするか

package.json があると CI で npm install は走りますが、Deploy command が空なら問題ありません

ローカル用の生成スクリプト(サイトマップ・静的 HTML 生成)のために devDependencies を置く場合は、生成結果を Git にコミット し、Pages 上ではビルド不要にするのが安全です。

以前は package.json ごと削除して Deploy command 問題だけ回避しましたが、今は Deploy command を空にする 方が本質的な解決です。

カスタムドメイン

www.mcservers-wp.com を Pages プロジェクトに紐づけ、DNS の CNAME を *.pages.dev に向けます。apex(mcservers-wp.com)も同プロジェクトに追加可能です。

教訓

個人開発の LP + ブログ程度なら、シンプルな静的配信 が最も壊れにくいです。

まとめ

Cloudflare Pages で「なぜか node_modules がデプロイされる」ときは、Deploy command に wrangler deploy が入っていないか確認してください。空にすれば、HTML/CSS/画像だけがそのまま載ります。

WaterPunch はこの設定で mcservers-wp.com に載せています。