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

LEVEL 3 ハンズオン

Cloudflare Pages の Git連携で GitHub リポジトリとつなぎ、GitHubに変更を反映するだけで自動デプロイされる仕組みを作る

このスライドで扱うこと

• GitHub・Git の事前準備
• Claude Code で一人完結型 Web アプリを作る
• Cloudflare Pages の Git連携でGitHubリポジトリと接続
• push するだけで自動デプロイされる流れ
• 修正→push→自動デプロイのサイクル

GitHub と Git をセットアップする

詳細は GitHubとGitのセットアップ を参照

次章以降は以下の状態から進める前提:

• GitHubアカウント作成済み
• リポジトリ my-first-site 作成済み（名前は別でもよい）
• ~/Desktop/claude/my-first-site に clone 済み
• ~/Desktop/claude/my-first-site/index.html がすでにある

セッション開始と公開フォルダ準備

Claudeデスクトップ → Code → New session → ~/Desktop/claude/my-first-site を指定

公開ファイルは ./public 配下に置く構成にする:

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

Webアプリのプロンプト例

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

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

Webアプリのプロンプト例（続き）

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

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

作例: ポモドーロタイマー

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

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

Cloudflareアカウントがなければ作る

詳細はSUPハンズオンの1-1を参照

3-2. まず変更をGitHubにpush

Cloudflare側がリポジトリの中身を読み取るため、先にpushされている必要がある

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

途中で操作の許可を求められたら対応する

3-2. Create application

ダッシュボード左メニュー Compute → Workers & Pages → 右上 Create application

3-2. Git連携を開始

Import an existing Git repository の Get started をクリック

初回はGitHubとの連携認可を求められる。Cloudflare GitHub App をインストールしてリポジトリへのアクセスを許可（全て、または my-first-site のみでもOK）

3-2. リポジトリを選ぶ

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

3-2. ビルド設定（2項目だけ）

Set up builds and deployments のページで設定するのは2項目：

• Project name: 好きな名前（例 thisisapen）。公開URLの一部になる
• Root directory (advanced) を展開し、入力欄に public と入力 — デプロイ対象を ./public に絞る

Build command、Build output directory などは空欄でOK。./public 配下の静的ファイルがそのまま配信される

3-2. プロジェクト名の競合に注意

入力欄の直下に割り当てられるURLが表示される

• thisisapen.pages.dev のように入力した名前がそのまま → 競合なし
• thisisapen-abc.pages.dev のように末尾に文字が付く → すでに使われている、別名を検討

3-2. デプロイ

Save and Deploy をクリックするとビルドが始まる

完了すると公開URL（https://プロジェクト名.pages.dev）が表示される。アクセスして確認

サイクルの流れ

• GitHubのmainブランチにpushすると Cloudflare Pages が自動でビルド・デプロイ
• 公開URLや過去のデプロイ履歴は Compute → Workers & Pages → プロジェクト名 から確認できる
• pushしてから反映まで1〜2分待つ

修正依頼のプロンプト例

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

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

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

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

納得したらpushしてデプロイ

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

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

このサイクルを繰り返してWebアプリを仕上げる

ここまでで作ったもの

一人完結型Webアプリ — データが自分の端末に保存される、シンプルな構成

静的なWebサイト・Webアプリの運用だけならここまでで十分

ここから先はデータベースを使うような、もう一歩進んだ応用編

次の山場: データ共有型Webアプリ

チャットやランキングのように複数人でデータを共有するアプリ

• データベースとバックエンドが必要
• デプロイ時にDBスキーマ更新（マイグレーション）などの前処理を自動実行したい

その準備としてデプロイ仕組みを Git連携から GitHub Actions に切り替えておく

次のハンズオン

• Claude CodeでWebアプリを作ってGitHub ActionsでCloudflareに公開する

Git連携を GitHub Actions に切り替え、データ共有型に進む下地を作る

ありがとうございました

タツヲ (@yto)

vibecodingnotes.com