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

CGT Slide CloudflarePagesGitHub

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

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

1. GitHub・Gitの準備

Git と GitHub の基本を一通り終えて、GitHub アカウントと gh の認証が済んでいる状態から進める。

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

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

Finder で ~/Desktop/claude フォルダ（なければ作る）の中に作業フォルダ my-git-pages を作る。

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

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

公開ファイル（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でポモドーロタイマーを作成

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

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

GBA 4-5 と同じ要領で、ビュー → ターミナル から実行する：

gh repo create my-git-pages --private --source=. --remote=origin --push

3. Cloudflare Pagesにデプロイ

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

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

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

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

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

Create application

そこから Import an existing Git repository の Get started をクリック。初回はGitHubとの連携認可を求められる。Cloudflare Workers & Pages GitHub App のインストール画面で、Only select repositories を選んで my-git-pages だけにアクセスを許可するのが安全（Cloudflare 公式の推奨もこちら）。All repositories（すべて）が選べる環境ではそれでもよい。

すでに別のリポジトリで App をインストール済みの人は、リポジトリ追加だけの画面になる場合がある。その場合は my-git-pages を追加する。うまくいかない場合は GitHub の Settings → Applications で一度 Uninstall して、本記事の手順を最初からやり直すと確実。

Get started

リポジトリ一覧から my-git-pages を選び、Begin setup をクリック。

Select a repository

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

Project name に好きなプロジェクト名（例：thisisapen）を入れる。公開URLの一部になる（https://プロジェクト名.pages.dev）。リポジトリ名と揃える必要はないが、揃えると分かりやすい

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

Root directory (advanced) をクリックして展開し、入力欄に public と入力 — デプロイ対象を public/ に絞るため

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

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

Save and Deploy

4. 修正して再デプロイ

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

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

修正依頼プロンプト例:

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

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

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

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

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

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

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

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

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

5. 次のステップ

ここまでで作ったのは一人完結型Webアプリ——データが自分の端末に保存される、シンプルな構成。静的なWebサイト・Webアプリの運用だけならここまでで十分。ここから先はデータベースを使うような、もう一歩進んだ応用編。

次の山場は、チャットやランキングのように複数人でデータを共有するデータ共有型Webアプリ。データベースとバックエンドが必要になり、デプロイのたびにDBスキーマ更新（マイグレーション）などの処理を自動実行したくなる。

その準備として、デプロイの仕組みを Cloudflare Pages の Git連携から GitHub Actions に切り替えておく。Git連携は静的ファイルを置くだけの公開には手軽である一方、データ共有型のような「デプロイ時に何かを実行したい」用途には最適とは言い難い。切り替えにはすこし手間がかかるが、GitHub Actions ならワークフローファイル（YAML）にデプロイ手順をコード管理できるので、マイグレーション等の前処理を後から差し込みやすい。

Claude CodeでWebアプリを作ってGitHub ActionsでCloudflareに公開する — Git連携を GitHub Actions に切り替え、データ共有型に進む下地を作る

備忘録

Cloudflare Pages の Free プランでは Git連携経由のビルドが 月500回まで・同時実行1・タイムアウト20分 に制限される — 静的サイトのpush頻度であれば通常は問題にならないが、CIで何度もpushする場合は注意
Cloudflare Workers & Pages GitHub App のリポジトリ設定は、GitHub の Settings → Applications からあとで追加・変更できる
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-05-24) タツヲ (yto)

☕️ Vibecoding Notes を応援