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

今回のハンズオンでは、一人完結型Webアプリ（参考）を作る。シンプルな構成なので、ゼロから公開まで一気に進められる。

1. GitHub・Gitの準備

GitHubアカウントの作成、リポジトリの作成、Gitインストール、SSH設定、cloneまではGitHub初心者ガイドを参照のこと。

3章以降は以下の状態から進める。

2. Cloudflare Pagesの設定

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

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

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

2-2. Account IDを確認する

Cloudflareダッシュボード → Compute → Workers & Pages を開く。

2-3. APIトークンを作成する

右上👤アイコン → Profile → API Tokens → Create Token → Create Custom Token

作成されたトークンをコピーしておく（一度しか表示されない）。

2-4. GitHubにSecretsを登録する

GitHubリポジトリ → Settings → Secrets and variables → Actions → New repository secret

Secret名 値
CLOUDFLARE_API_TOKEN 上記で作成したトークン
CLOUDFLARE_ACCOUNT_ID CloudflareのAccount ID

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

GitHub Actionsは、GitHubに組み込まれた自動化の仕組み。「pushされたら〇〇を実行する」という処理をファイルに書いておくと、GitHubが自動で実行してくれる。この自動化の仕組みをワークフローと呼ぶ。

.github/workflows/deploy.yml を以下の内容で作成するよう Claude Code に依頼する。

サンプルプロンプト：

以下のテンプレートで .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 . --project-name=アプリ名
---

ワークフローの流れ：

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

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

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

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

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

Code（Claude Code）を選択 → New session をクリック → 作業ディレクトリを指定（~/Desktop/claude/my-first-site）

あとはプロンプトを入力して、index.html を編集する。

プロンプト例:

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

Claude Desktop App

なお、途中いろいろ許可を求めてくるので対応する。

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

Claude Codeに依頼する：

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

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

GitHubへのpushを検知してGitHub ActionsがCloudflare Pagesに自動でデプロイする。しばらく（1〜2分）待ってから公開URLにアクセスして確認する。

公開URLは https://my-first-site.pages.dev の形式になる（プロジェクト名によっては末尾に数字が付く場合がある）。正確なURLは Compute → Workers & Pages → プロジェクト名 で確認できる。

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

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

修正依頼プロンプト例:

途中いろいろ許可を求めてくるので対応する。

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

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

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

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

6. Tips

プロンプトの工夫

PWA（スマホアプリのように使えるWebアプリ）にする

作ったWebアプリをPWA（Progressive Web App）にすると、スマートフォンのホーム画面に追加してネイティブアプリのように起動できるようになる。

claude-github-7-1-a.jpg

PWAの動作方式は色々あるが、たとえばこのような方式がおすすめ：

manifest.json とService Workerのスクリプト（sw.js など）を追加するだけで実現できる。Claude Codeに相談してみよう。

このWebアプリをPWAにしたい。
アクセスのたびにバージョンチェックして更新し、オフラインはキャッシュで動くようにしたい。

7. 備忘録

8. 次のステップ

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

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