Claude CodeでWebアプリを作ってGit連携でCloudflareに公開する

CGT CloudflarePagesGitHubGitIntegration

Wranglerのハンズオンでは、Claude Codeから Wrangler コマンドでCloudflare Pagesにデプロイする方法を扱った。この記事ではその発展として、Cloudflare Pages の Git連携で GitHub リポジトリとつなぎ、GitHubに変更を反映するだけで自動デプロイされる仕組みを作る。Cloudflareダッシュボードでリポジトリを選ぶだけで設定が完了し、以降は変更履歴を残しつつ GitHub 経由で公開できる。

今回のハンズオンでは、一人完結型Webアプリ（参考）を作って、Cloudflare Pages の Git連携で公開する。

本記事の位置付け

Cloudflare に手元のサイトを公開したいだけなら、こんなざっくりとした依頼でも進められる：

このフォルダの中身を GitHub 経由で Cloudflare に公開したい

Claude Code はアカウントの有無や環境などを聞きながら、最終的にデプロイまで案内してくれる。ただし、その過程で取る道は人によって違う。

本記事では、その中で Cloudflare Pages の Git連携で自動デプロイにする 道筋を、つまずきにくい順序で追っていく。

1. Claude Code でWebアプリを作成

このハンズオンでは GitHubリポジトリ名と Cloudflare Pages プロジェクト名を付ける。これらはアカウント内（Pages 名は Cloudflare 全体）で重複できないので、2回目以降に前回と同じ名前を使うと衝突する。最初に自分だけの ベース名（例: git-pages-yto）を決め、この記事に出てくる my-git-pages を自分のベース名に読み替えて進める。

本記事は Claude Code を例に進めるが、Codex など他のコーディングエージェントでも同じプロンプトで進められる。以降、プロンプトを渡す相手をまとめて エージェント と呼ぶ。

Finder で ~/claude フォルダ（なければ作る）の中に、ベース名の作業フォルダを作る（例: my-git-pages）。

Claudeデスクトップアプリを起動。

Code（Claude Code）を選択 → New session をクリック → 作業フォルダを指定（例: ~/claude/my-git-pages）

セッションを始める前に、画面左下のモード選択を 編集を承認 にしておく（自動モード にしない）。自動モードだと Claude がファイルの変更やコマンドを確認なしで一気に進めてしまい、意図しない結果になる事故が起きやすい。まずは一つずつ承認しながら進めるのが安全。

公開ファイル（HTMLなど）は public/ フォルダに置く構成にする。設定ファイルや作業用ファイルが公開されないようにするため。

public フォルダを作って。公開ファイルは public 配下だけに置く構成にする。

次に、public/index.html を作る。プロンプト例:

HTML+JavaScriptでポモドーロタイマーを作って！
public/index.html 1ファイルで作って。

複利計算機をHTML+JavaScriptで作って！
構成はHTMLファイル(public/index.html)が1つ。

最大60秒のカウントダウンタイマーをHTML+JavaScriptで作って！
秒数を入力してスタート・リセットできるようにしたい。
HTMLファイル1つ（public/index.html）にまとめて。

TODOリストをHTML+JavaScriptで作って！
項目の追加・削除ができて、ページを閉じても消えないようにしたい。
public/index.html に書いて。ファイルは1つで。

右上のところからプレビューを選ぶと表示される（自動で表示されることも）。

Claude Codeでポモドーロタイマーを作成

なお、途中、操作の許可を求めてくることがあるので対応する。

2. GitHub に push

作ったアプリを GitHub に置く。次章で Cloudflare 側がリポジトリの中身を読み取ってビルドするため、先に GitHub にコードが push されている必要がある。

事前に Git と GitHub の基本を終えて、次の状態になっていること：

GitHub アカウント作成済み
gh CLI インストール・認証済み（gh auth login 済み）

GitHub の MCP プラグインはオフにしておく: Claudeデスクトップアプリの 設定 → カスタマイズ → プラグイン にある Github（GitHub 公式 MCP サーバ）をインストールしていると、Claude Code が gh・ローカルの git ではなく GitHub API 経由で操作してしまい、手順どおりに進まないことがある。本ハンズオンは gh に統一するので、入れている場合は無効化しておく（詳しくは GBA 4章を参照）。

一番簡単なのはエージェントに頼む方法。次のように頼めば、リポジトリの初期化からコミット・作成・push までまとめてやってくれる：

GitHubに非公開のリポジトリ <ベース名> を作って、今のフォルダの内容をpushして

ターミナルで手順を踏みたい場合は、ビュー → ターミナル から次を実行する（→ GBA 4-5）：

git init
git add -A
git commit -m "初回コミット"
gh repo create my-git-pages --private --source=. --remote=origin --push

gh repo create --source=. --push は「ローカルのコミットを GitHub に上げる」コマンド。先に git init でフォルダをリポジトリ化し、コミットを1つ作ってから実行する必要がある（コミットが無いと push しても中身が上がらない）。my-git-pages は自分のベース名に読み替える。

3. Cloudflare Pagesにデプロイ

Cloudflare PagesにGitHubリポジトリを連携すると、リポジトリに変更がpushされるたびに自動でビルド・デプロイが実行される。この章ではその連携を設定する。

3-1. Cloudflareアカウントを作る

