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

LEVEL 2 ハンズオン

前回ブラウザで作ったpages.devプロジェクトを、Claude Code経由のコマンド操作で更新できるようにする

このスライドで扱うこと

• Node.js のセットアップと Wrangler ログイン
• Claude Code で Webサイト・Webアプリを作る
• Wrangler コマンドで Cloudflare Pages にデプロイ
• 修正して再デプロイ
• 補足: Workers でのデプロイ方法、MCP について

1-1. 前回作ったサイトを使う場合

前回のハンズオンで作ったフォルダをそのまま作業フォルダとして使う

• 例: ~/Desktop/claude/sup、~/Desktop/claude/profile
• 中にすでに public/ フォルダがあって公開ファイルが入っている状態
• Claudeデスクトップ → Code → New session → 前回のフォルダを指定

1-2. 新しく作る場合

新しいフォルダで始める

• Finderで作業場所を作成（例: デスクトップ → claude → my-site）
• Claudeデスクトップ → Code → New session → ~/Desktop/claude/my-site を指定

2-1. Node.js のインストール確認

Claude Codeで実行：

node -v

• v22 以上 が表示されればOK
• それ以外、または分からない場合はNode.js 公式サイトから LTS版 の macOS 64-bit Installer（.pkg）を入れる
• インストール後 npm と npx も使えるようになる

補足: LTS と npx

• LTS (Long Term Support): 安定版。公式サイトには「LTS」と「最新/Current」があるが、LTSが定番
• npx: Node.js に付属するコマンド。ツールを一時的に取得して実行できる仕組み。これがあれば Wrangler はインストール不要

2-2. Wrangler でログイン

Cloudflareにログインする（一回だけ）

ターミナルから実行する流れにする

• Claudeデスクトップ右上の ビュー → ターミナル
• もしくは macOS の Terminal アプリ
• 何か聞かれてもそのまま進めてよい

npx wrangler login

2-2. なぜターミナルから実行するのか

Claude Code の !npx wrangler login でも実行はできるが…

• 環境によってブラウザが起動しないケースが多い
• そのため、本ハンズオンではターミナルから直接実行する流れにしている

2-2. Cloudflare OAuth認証

ブラウザが開いて OAuth 認証画面が表示される（すでにログイン済みなら何も起きない）

• Select account(s) で自分のアカウントを選ぶ
• あとは変更なしで進む
• 承認するとClaude Code経由のコマンド操作ができるようになる

2-2. ログイン状態を確認

Claude Codeに入力：

npx wrangler whoami

アカウント名やメールアドレスが表示されればOK

3-1. 前回作ったサイトを修正する場合

public/ に前回作ったファイルが入っている状態でClaude Codeに伝える：

public/ の中身は前回のハンズオンで作ったサイトです。これに手を入れていきます。

その後、見た目の変更を依頼するとデプロイ後に変化が確認しやすい：

ダークモード風にして

パステルカラーにして

3-2. 新しく作る場合

時計Webアプリを作るプロンプト例：

このフォルダに public フォルダを作ってください。
公開するファイルは public の中だけに置きます。
public/index.html を作って、簡単なWebページ（Hello Worldと現在時刻を表示）を作成してください。
派手な感じにしてください。

途中でファイル操作の許可を求められたら、その都度許可する。完成したらFinderで public/index.html をダブルクリックしてブラウザで表示確認

4-1. プロジェクト名を確認する

既存のpages.devプロジェクト一覧を表示：

npx wrangler pages project list

• 前回のハンズオンで作ったプロジェクト名（例: thisisapen）を確認
• ダッシュボードの Workers & Pages からも同じ情報が見える

4-2. デプロイ

既存プロジェクト名 を実際の名前（例: thisisapen）に置き換えて実行：

npx wrangler pages deploy ./public --project-name=既存プロジェクト名 --branch=main

• ./public のファイルがアップロード・本番反映される
• 実行結果に公開URL（https://既存プロジェクト名.pages.dev）が表示される
• ブラウザで開いて内容が更新されていることを確認

4-3. Wranglerだけで新規プロジェクトを作る

