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

CGA Slide CloudflarePagesGitHubGitHubActions

前回のハンズオンでは、Cloudflare Pages の Git連携で自動デプロイを設定した。今回は同じ自動デプロイを GitHub Actions で組む方法を扱う。これは次のステップで扱うデータ共有型Webアプリ（D1）への下地でもある。データ共有型ではDBのスキーマ更新（マイグレーション）などpush時に自動実行したい処理が増えるため、ワークフローファイル（YAML）にデプロイ手順をコード管理しておけると後から差し込みやすい。

今回のハンズオンでは、一人完結型Webアプリ（参考）を作って、GitHub Actions で Cloudflare に公開する。前回と違うのはデプロイの組み方の部分だけで、他はほぼ同じ流れ。

1. GitHub・Gitの準備

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

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

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

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

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

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

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

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 側の API トークンを GitHub の Secrets に登録するため、先にリポジトリを作っておく必要がある。

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

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

3. Cloudflare Pagesの設定

GitHubにpushすると、GitHub ActionsがCloudflare Pagesへのデプロイを自動実行する。この章ではその準備をする。

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

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

3-2. Account ID確認・APIトークン作成・Secrets登録

GitHub ActionsでCloudflare自動デプロイを設定するの**2章「事前準備」**を参照して、Account IDの確認・APIトークンの作成・GitHubへのSecrets登録を行う。完了したらここに戻る。

3-3. GitHub Actionsワークフローを作成する

2で開いた Claude Code のセッションで続けて作業する。

GitHub Actionsは、GitHubに組み込まれた自動化の仕組み。「pushされたら〇〇を実行する」という処理をファイルに書いておくと、GitHubが自動で実行してくれる。この自動化の仕組みをワークフロー、それを定義するファイルをワークフローファイル（workflow file）と呼ぶ。ワークフローファイルは .github/workflows/ 配下に置く。

ワークフローの中で Cloudflare Pages のプロジェクト名を指定する。これが公開URL（https://プロジェクト名.pages.dev）になる。すでに使われている名前だと末尾に英数3文字が付くので、ブラウザで https://候補名.pages.dev を開いて空きを確認しておくとよい。リポジトリ名と揃える必要はないが、揃えると分かりやすい。

例：my-actions-pages.pages.dev がすでに使われていたら、プロジェクト名を oreore-site などにする（以降の手順では「プロジェクト名」を選んだ名前に読み替える）。

ワークフローファイル .github/workflows/deploy.yml を以下の内容で作成するよう Claude Code に依頼する。

サンプルプロンプト：

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

---
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=プロジェクト名
---

ワークフローの流れ：

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

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

各ステップでCloudflareの操作が必要なものは、GitHubのSecrets（CLOUDFLARE_API_TOKEN・CLOUDFLARE_ACCOUNT_ID）を使って認証する。

4. 作ったWebアプリをアップして公開する（デプロイ）

Claude Codeに依頼する：

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

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

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

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

5. Webアプリの修正と反映

修正依頼プロンプト例:

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

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

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

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

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

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

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

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

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

6. 次のステップ

ここまでで作ったのは一人完結型Webアプリ——データが自分の端末に保存される、シンプルな構成。チャットやランキングのように、みんなでデータを共有するアプリ（データ共有型）に挑戦するには、データベースとバックエンドが必要になる。GitHubでコードを管理する流れは同じで、その先の構成が変わるイメージ。なお、データ共有型はセキュリティ上の考慮も必要になるため、GitHubのリポジトリは Private にしておくのが安心。

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

備忘録

wrangler.toml は不要 — 静的ファイルのみのサイトであれば、設定ファイルなしでデプロイできる
Pagesプロジェクトの手動作成は不要 — ワークフローの「Create Pages project」ステップが初回のみ自動で作成する。2回目以降は失敗するが continue-on-error: true で無視される
CLOUDFLARE_ACCOUNT_ID は Workers & Pages の右カラムで確認できる
User / User Details: Read 権限は Wrangler がトークンの有効性を確認するために使う。なくても動くことがあるが、認証エラーの原因になる場合があるので設定しておくのが無難
Cloudflare は長期的に Pages の機能を Workers へ統合する方針を示しているが、2026年時点では強制移行の期限は発表されておらず、Pages は引き続き利用できる

2026-05-01 (last updated: 2026-05-24) タツヲ (yto)

☕️ Vibecoding Notes を応援