Cloudflareアカウントがなければ作る。こちらの手順(1-1)を参照のこと。

3-2. GitHub連携でPagesプロジェクトを作る

Cloudflare ダッシュボードを開き、左メニューの Compute → Workers & Pages をクリック、右上の Create application をクリック。

下にある目立たない Looking to deploy Pages? の Get started をクリック。

Create application

そこから Import an existing Git repository の Get started をクリック。

Get started

初回はGitHubとの連携承認を求められる。まず、Deploy a site from your account のページの Connect GitHub をクリックする。

Connect GitHub

GitHub の Install & Authorize Cloudflare Workers and Pages のページへ移動するので、そこで All repositories を選ぶ（どのリポジトリをデプロイするかは、このあとの画面で選ぶので、ここで個別に指定する必要はない）。組織（Organization）アカウントでは権限ポリシーの都合で All repositories を選べないことがあるが、その場合は個人アカウントを作成して使うこと（このハンズオンは個人アカウント前提）。

うまく連携できない場合は、GitHub の Settings → Applications → Installed GitHub Apps で Cloudflare Workers and Pages の Configure を開き、Repository access を All repositories に設定して Save する。

Install & Authorize Cloudflare Workers and Pages

Install & Authorize をクリックすると Cloudflare のページへ移動する。初回の作業はここまで。

リポジトリ一覧から自分のリポジトリ（<ベース名>）を選び、Begin setup をクリック。

Select a repository

Set up builds and deployments のページが開く。設定するのは以下の2項目：

Project name に <ベース名> を入れる（リポジトリ名と同じでよい。揃えると管理しやすい）。公開URLの一部になる（https://<ベース名>.pages.dev）

入力欄の直下に割り当てられるURLが表示される。<ベース名>.pages.dev のように入力した名前がそのままならば競合なし。末尾に文字が付く場合はすでに使われているので、別の名前に変えてもよい。

Build output directory に public と入力：デプロイ対象を public/ に絞るため

その他の項目（Build command、Root directory など）は空欄のままで構わない。public/ 配下の静的ファイルがそのまま配信される。

Save and Deploy をクリックするとビルドが始まる。完了すると公開URL（https://プロジェクト名.pages.dev）が表示されるのでアクセスして確認する。

Save and Deploy

4. 修正して再デプロイ

ここまでで、GitHubのmainブランチにpushすると Cloudflare Pages が自動でビルド・デプロイする仕組みが整った。以降は エージェントで修正 → push → 自動デプロイ の繰り返しになる。

公開URLや過去のデプロイ履歴は Compute → Workers & Pages → プロジェクト名で確認できる。

修正依頼プロンプト例:

背景をもっと明るくしてください

数値入力をスライダーにしてください

ボタンの間隔をもっと広げて

参考: AIへの指示に使えるUI用語集：動く実例つき

途中、操作の許可を求めてくることがあるので対応する。

納得したら、GitHubへのアップを依頼:

変更をgitでコミットしてpushして

しばらく（1〜2分）待ってから公開URLにアクセスして確認。

このように修正と反映を繰り返して、Webアプリを仕上げよう！

5. 次のステップ

ここまでで作ったのは一人完結型Webアプリ。データが自分の端末に保存される、シンプルな構成。簡単な静的サイトや一人完結型Webアプリの運用だけならここまでの知識で十分。

ハンズオンとしての次の山場は、チャットやランキングのように複数人でデータを共有するデータ共有型Webアプリ。データベース（Cloudflare D1）とバックエンド（Pages Functions）が必要になり、もう一歩進んだ応用に入る。

Claude Codeでデータ共有型Webアプリを作ってCloudflareに公開する：D1とPages Functionsを使う掲示板アプリを公開する

WebアプリではなくWebサイトの運用に進みたい場合（自分のブログを開設するなど）は、応用編の Astro ハンズオンへ。デプロイは Cloudflare Pages の Git連携のままで、ここまでの知識で進められる。

Claude Code と Astro でブログを作って Cloudflare Pages で公開する：Astro 公式ブログテンプレートで雛形を作り、Git連携で公開する

備忘録

Cloudflare Pages の Free プランでは Git連携経由のビルドが 月500回まで・同時実行1・タイムアウト20分 に制限される。静的サイトのpush頻度であれば通常は問題にならないが、CIで何度もpushする場合は注意
Cloudflare Workers and Pages の GitHub App のリポジトリ設定は、GitHub の Settings → Applications → Installed GitHub Apps → Configure からあとで変更できる（Uninstall は不要）
Cloudflareで作成したPages プロジェクトを誤って削除しても、再度 Git連携で作り直せばよい（リポジトリの内容が真実）。ただし pages.dev のプロジェクト名は再取得できない場合がある
自分でCI/CDをコード管理したい場合、テスト・lint・マイグレーションなどpush前に挟みたい場合は、Git連携ではなく GitHub Actions版（Claude CodeでWebアプリを作ってGitHub ActionsでCloudflareに公開する）の方が向く
Cloudflare は長期的に Pages の機能を Workers へ統合する方針を示しているが、2026年時点では強制移行の期限は発表されておらず、Pages は引き続き利用できる

2026-05-17 (last updated: 2026-07-13) タツヲ (yto)

☕️ Vibecoding Notes を応援