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

WRG Slide CloudflarePagesWrangler

前回のハンズオンでは、Cloudflareに静的ファイルをドラッグ＆ドロップしてWebサイトをデプロイ（本番環境への公開・反映）した。今回はその発展として、同じpages.devプロジェクトをClaude Code経由のコマンド操作で更新できるようにする。ドラッグ＆ドロップで作ったプロジェクトはWranglerからもそのまま操作できるので、切り替えはスムーズ。これにより、Claude Codeにデプロイ依頼ができ、開発作業がはかどる。

1. 作業場所を確保してClaude Codeを起動する

これからWranglerでデプロイする作業フォルダを準備する。前回のハンズオンで作ったサイトをそのまま使う場合と、新しく作る場合とで進め方が変わる。

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

前回のハンズオンで作ったフォルダ（~/Desktop/claude/sup ~/Desktop/claude/profile など）をそのまま作業フォルダとして使う。中にはすでに public/ フォルダがあって公開ファイルが入っている。

Claudeデスクトップアプリを起動 → Code → New session → 作業フォルダを指定（前回のフォルダのパス）。

1-2. 新しく作る場合

Finderで作業場所（フォルダ）を作成する。例えば、デスクトップ → claude → my-site フォルダ。

次に、Claudeデスクトップアプリを起動。Code（Claude Code）を選択 → New session をクリック → 作業フォルダを指定（~/Desktop/claude/my-site）。

2. Node.js のセットアップ

Wranglerラングラーは Cloudflare が公式に提供する CLI ツール（コマンドラインツール）で、 Cloudflare へのデプロイに使う。 Wrangler は Node.jsノードジェイエス上で動くが、npx を使えばインストール不要で実行できる。このハンズオンでは Node.js を用意してWranglerでログインしておけば準備完了。

Node.jsのインストール確認からWranglerのログインまで、Claude Codeから行う。

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

インストール済みか確認：

node -v

node -v で v22以上 が出ていれば次に進む。それ以外、またはよくわからない場合はNode.js 公式サイトを開き、LTS版 の macOS 64-bit Installer（.pkgファイル）をダウンロードしてインストールする。インストール後に npm と npx が使えるようになる。

Node.js インストーラー

LTS（Long Term Support） — 「安定版」のこと。公式サイトに「LTS」と「最新/Current」の2種類があるが、LTS を選ぶのが定番。

npx — Node.js に付属するコマンドで、ツールを一時的に取得して実行できる仕組み。npx があれば Wrangler はインストールせずとも使える。

2-2. Wrangler でログイン

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

Claudeデスクトップアプリ右上の ビューメニュー → ターミナル（または macOS の Terminal アプリ）を開いて、以下を実行する。何か聞かれることがあるが、いずれもそのままで進めてよい。

npx wrangler login

ブラウザが開いてCloudflareのOAuthオーオース認証画面が表示される（すでにログイン済みの場合は何も起きない）。Select account(s) で自分のアカウントを選び、あとは変更なしで進む。承認するとClaude Code経由のコマンド操作ができるようになる。

Cloudflare OAuth認証画面

Claude Code のプロンプト入力欄に !npx wrangler login を打ち込む方法もあるが、環境によってブラウザが起動しないケースが多いため、ここではターミナルから直接実行する流れにしている。

ログイン後、下記をClaude Codeに入力してログイン状態を確認する：

npx wrangler whoami

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

3. Claude CodeでWebサイト・Webアプリを作る

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

作業フォルダの public/ には前回作ったサイトのファイルが入っている状態。Claude Codeに下記を伝える：

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

その後、Claude Codeに「ダークモード風にして」「パステルカラーにして」など見た目の変更を依頼しておくと、デプロイ後に変化が確認しやすい。

3-2. 新しく作る場合

下記のプロンプトを実行して、時計Webアプリを作る:

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

なお、途中でファイル操作の許可を求められることがあるので、その都度許可する。

完成したらFinderで デスクトップ → claude → my-site → public フォルダを開き、index.html をダブルクリックしてブラウザで表示を確認する。

4. Cloudflare Pagesにデプロイ

Wranglerで pages.dev のサイトを更新する。ここでは、前回のハンズオンでブラウザ操作で作ったpages.devプロジェクトを、そのままWrangler管理に切り替えて更新する流れをメインに扱う。ブラウザでアップしたプロジェクトも、Wranglerからそのまま操作できる。

Wranglerだけで新規にpages.devプロジェクトを作りたい場合は 4-3 を参照。

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

既存のpages.devプロジェクトの一覧を表示する。Claude Codeに下記を入力する：

npx wrangler pages project list

表示される一覧から、前回のハンズオンで作ったプロジェクト名（例：thisisapen）を確認する。ダッシュボードの Workers & Pages からも同じ情報が見える。

