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

LEVEL 4 ハンズオン

GitHubにpushするだけで GitHub Actions が Cloudflare Pages に自動デプロイする仕組みを作る。データ共有型Webアプリ（D1）への下地でもある

このスライドで扱うこと

• GitHub・Git の事前準備
• Claude Code で一人完結型Webアプリを作る
• Cloudflare の Account ID・APIトークンを準備、GitHub に Secrets 登録
• .github/workflows/deploy.yml で自動デプロイ
• push → 自動デプロイのサイクル
• 修正と反映を繰り返してWebアプリを仕上げる

前回との違い

• 前回（CGT）: Cloudflare Pages の Git連携で自動デプロイ
• 今回: 同じ自動デプロイを GitHub Actions で組む

ワークフローファイル（YAML）にデプロイ手順をコード管理しておくと、後から D1 のマイグレーションなど 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 配下に置く構成にする（.github/workflows/・.gitignore などが公開されないように）

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. Account ID・APIトークン・Secrets

GitHub ActionsでCloudflare自動デプロイを設定する の 2章「事前準備」 を参照して以下を行う:

• Account ID の確認
• APIトークンの作成
• GitHub への Secrets 登録（CLOUDFLARE_API_TOKEN / CLOUDFLARE_ACCOUNT_ID）

完了したらここに戻る

3-3. ワークフローとは

GitHub Actions は GitHub に組み込まれた自動化の仕組み

• 「pushされたら〇〇を実行する」処理をファイルに書ける
• 自動化の仕組み = ワークフロー
• それを定義するファイル = ワークフローファイル（YAML）
• 置き場所: .github/workflows/ 配下

3-3. プロジェクト名を決める

ワークフロー内で Cloudflare Pages のプロジェクト名を指定する → 公開URL https://プロジェクト名.pages.dev

• *.pages.dev はグローバルに一意
• すでに使われていると末尾に英数3文字が付く
• 候補名を https://候補名.pages.dev でブラウザで開いて空き確認するとよい

例: my-first-site.pages.dev がすでに使われていたら oreore-site に変える（以降「プロジェクト名」を選んだ名前に読み替える）

3-3. deploy.yml を作成

以下のテンプレートで .github/workflows/deploy.yml を作成してください。
プロジェクト名は「my-first-site」としてください。

---
name: Deploy to Cloudflare Pages
on:
  push:
    branches: [main]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Create Pages project (初回のみ)
        continue-on-error: true
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          wranglerVersion: "4"
          command: pages project create プロジェクト名 --production-branch=main
      - name: Deploy to Cloudflare Pages
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          wranglerVersion: "4"
          command: pages deploy ./public --project-name=プロジェクト名

3-3. ワークフローの流れ

push をトリガーに、以下の順で実行される:

1. コードを取得 (actions/checkout) — GitHubのファイルをCI環境に展開
2. Pagesプロジェクトを作成 (pages project create) — 初回のみ実行。2回目以降は失敗するが continue-on-error: true で無視
3. Pagesにデプロイ (pages deploy) — 静的ファイルを本番環境に反映

各ステップは GitHub Secrets（CLOUDFLARE_API_TOKEN・CLOUDFLARE_ACCOUNT_ID）で認証

push して自動デプロイ

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

• push を検知して GitHub Actions が起動 → Cloudflare Pages にデプロイ
• しばらく（1〜2分）待ってから公開URL（https://プロジェクト名.pages.dev）を確認
• 正確なURLは Compute → Workers & Pages → プロジェクト名 で確認できる

GitHubの Actions タブでデプロイの進行状況を確認できる

修正のプロンプト例

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

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

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

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

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

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

しばらく待ってから公開URLにアクセスして確認

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

ここまでで作ったもの

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

次はデータ共有型 — チャットやランキングのように、みんなでデータを共有するアプリ

• データベースとバックエンドが必要になる
• GitHub でコードを管理する流れは同じ、その先の構成が変わるイメージ
• セキュリティ上、リポジトリは Private にしておくのが安心

次のハンズオン

• みんなで使えるデータ共有型WebアプリをCloudflareで作るための基礎知識 — データ共有型の構成を理解する
• Claude Codeでデータ共有型Webアプリを作ってCloudflareで公開する — 実際にデータ共有型Webアプリを作る

備忘録（1/2）

• wrangler.toml は不要 — 静的ファイルのみのサイトであれば、設定ファイルなしでデプロイできる
• Pagesプロジェクトの手動作成は不要 — ワークフローの Create Pages project ステップが初回のみ自動で作成する。2回目以降は失敗するが continue-on-error: true で無視される
• CLOUDFLARE_ACCOUNT_ID は Workers & Pages の右カラムで確認できる

備忘録（2/2）

• User / User Details: Read 権限は Wrangler がトークンの有効性を確認するために使う。なくても動くことがあるが、認証エラーの原因になる場合があるので設定しておくのが無難
• Cloudflare は長期的に Pages の機能を Workers へ統合する方針を示しているが、2026年時点では強制移行の期限は発表されておらず、Pages は引き続き利用できる

ありがとうございました

タツヲ (@yto)

vibecodingnotes.com