Claude Codeで作ったWebアプリをCloudflare Pagesにデプロイする4つの方法
手動アップロード / Wrangler / Git連携 / GitHub Actions
CDMCloudflarePagesWranglerGitHubGitHubActions
Claude Codeで作ったWebアプリをCloudflare Pagesに公開する方法は、大きく4つある。ブラウザで手動アップロードする方法、Wranglerで直接デプロイする方法、Cloudflare PagesのGit連携を使う方法、GitHub ActionsからWranglerを実行する方法。
この記事では、4つのデプロイ方法の違い、向いている場面、無料枠やD1への発展を見据えた選び方を整理する。
Cloudflareへのデプロイ方法4つ
1. Cloudflare Pagesへのデプロイは4種類ある
Cloudflare Pages へのデプロイ方法は主要なもので 4種類 ある。手軽な順に並べる。
- ブラウザでドラッグ＆ドロップ
- Wrangler CLI
- Cloudflare Pages の Git連携
- GitHub Actions + Wrangler
以下、それぞれを順に見ていく。
1-1. ブラウザでドラッグ＆ドロップ
Cloudflareダッシュボードのプロジェクト画面に、HTMLファイルなどをドラッグ＆ドロップするとそのままデプロイされる。
- メリット: アカウント作成だけで使える。GitHubもターミナルも不要
- デメリット: 更新のたびに手でアップロードする必要がある
- 向いているとき: とにかく試しに公開してみたい、シンプルな静的サイトの初回公開
1-2. Wrangler CLI
Cloudflare公式のCLIツール wrangler を、ローカル（Claude Code経由など）から実行してデプロイする。
- メリット: Claude Codeに「デプロイして」と頼むだけで反映できる
- デメリット: Node.js のインストールが必要。デプロイのたびに手動でコマンド実行
- 向いているとき: ローカルで開発しながら、自分のタイミングでコマンド一発で本番反映したい
1-3. Cloudflare Pages の Git連携
Cloudflareダッシュボード上で GitHub リポジトリを連携すると、リポジトリへのpushを検知して Cloudflare側でビルド・デプロイが実行される。
- メリット: 設定が最短。ダッシュボードでリポジトリを選ぶだけ。後述のGitHub ActionsのようなAPIトークン作成もワークフローファイル（YAML）作成も不要
- デメリット: Cloudflare無料プランではビルド回数に上限あり（月500回まで）
- 向いているとき: GitHubでバージョン管理しつつ、最短で自動デプロイを使いたい
1-4. GitHub Actions + Wrangler
GitHub Actions のワークフローファイル（YAML）に wrangler pages deploy を書き、GitHubへのpushで GitHub Actions側から Cloudflare へデプロイする。
- メリット: デプロイ手順を YAML にコード管理できる。テストやマイグレーションなどの前処理を後から差し込みやすい。Cloudflare側のビルド枠を消費しない
- デメリット: APIトークン作成、Secrets登録、YAML作成など初期セットアップが多い
- 向いているとき: デプロイ前にやりたい処理（テスト、ビルド、マイグレーション等）があるとき、CI/CDをコード管理したいとき
1-5. 4種類を比較する
| 観点 | ブラウザでドラッグ＆ドロップ | Wrangler CLI | Git連携 | GitHub Actions |
|---|---|---|---|---|
| 事前準備 | アカウントのみ | + Node.js | + GitHub | + GitHub・APIトークン・YAML |
| 公開操作 | 手動アップロード | 手動コマンド | git push | git push |
| デプロイ自動化 | × | × | ○ | ○ |
| デプロイ前処理 | × | × | 工夫すれば可 | ○ |
| D1への発展 | 不向き | 手動なら可 | 工夫が必要 | 向いている |
| Cloudflareビルド枠 | 消費しない | 消費しない | 消費する（無料500回/月） | 消費しない |
| 初学者向け | ◎ | ○ | ○ | △ |
迷ったときの目安：
- とにかく試しに公開してみたい → ブラウザでドラッグ＆ドロップ
- ローカルで開発しながらコマンド一発で反映したい → Wrangler CLI
- GitHubと連携して最短で自動デプロイにしたい → Git連携
- 自動デプロイに加えてテスト・マイグレーション等の前処理も組み込みたい → GitHub Actions
2. 論点: Git連携 vs GitHub Actions
4つの中で、CGT（Git連携）と CGA（GitHub Actions）は「pushすると自動でデプロイされる」点が共通していて、最初は使い分けに迷いやすい。 ここでは少しだけ詳細に検討する。
2-1. 手軽さならGit連携
静的ファイルだけで完結するWebアプリなら、Cloudflare PagesのGit連携が一番手軽。Cloudflare DashboardでGitHubリポジトリを選べば、pushだけで自動デプロイできる。APIトークンやGitHub ActionsのYAMLは不要。
一方で、D1マイグレーション、テスト、ビルド前処理などをデプロイ前に実行したい場合は、GitHub Actions + Wranglerの方が扱いやすい。処理の順番をYAMLに明示できるため、あとからD1を使うデータ共有型Webアプリへ発展させやすい。
ただし GitHub Actions は事前準備（APIトークン作成、Secrets登録、YAML作成）の手間がかかる。静的サイトを自動デプロイしたいだけなら、Git連携の方が早い。
2-2. 無料枠の違い
Cloudflare Pages の Git連携では、Cloudflare側で build が走るため、Cloudflare Pages の build 回数を消費する。Free plan では月500回の上限がある（参考）。
GitHub Actions + Wrangler では、build や deploy コマンドの実行場所が GitHub Actions 側になるため、Cloudflare Pages の build 回数は消費しない。GitHub Actions Free の実行時間枠は Public リポジトリなら無制限、Private でも月2,000分（参考）。個人開発の通常運用（デプロイ1回あたり1〜2分程度）なら月1,000〜2,000回はデプロイできる計算で、上限に届くことはまずない。
つまり、無料枠の余裕という観点では GitHub Actions の方が有利。
2-3. D1まで見据えるならGitHub Actions
Cloudflare D1を使うデータ共有型Webアプリでは、デプロイ前にDBスキーマ更新（マイグレーション）を実行することがある。Cloudflare PagesのGit連携でもD1操作は可能だが、GitHub Actionsの設定と同じくらいの手間がかかり、手軽とは言い難い。
GitHub Actionsなら、d1 migrations apply と pages deploy を別々のステップとして書ける。何をどの順番で実行しているかが見えやすく、失敗時の切り分けもしやすい。
そのため、本サイトのロードマップでは、D1を使う データ共有型Webアプリ の前に、GitHub ActionsでCloudflareに公開する 手順を体験する構成にしている。
3. 本サイトのハンズオンで順番に体験する
本サイトには、Claude Code を使ってWebアプリを作り Cloudflare に公開する一連のハンズオンがロードマップとして並んでいる。順に進めることで、手動デプロイ、CLIデプロイ、Cloudflare側の自動デプロイ、GitHub Actions側の自動デプロイを段階的に体験できる構成にしている。
- ブラウザにドラッグ＆ドロップ
- Wrangler CLI
- Cloudflare PagesのGit連携
- Github Action (静的サイト)
- Github Action (D1を使うデータ共有型Webアプリ)
すでに経験済みの方法がある場合は、その次のステップから始めてもよい。
2026-05-17 (last updated: 2026-05-20) タツヲ (yto)