4-2. デプロイ

下記をClaude Codeに入力する。既存プロジェクト名 は前回のハンズオンで決めた名前（例：thisisapen）に置き換える。

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

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

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

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

まずプロジェクト名を決める。*.pages.dev はCloudflare全体でグローバルに一意な名前空間で、すでに使われている名前を指定すると、サブドメインの末尾にランダム3文字程度が付与される（例：my-site.pages.dev → my-site-abc.pages.dev）。

コツ: 候補のプロジェクト名を決めたら、コマンドを打つ前にブラウザで https://候補名.pages.dev を開いてみるとよい。

何らかのページが表示される → その名前はすでに取られている

Cloudflareの「Site not found」風の404ページ → おそらく空いている

最終確認は、後述のコマンドが返すURLにサフィックス（-abc など）が付かないかどうか。

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

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

--production-branch=main を指定して本番ブランチ名を統一しておく（4-2と同じ前提にできる）。

続けてデプロイ：

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

取得結果のURLに意図せぬサフィックスが付いていた場合（名前衝突）の対処：

npx wrangler pages project delete プロジェクト名 で削除して別名で作り直す

もしくは独自ドメインを当てて pages.dev URL を実質的に使わない形にする — 設定方法は CloudflareでWebサイトに独自ドメインを設定するを参照

5. 修正して再デプロイ

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

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

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

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

URLをブラウザで開き、変更が反映されていることを確認する。

6. 次のステップ

このハンズオンでは、Wranglerを使ってコマンドラインからCloudflare Pagesにデプロイする方法を学んだ。次は、GitHubと連携してpushするだけで自動デプロイされる仕組みに進む。

Claude CodeでWebアプリを作ってGit連携でCloudflareに公開する — Cloudflare Pages の Git連携機能で、ダッシュボードからリポジトリを選ぶだけで自動デプロイを設定する

補足: Workersでの方法

Cloudflareにはここまで使ってきた Pages（*.pages.dev）のほかに、Workers という同等のプラットフォームがあり、そちらに静的サイトをデプロイすることもできる。公開URLは <プロジェクト名>.<アカウントサブドメイン>.workers.dev の形式になる。Pagesとの違いは以下のとおり。

名前衝突が起きない: アカウント固有サブドメインの下に置かれるので、pages.dev のようにランダム3文字が付与されることはない
URLは長くなる: 例 https://my-site.tatsuo-xxx.workers.dev

ここでは概要だけ示す。

作業フォルダ（例：~/Desktop/claude/my-site）に wrangler.jsonc を作成する。Claude Code に下記を依頼するか、テキストエディタで直接作成する。

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

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

項目	内容
`name`	Workers のプロジェクト名。公開URLに使われる
`compatibility_date`	使用するWorkers ランタイムのバージョン基準日。UTC基準のため、JSTの今日の日付は未来日になる場合があるので前日以前を指定する
`assets.directory`	公開するファイルが入ったフォルダ。`./public` にすることで設定ファイルなどが誤って公開されるのを防げる

デプロイ：

npx wrangler deploy

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

補足: ClaudeとCloudflareを連携させる機能（MCP）について

Claudeの設定画面からは、Cloudflareと直接連携する機能を追加できる。ただし、試した範囲ではいずれもデプロイには対応していない。デプロイできているように見えるケースは、裏側でWranglerが呼ばれているだけの可能性がある。

Cloudflare MCPでデプロイ

こうした事情から、このハンズオンでは確実に動くWranglerの直接実行を採用している。将来これらの連携機能がデプロイに対応した場合は、改めて検討する予定。

参考：

Cloudflare MCPでできること・できないこと

備忘録

Cloudflareの認証がうまくいかない場合は、スマホのテザリングに切り替えてみる、VPN を使っている場合は切る、ブラウザのシークレットモードで開き直す、Safari を試す、などを試す
WranglerでのCloudflareログイン情報はローカルに保存されるため、npx wrangler login の再実行は不要
--branch=main について: 現状、ブラウザのドラッグ＆ドロップで作ったプロジェクトの本番ブランチは main がデフォルト（Cloudflare側の仕様で将来変わる可能性あり）。違う値（例: --branch=production）を指定すると、その名前のプレビューブランチとして扱われ、production.既存プロジェクト名.pages.dev のような別URLにデプロイされてしまう（既存プロジェクト名.pages.dev には反映されない）ので注意
Claude Code から Wrangler コマンドを実行すると、同じセッション内では「デプロイして」と依頼するだけで実行されるようになる。セッションをまたいでも同じようにしたい場合は、作業フォルダに CLAUDE.md を作り、デプロイコマンド（例: npx wrangler pages deploy ./public --project-name=プロジェクト名 --branch=main）を書いておくとよい

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

☕️ Vibecoding Notes を応援