Claude CodeでWebアプリを作ってWranglerでCloudflareに公開する
前回のハンズオンでは、Cloudflareに静的ファイルをドラッグ＆ドロップしてWebページをデプロイ（本番環境への公開・反映）した。今回はその発展として、コマンド操作（CLI）でデプロイできるようになることを目指す。これにより、Claude Codeにデプロイ依頼ができ、開発作業がはかどる。
注意: Cloudflare Pages は現在移行期にあり、画面上の用語や公開URLの形式が本文と異なる場合があります。Cloudflare側の情報が明確になりましたら、この文書も更新します。
1. Node.js のセットアップ
Wranglerは Cloudflare が公式に提供する CLI ツール（コマンドラインツール）で、
Cloudflare のログインや Cloudflare Workers & Pages のデプロイに使う。
Wrangler は Node.js 上で動くが、npx を使えばインストール不要で実行できる。
このハンズオンでは Node.js だけ用意すれば準備完了。
まずターミナルを開く。ターミナルを開くには Command + Space → "terminal" と入力。
Node.js のインストール
インストール済みか確認：
node -v
npx --version
node -v で v22以上 が出ていれば次に進む。それ以外、またはよくわからない場合はNode.js 公式サイトを開き、LTS版 の macOS 64-bit Installer（.pkgファイル）をダウンロードしてインストールする。インストール後に npm と npx が使えるようになる。
LTS（Long Term Support） — 「安定版」のこと。公式サイトに「LTS」と「最新/Current」の2種類があるが、LTS を選ぶのが定番。
npx — Node.js に付属するコマンドで、ツールを一時的に取得して実行できる仕組み。npx があれば Wrangler はインストールせずとも使える。
Wrangler でログイン
WranglerでCloudflareにログインする。このコマンドはターミナルで実行する（一回だけ）。
npx wrangler login
ブラウザが開いてCloudflareのOAuth認証画面が表示される。Select account(s) で自分のアカウントを選び、あとは変更なしで進む。承認するとCLIから操作できるようになる。
ログイン情報はローカルに保存されるため、以降は npx wrangler login を再実行する必要はない。
ログイン後、下記のコマンドでログイン状態を確認できる。ターミナルでも Claude Code からでも実行できる。
npx wrangler whoami
アカウント名とメールアドレスが表示されればOK。
認証がうまくいかない場合
ブラウザの認証でエラーになる場合は以下を試す。
- ブラウザのシークレットモードで開き直す
- Safari を試す
- スマホのテザリングに切り替えてみる
- VPN を使っている場合は切る
npx wrangler loginを再実行する
2. 作業場所を確保する
まずは作業場所（フォルダ）を作成する。例えば、デスクトップの "my-site" フォルダ。
Finderでフォルダを作るか、ターミナルで下記のコマンドを実行する。
mkdir ~/Desktop/my-site
mkdirはフォルダを作成するコマンド
ターミナル内で作業場所に移動する。
cd ~/Desktop/my-site
cdはフォルダを移動するコマンド
3. Claude CodeでWebアプリを作る
デスクトップ版Claudeアプリを起動。
Code（Claude Code）を選択 → New session をクリック → 作業ディレクトリを指定（~/Desktop/my-site）
下記のプロンプトを実行して、時計Webアプリを作る:
このフォルダに ./public フォルダを作ってください。
Cloudflare Pages に公開するファイルは ./public の中だけに置きます。
index.html を作って、簡単なWebページ（Hello Worldと現在時刻を表示）を作成してください。
なお、途中でファイル操作の許可を求められることがあるので、その都度許可する。
完成したらFinderで デスクトップ → my-site → public フォルダを開き、index.html をダブルクリックしてブラウザで表示を確認する。
4. Cloudflare Pagesにデプロイ
下記のコマンドを Claude Code へのプロンプトとして渡すか、ターミナルで直接実行する。
npx wrangler pages deploy ./public --project-name my-site
実行すると public フォルダの中身がCloudflare Pagesにデプロイされ、ウェブに公開される。
ターミナルでの実行結果:
⛅️ wrangler 4.87.0
───────────────────
✔ The project you specified does not exist: "my-site". Would you like to create it? › Create a new project
✔ Enter the production branch name: … production
✨ Successfully created the 'my-site' project.
✨ Success! Uploaded 1 files (1.52 sec)
🌎 Deploying...
✨ Deployment complete! Take a peek over at https://6d129816.my-site-8dw.pages.dev
初回は「プロジェクトが存在しない。作成しますか？」と聞いてくる。Create a new project を選んでEnter。続いてブランチ名を聞かれるので、そのままEnterで production にする。
デプロイメントURL（https://xxxxxxxx.my-site-xxx.pages.dev）が表示されるので、ブラウザで開いて確認する。デプロイのたびに異なるURLが発行され、その時点のサイトのスナップショットとして機能する。
本番URL（https://my-site-xxx.pages.dev）はデプロイメントURLから先頭のランダムな英数文字列（上の例では 6d129816）を取り除いたもの。プロジェクトごとに固定で、常に最新のデプロイを指す。人に共有するときはこの本番URLを使う。
補足: 今回は1ファイル構成だが、複数のファイルやサブフォルダを含むWebサイトでも同様にデプロイできる。
5. 修正して再デプロイ
ファイルを修正する。Claude Codeに依頼:
index.html は黒背景に白文字にして
修正を確認したら、同じコマンドで再デプロイする。 下記を Claude Code へのプロンプトとして渡すか、ターミナルで直接実行する。
npx wrangler pages deploy ./public --project-name my-site
ターミナルでの実行結果:
⛅️ wrangler 4.87.0
───────────────────
✨ Success! Uploaded 1 files (0.99 sec)
🌎 Deploying...
✨ Deployment complete! Take a peek over at https://3e21a7d6.my-site-8dw.pages.dev
デプロイメントURL（先ほどのとは異なる）と本番URL（固定）をブラウザで開き、変更が反映されていることを確認する。
なお、Claude CodeからWranglerのコマンドを実行した場合、同じセッション内であれば、「デプロイして」と依頼するだけでコマンドを実行してくれるようになる。セッションをまたいでも同じようにしたい場合は、作業フォルダに CLAUDE.md というファイルを作り、「デプロイは npx wrangler pages deploy ./public --project-name my-site を実行する」と書いておくとよい。
6. 次のステップ
このハンズオンでは、Wranglerを使ってコマンドラインからCloudflareにデプロイする方法を学んだ。さらに進みたい場合は以下を参考に。
- GitHub初心者ガイド — コードをGitHubで管理する方法を学ぶ。バージョン管理の基本から始めたい人向け。
- Claude CodeでWebアプリを作ってGitHub ActionsでCloudflareに公開する — GitHubと連携した本格的なデプロイフローにステップアップ。
2026-05-05 (last updated: 2026-05-07) タツヲ (yto)