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

LEVEL 3 ハンズオン

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

このスライドで扱うこと

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

前提と立ち位置

• 前回（WRG）は Wrangler コマンドでデプロイした
• 今回はその先として、Cloudflare ダッシュボードでリポジトリを選ぶだけで設定完了
• 以降は変更履歴を残しつつ GitHub 経由で公開できる

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つで。

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

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

まずGitHubにpushしておく

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

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

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

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

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

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

3-2. Create application

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

3-2. Git連携を開始

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

初回は GitHub との連携認可を求められる

3-2. GitHub App をインストール

Cloudflare Workers & Pages GitHub App のインストール画面で:

• Only select repositories を選んで my-first-site だけにアクセスを許可するのが安全（Cloudflare 公式推奨）
• All repositories が選べる環境ではそれでもよい

すでに別リポジトリで App をインストール済みの場合、リポジトリ追加だけの画面になることも。うまくいかなければ GitHub の Settings → Applications で一度 Uninstall して最初からやり直す

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連携は静的ファイルを置くだけの公開には手軽だが、「デプロイ時に何かを実行したい」用途には最適とは言い難い

デプロイ仕組みを切り替える

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

• ワークフローファイル（YAML）にデプロイ手順をコード管理できる
• マイグレーション等の前処理を後から差し込みやすい

次のハンズオン

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

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

Free プランの制限

Cloudflare Pages の Free プランでは Git連携経由のビルドが以下に制限される:

• 月500回まで
• 同時実行1
• タイムアウト20分

静的サイトの push 頻度であれば通常は問題にならないが、CI で何度も push する場合は注意

その他

• Cloudflare Workers & Pages GitHub App のリポジトリ設定は GitHub の Settings → Applications からあとで追加・変更できる
• 誤って Pages プロジェクトを削除しても、再度 Git連携で作り直せばよい（リポジトリの内容が真実）
  • ただし pages.dev のプロジェクト名は再取得できない場合がある
• 自分で CI/CD をコード管理したい場合は GitHub Actions 版の方が向く
• Cloudflare は長期的に Pages の機能を Workers へ統合する方針だが、2026年時点では強制移行の期限は未発表

ありがとうございました

タツヲ (@yto)

vibecodingnotes.com