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

WRG CloudflarePagesWranglerNodeJS

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

本記事の位置付け

Cloudflare に手元のサイトを公開したいだけなら、こんなざっくりとした依頼でも進められる：

このフォルダの中身を手軽に Cloudflare で公開したい

Claude Code はアカウントの有無や環境などを聞きながら、最終的にデプロイまで案内してくれる。ただし、その過程で取る道は人によって違う。

本記事では、その中で Wrangler を使って CLI からデプロイする 道筋を、つまずきにくい順序で追っていく。

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

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

この章のコマンドは macOS の Terminal（ターミナル）アプリで実行する。Cmd + スペース で Spotlight を開き、terminal と検索して起動する。

本サイトは Mac 前提で書いている。Windows で進める場合は、先に Windowsでのセットアップ（WIN）を済ませてから戻ってくる。 Node.js を公式サイトのインストーラで入れ、Claudeデスクトップアプリを開き直し、コマンドプロンプトで npx wrangler login まで済ませる手順をまとめてある。以降は Mac と同じコマンドで進められる。

Windows で「入れたのに npx が見つからない」と言われたときも WIN を見る。ほとんどはアプリを開き直していないのが原因で、入れ直す必要はない。

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

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

node -v
npx -v

node -v が v22以上、npx -v がバージョン番号を返せばOK。それ以外、またはよくわからない場合はNode.js 公式サイトを開き、LTS版 の macOS 用インストーラー（.pkg ファイル）をダウンロードしてインストールする。インストール後に npm と npx が使えるようになる。

確認は2つとも見る。 この先の Wrangler は毎回 npx で呼ぶので、node が動いていても npx が動かなければ先へ進めない。実際にこの形のつまずきを見ている。node -v は通るのに npx だけが動かない、という状態だった（npx は本体を指し示すだけのファイルなので、指し先が失われると単独で動かなくなる）。

Node.js インストーラー

インストール後は起動中のアプリを再起動する：Node.js を入れる前から起動していたターミナルや Claudeデスクトップアプリは、node / npx の場所（PATH）を古いまま覚えていることがある。すると次の手順やあとで「デプロイして」と頼んだときに npx が見つからず失敗する。インストール後は、開いていたターミナルと Claudeデスクトップアプリを一度再起動しておくと確実。

Mac には node の置き場所が2通りある（公式インストーラは /usr/local/、Homebrew は /opt/homebrew/）。両方に入っていると片方だけが使われるため、入れ直しても使われていない側が新しくなるだけで症状が変わらないことがある。入れ直しを繰り返す前に、どこに何個入っているかを確かめる。

which -a node npx

node の行が2つ以上出てきたら、2か所に入っている。読み方に迷ったら、この出力をそのまま Claude に渡して聞けばよい。

Mac で npx が動かない。
which -a node npx の結果を貼るので、
node が二重に入っていないか、
どちらが使われているかを見て、
どう直せばいいか教えて
（ここに出力を貼る）

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

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

1-2. Wrangler でログイン

WranglerでCloudflareにログインする（一回だけ）。Terminal で以下を実行する。何か聞かれることがあるが、いずれもそのままで進めてよい。

npx wrangler login

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

Cloudflare OAuth認証画面

ログイン後、Terminal で下記を実行してログイン状態を確認する：

npx wrangler whoami

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

npx wrangler login でエラーが出るとき：エラーに npm 系のメッセージが混じる場合、以前 npm install -g wrangler などで入れた古いグローバル版の Wrangler を npx が拾っているのが原因のことが多い（npx はローカル → PATH上のグローバル → ダウンロードの順で探すため、古いグローバル版があるとそれを実行してしまう）。自分で入れた覚えがなくても、「Cloudflareに公開して」のようなざっくりした依頼のときに Claude Code が環境準備として入れていることがある（とくに自動モードだと承認なしで実行されるため気づきにくい）。まず npx wrangler@latest login を試し、これで通れば古いグローバル版が原因とほぼ確定できる。恒久的には npm uninstall -g wrangler で古い版を削除し、which -a wrangler で残っていないことを確認する。以降は記事どおり素の npx wrangler ... でよい（毎回 @latest を付ける必要はない。ログイン情報はローカルに保存されるので、削除後もログインし直しは不要）。

2. 前回作ったWebサイトを更新

前回のハンズオンで作ったサイトに手を入れて、同じpages.devプロジェクトを更新していく流れ。前回のハンズオンを通っていない場合や、新しくサイトを作りたい場合は補足へ。

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

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

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

セッションを始める前に、画面左下のモード選択を 編集を受け入れる にしておく（自動にしない）。自動だと Claude がファイルの変更やコマンドを確認なしで一気に進めてしまい、意図しない結果になる事故が起きやすい。まずは一つずつ承認しながら進めるのが安全。

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

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

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

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

背景色だけピンクに変更して

2-3. Cloudflare Pagesにデプロイ

Wranglerで pages.dev のサイトを更新する。ブラウザでアップしたプロジェクトも、Wranglerからそのまま操作できる。

デプロイには、前回のハンズオンで作ったプロジェクト名が必要になる。前回はブラウザに手動でアップしたため、このフォルダの中身がどの名前のpages.devプロジェクトとして公開されているのかをWranglerは知らない。

プロジェクト名を覚えてない場合は、Cloudflareダッシュボードの Workers & Pages でプロジェクト一覧から確認する（例：aoitanaka）。

下記のように Claude Code に頼んでデプロイする。既存プロジェクト名 は前回のプロジェクト名（例：aoitanaka）に置き換える。

