Cloudflare Pages デプロイガイド｜AIワークショップ

Whyつまずきの正体

なぜ「Workers」でデプロイされてしまうのか

原因はほぼ100%、管理画面の入口を間違えていることです。Cloudflareは「Workers & Pages」が統合され、Createを押すと最初にWorkers寄りの画面（Ship something new）が出ます。ここで上の「Continue with GitHub」を押すと、ただのHTMLサイトなのにWorkerとして扱われ、エラーや404が連発します。

⚠️ いちばんの落とし穴

「Create」のあとの画面で、上の「Continue with GitHub」を押さないこと。一番下の「Pages … 始める」からPagesフローに入る——これさえ守れば9割のトラブルは起きません。

✕ Workerになってしまう道

Create → 上の
「Continue with GitHub」
または wrangler deploy

○ 正しくPagesになる道

Create → 一番下の
「Pages … 始める」
→ Connect to Git

Pattern Aこれから作る人

A.最初から正しくやる最短手順

新しくサイトを公開するときの王道です。初回だけ少し手順がありますが、一度つなげば次からは「Pushするだけ」になります。

GitHubにリポジトリを用意する

作ったHTMLフォルダをGitHubに上げます。GitHub Desktopの「Publish repository」でもOK。

💡 リポジトリ名は test や lp など汎用名を避ける。名前-プロジェクト や 日付-プロジェクト 形式が安全（.pages.dev は世界で早い者勝ちのため）。

ダッシュボードで「Workers & Pages」を開く

dash.cloudflare.com → 左メニュー「Workers & Pages」→「Create」。

⭐ 一番下の「Pages … 始める」から進む

ここが最重要ポイント。「Create」を押すと下の画面が出ますが、上の「Continue with GitHub」を押すとWorkersになってしまいます。画面一番下の「Pages を導入しようとお考えですか? 始める」をクリックして、Pages専用のフローに入ってください。

CloudflareのCreate画面。一番下にあるPagesの「始める」リンクを赤枠で強調している — 「Create」後の画面。上の「Continue with GitHub」ではなく、**赤枠の「始める」**からPagesフローへ。そのあとGitHubを認可し、リポジトリを選びます。

ビルド設定をこの通りに入れる

HTML1枚のLPなら、迷わずこの設定で。これでビルドエラーも404も出ません。

Production branch	`main`
Framework preset	`None`（日本語表示は「なし」。最初から選ばれているので触らなくてOK）
Build command	空欄（何も入れない）
Build output directory	`/`（HTMLが直下にある場合）

💡 Viteなどビルドが必要なときだけ dist にする。それ以外は / でOK。

Cloudflare Pagesのビルド設定画面。フレームワークプリセットなし、ビルドコマンド空欄、ビルド出力ディレクトリがスラッシュになっている — 実際の設定画面。**フレームワークプリセット＝なし／ビルドコマンド＝空欄／ビルド出力ディレクトリ＝/** になっていればOK。

「Save and Deploy」で公開完了

数十秒〜数分で https://リポジトリ名.pages.dev が立ち上がります。これで連携完了。

Pattern BすでにWorkersで出してしまった人

B.WorkersをPages連携に作り直す

残念ながら、一度Workerとして作ったものはPagesのGit連携に「変換」できません（Cloudflareの仕様）。なので、Pagesプロジェクトを新しく作り直すのが正解です。やることはパターンAとほぼ同じです。

⚠️ 作り直す前に知っておくこと

新しく作るので URLが変わります（.pages.dev のサブドメインが変わる）。すでに誰かにURLを配っている場合は、新URLを案内し直してください。

GitHubにコードがあるか確認する

ローカルのHTMLがGitHubに上がっていればOK。まだなら先にPushしておく（パターンAのステップ1と同じ）。

新しいPagesプロジェクトをGit連携で作る

パターンAのステップ2〜5をそのまま実行。必ず一番下の「Pages … 始める」 → Connect to Git で、同じリポジトリを選びます。

💡 プロジェクト名は元の名前 + -v2 など、区別できる名前にすると混乱しません。

古いWorkerを削除する

「Workers & Pages」一覧から、間違って作った古いWorkerを選び、Settings → Delete で削除。新しいPages版だけ残します。

💡 削除する前に、新しいPages版が正しく表示されているか確認してから消すと安心です。

以降は新しいURLでPushするだけ

これで「Git連携の自動デプロイ」に切り替わりました。次からは編集してPushすれば自動で公開されます。

Routine連携できた後の更新

2回目以降は、これだけ

一度Git連携できれば、管理画面はもう触りません。ローカルで直してPushすれば自動でデプロイされます。

ローカルで編集 → commit → push → 自動で公開 ✨

Don'tこれは絶対に避ける

やってはいけないこと

一見ラクに見えても、後で「今どれが公開されてるの?」が分からなくなる原因になります。

直接アップロードは使わない

wrangler deploy を使う —— これはWorkerとしてデプロイするコマンド。今回のトラブルの原因そのもの。
wrangler pages deploy で直接アップロードする —— Cloudflareにだけ最新版が存在し、ローカル・GitHub・公開URLがバラバラになる。
急いでいるからとダッシュボードを飛ばす —— 初回だけは必ずGit連携を通す。後の運用が劇的にラクになる。

Troubleshooting困ったとき

トラブル早見表

症状	原因	対処
Workerになってしまう	Createで上の「Continue with GitHub」を押した	一番下の「Pages … 始める」から作り直す
404が返る	Build output directory のミス	HTMLが直下なら「/」にする
ビルドエラーが出る	Build command に何か入っている	Build command を空欄にする
Pushでusernameエラー	CLIにGitHub認証がない	GitHub Desktopの「Push origin」を使う
Pushしたのに反映されない	Git連携になっていない（直接アップロード運用）	Pagesプロジェクトを作り直す（パターンB）
ダッシュボードが開かない	SPAの読み込み待ち	⌘R で再読み込み