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

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

本記事の位置付け

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

Claude

このフォルダの中身を手軽に 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でのセットアップ で環境を整えてから戻ってくるとよい（Node.js や npx wrangler を Claude Code から使えるようにする手順）。

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

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

node -v

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

Node.js インストーラー

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

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. 【ケース1】前回作ったWebサイトを更新

前回のハンズオンで作ったサイトに手を入れて、同じpages.devプロジェクトを更新していく流れ。ゼロから作る場合は3章へ。

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

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

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

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

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

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

Claude

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

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

Claude

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

2-3. Cloudflare Pagesにデプロイ

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

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

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

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

Claude

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

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

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

3. 【ケース2】新しくWebサイトを作成

前回のハンズオンを通っていない、または新しくサイトとpages.devプロジェクトを作りたい場合の流れ。

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

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

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

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

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

Claude

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

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

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

3-3. Cloudflare Pagesにデプロイ

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

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

• 何らかのページが表示される → その名前はすでに取られている
• Cloudflareの「Site not found」風の404ページ → おそらく空いている

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

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

Claude

Cloudflare Pages のプロジェクト「プロジェクト名」を、本番ブランチを main にして新規作成して

コマンドで明示するなら npx wrangler pages project create プロジェクト名 --production-branch=main。

本番ブランチ名を main に統一しておくのがポイント（次のデプロイで本番ブランチとして main を使うため）。

続けてデプロイ：

Claude

public フォルダの中身を、本番（main ブランチ）としてデプロイして

直前に作ったプロジェクトに続けて頼むので、プロジェクト名は言い直さなくてよい（Claude が同じセッションの文脈で補ってくれる）。コマンドで明示するなら npx wrangler pages deploy ./public --branch=main --project-name=プロジェクト名。

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

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

4. 修正して再デプロイ

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

Claude

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

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

Claude

デプロイして

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

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

5. 次のステップ

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

• Git と GitHub の基本：バージョン管理を身につける。AI に大胆な書き換えを頼む前に commit しておけばいつでも戻せるし、GitHub をハブに公開ともつながる。ロードマップの次のステップ
• Claude Codeでデータ共有型Webアプリを作ってCloudflareに公開する：データベース（D1）を使って複数人でデータを共有できるWebアプリを作る。wrangler で直接公開する方法も案内している
• 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
• 設定が wrangler.jsonc に残る: 本編の Pages は wrangler pages deploy ./public --project-name=プロジェクト名 のようにフラグ指定で、設定ファイルは残らなかった。Workers は設定（プロジェクト名・公開フォルダなど）を wrangler.jsonc に持つ。ただし手で書く必要はなく、初回デプロイ時に自動生成される

デプロイは、公開したいフォルダ（public/）を指定して ターミナルで実行する。

npx wrangler deploy ./public

初回は Wrangler が「静的サイトのデプロイ」と判定し、プロジェクト名を対話で聞いてくる（互換性日付は自動で当日に設定される）。答えると wrangler.jsonc が自動生成され、デプロイが実行される。以降は設定が保存されるので npx wrangler deploy だけでよい。

この対話的なデプロイは Wrangler 4.24.4 以降の機能。うまく動かない場合は npx wrangler@latest deploy ./public で最新版を使う。

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

備忘録

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