public フォルダの中身を、Cloudflare Pages のプロジェクト「既存プロジェクト名」に、本番（main ブランチ）として wrangler でデプロイして

コマンドで明示するなら npx wrangler pages deploy ./public --branch=main --project-name=既存プロジェクト名。同じデプロイになる。頼み方（自然文）とコマンド、どちらで渡してもよい。

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

3. 修正して再デプロイ

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

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

修正を確認したら、再デプロイする。先ほど一度デプロイ済みなので、同じ Claude Code セッションなら「デプロイして」だけで通じる（Claude が先ほどのデプロイコマンドを覚えている）。

デプロイして

コマンドで明示するなら npx wrangler pages deploy ./public --branch=main（プロジェクト名は初回デプロイ時にキャッシュされるので省略できる。./public と --branch=main は残す）。別のセッションでも「デプロイして」で済ませたい場合は、作業フォルダの CLAUDE.md にデプロイコマンドを書いておく（→ 備忘録）。

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

4. 次のステップ

このハンズオンでは、Wranglerを使ってコマンドラインからCloudflare Pagesにデプロイする方法を学んだ。次のステップの候補：

Git と GitHub の基本：バージョン管理を身につける。AI に大胆な書き換えを頼む前に commit しておけばいつでも戻せるし、GitHub をハブに公開ともつながる。ロードマップの次のステップ
Claude Codeでデータ共有型Webアプリを作ってCloudflareに公開する：データベース（D1）を使って複数人でデータを共有できるWebアプリを作る。wrangler で直接公開する方法も案内している
Claude CodeでWebアプリを作ってGit連携でCloudflareに公開する（応用）：Cloudflare Pages の Git連携機能で、ダッシュボードからリポジトリを選ぶだけで自動デプロイを設定する

補足: Wrangler で新しく作る（Workers）

前回のハンズオンを通っていない場合や、新しくサイトを作って公開したい場合はこちら。

Cloudflare には、ここまで使ってきた Pages（*.pages.dev）のほかに Workers という同等のプラットフォームがあり、静的サイトはどちらでも公開できる。ここでは Workers を使う。 理由は2つ。

Cloudflare 公式が、新しく作るなら Workers を勧めている。 Pages の公式ドキュメントの冒頭に「Start new projects with Workers.」と書かれている（Pages が廃止されるわけではなく、継続サポートは明言されている）
Wrangler 自身が、新しいプロジェクトを Pages に作ろうとすると Workers 側に振り替えるようになった（2026年9月時点）。逆らって Pages を作ることもできるが、素直に Workers で作るほうが手順が短い

本編（2章）のようにすでにある Pages プロジェクトを更新する場合は、これまでどおり Pages のままで、振り替えは起きない。

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

Finderで作業場所（フォルダ）を作成する。例えば、ホーム → claude → my-site フォルダ。

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

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

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

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

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

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

Workers にデプロイする

まずプロジェクト名を決める。Workers は <プロジェクト名>.<アカウントのサブドメイン>.workers.dev という形式で、アカウントごとのサブドメインの下に置かれる。pages.dev と違って他人と名前がぶつからないので、空き確認は要らない。

設定ファイルの用意からデプロイまでまとめて頼む。

public フォルダの中身を Cloudflare Workers に「プロジェクト名」という名前で公開して。
wrangler の設定ファイル（wrangler.jsonc）も作ってほしい。

- 公開ディレクトリは public
- compatibility_date は UTC（協定世界時）での今日の日付にする

compatibility_date を UTC で指定するのは、日本時間の早朝（0時ごろから9時ごろ）は UTC ではまだ前日だから。その時間帯に日本の「今日」を入れると未来日と判定されて弾かれる。UTC で指定しておけば時間帯に関係なく通る。

wrangler.jsonc が作られてからデプロイされる。中身はこれだけ。

{
  "name": "プロジェクト名",
  "compatibility_date": "2026-09-18",
  "assets": { "directory": "./public" }
}

裏で動くコマンドは1つ。

npx wrangler deploy

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

修正して再デプロイするときは「デプロイして」だけでよい。設定は wrangler.jsonc に残っているので、プロジェクト名も公開ディレクトリも言い直さなくて済む。

Pages と違うところ

観点	Pages（本編）	Workers（この補足）
URL	`プロジェクト名.pages.dev` と短い	`プロジェクト名.アカウントのサブドメイン.workers.dev` と長い
名前の衝突	Cloudflare 全体で早い者勝ち。取られているとランダムな文字が付く	起きない
設定ファイル	要らない（コマンドのフラグで指定）	`wrangler.jsonc` が要る
ブラウザからのアップロード更新	できる	できる（Deployments → New deployment）。ただし HTML・CSS・JS だけ
過去のデプロイに戻す	ダッシュボードから	ダッシュボードのほか `npx wrangler rollback` でも戻せる
独自ドメイン	外部のDNSのままでも設定できる	Cloudflare でネームサーバーを管理しているドメインだけ
静的ファイルの配信	無料・無制限	無料・無制限

⚠️ API や認証を足すときは書き方が変わる。 本サイトの応用編（D1でデータ共有型Webアプリを作る、アクセス制限をかける）は Pages の functions/ フォルダを使う作りなので、Workers ではそのままでは動かない。両者の関係は Workers と Pages どちらを使うかに整理してある。

備忘録

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 --branch=main --project-name=プロジェクト名）を書いておくとよい

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

☕️ Vibecoding Notes を応援