前回のハンズオンを通っていない、または別の新しいプロジェクトを作りたい場合

プロジェクト名のコツ:

• *.pages.dev はCloudflare全体でグローバルに一意
• 候補名を決めたら https://候補名.pages.dev をブラウザで開いて確認
• ページが表示される → 取られている
• Cloudflareの404風ページ → おそらく空き

4-3. 新規プロジェクト作成コマンド

プロジェクト作成（初回のみ）：

npx wrangler pages project create プロジェクト名 --production-branch=main

続けてデプロイ：

npx wrangler pages deploy ./public --project-name=プロジェクト名 --branch=main

--production-branch=main で本番ブランチ名を統一しておく

4-3. 名前衝突時の対処

返ってきたURLに意図せぬサフィックス（-abc など）が付いていた場合：

• npx wrangler pages project delete プロジェクト名 で削除して別名で作り直す
• もしくは独自ドメインを当てて pages.dev URL を実質使わない形にする（独自ドメインの設定）

5. 修正と再デプロイのサイクル

ファイル修正をClaude Codeに依頼：

index.html はダークな感じにして

修正を確認したら同じコマンドで再デプロイ：

npx wrangler pages deploy ./public --project-name=プロジェクト名 --branch=main

URLをブラウザで開いて変更反映を確認

次のハンズオン

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

Cloudflare Pages の Git連携機能で、ダッシュボードからリポジトリを選ぶだけで自動デプロイを設定する

Pages と Workers の違い

Cloudflareには Pages (*.pages.dev) のほかに Workers という同等のプラットフォームがあり、静的サイトをデプロイできる

• 公開URL: <プロジェクト名>.<アカウントサブドメイン>.workers.dev
• 名前衝突が起きない: アカウント固有サブドメインの下なのでサフィックス付与なし
• URLは長くなる: 例 https://my-site.tatsuo-xxx.workers.dev

wrangler.jsonc の作成

作業フォルダに wrangler.jsonc を作成：

以下のテンプレートで wrangler.jsonc を作成してください。
プロジェクト名は「my-site」、
YYYY-MM-DD は昨日の日付にしてください。

---
{
  "name": "プロジェクト名",
  "compatibility_date": "YYYY-MM-DD",
  "assets": {
    "directory": "./public"
  }
}

wrangler.jsonc の項目

Workersへのデプロイ

npx wrangler deploy

• 実行結果に表示される https://my-site.<アカウントサブドメイン>.workers.dev をブラウザで開いて確認
• このURLは固定で、常に最新のデプロイを指す

MCP は現状デプロイ非対応

Claudeの設定画面からCloudflare連携機能を追加できるが、試した範囲ではデプロイには対応していない

• デプロイできているように見えるケースは、裏側で Wrangler が呼ばれているだけの可能性
• このため、本ハンズオンでは確実に動く Wrangler の直接実行 を採用

参考: Cloudflare MCPでできること・できないこと

認証がうまくいかない時

Cloudflareの認証で詰まったら順に試す

• スマホのテザリングに切り替えてみる
• VPN を使っている場合は切る
• ブラウザのシークレットモードで開き直す
• Safari で開いてみる

Wranglerのログイン情報はローカルに保存されるので、npx wrangler login の再実行は通常不要

--branch=main についての注意

ブラウザのドラッグ＆ドロップで作ったプロジェクトの本番ブランチは main がデフォルト

• 違う値（例: --branch=production）を指定すると、その名前のプレビューブランチ扱いになる
• 結果として production.既存プロジェクト名.pages.dev のような別URLにデプロイされる
• 既存プロジェクト名.pages.dev には反映されないので注意

※ Cloudflare側の仕様で将来変わる可能性あり

CLAUDE.md にデプロイコマンドを書いておく

Claude Code から Wrangler コマンドを実行すると、同じセッション内では「デプロイして」と依頼するだけで実行されるようになる

セッションをまたいでも同じようにしたい場合は、作業フォルダに CLAUDE.md を作って書いておく：

デプロイ: npx wrangler pages deploy ./public --project-name=プロジェクト名 --branch=main

ありがとうございました

タツヲ (@yto)

vibecodingnotes.com