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

CGT3SlideCloudflarePagesGitHub

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

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

1. GitHub・Gitの準備

GitHubアカウントの作成、リポジトリの作成、Gitインストール、SSH設定、cloneまではGitHubとGitのセットアップを参照のこと。

次章以降は以下の状態（GitHubとGitのセットアップ終了後の状態）から進める。

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

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

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

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

まずは公開ファイル用のフォルダを準備する（リポジトリのルートにある既存の index.html は不要なので削除）。

prompt
public フォルダを作って。公開ファイルは public 配下だけに置く構成にする。
リポジトリのルートにある index.html は不要なので削除して。

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

prompt
HTML+JavaScriptでポモドーロタイマーを作って！
public/index.html 1ファイルで作って。
prompt
複利計算機をHTML+JavaScriptで作って！
構成はHTMLファイル(public/index.html)が1つ。
prompt
最大60秒のカウントダウンタイマーをHTML+JavaScriptで作って！
秒数を入力してスタート・リセットできるようにしたい。
HTMLファイル1つ（public/index.html）にまとめて。
prompt
TODOリストをHTML+JavaScriptで作って！
項目の追加・削除ができて、ページを閉じても消えないようにしたい。
public/index.html に書いて。ファイルは1つで。

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

Claudeデスクトップアプリ

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

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

3. Cloudflare Pagesにデプロイ

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

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

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

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

まず、ここまでの作業内容をGitHubにpushしておく（Cloudflare側がリポジトリの中身を読み取ってビルドするため、先にpushされている必要がある）。Claude Codeに依頼する：

prompt
変更をgitでコミットしてpushして（git push -u origin main で）

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

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

Create application

Create application

そこから Import an existing Git repository の Get started をクリック。初回はGitHubとの連携認可を求められるので、Cloudflare GitHub App をインストールしてリポジトリへのアクセスを許可する（すべて、または my-first-site のみでもよい）。

Get started

Get started

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

Select a repository

Select a repository

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

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

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

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

Drag to upload

Save and Deploy

4. 修正して再デプロイ

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

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

修正依頼プロンプト例:

prompt
背景をもっと明るくしてください
prompt
数値入力をスライダーにしてください
prompt
ボタンの間隔をもっと広げて

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

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

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

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

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

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

5. 次のステップ

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

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

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

備忘録

2026-05-17　タツヲ (yto)

☕️ この記事が役に立ったら Vibecoding Notes を応援