Claude Code で Vercel と Cloudflare にアプリをデプロイする（2026年）
Claude Code でアプリをデプロイするとは、ターミナル内で vercel や wrangler を実行するよう指示することです。CLI のインストール、ログイン、ビルド、本番環境への公開までを行い、その後ログを読んでエラーを直してくれます。Vercel または Cloudflare のアカウントは自分で用意し、ログインも自分で行う必要があります。AI はコマンドを操作するだけで、ホスティングを魔法のように所有するわけではありません。スムーズで高速な Next.js/SSR アプリなら Vercel を、静的サイト・エッジ・安価なフルスタック Workers なら Cloudflare を選びましょう。
Claude Code でデプロイするとはどういう意味？自分だけでデプロイできる？
Claude Code で Next.js アプリや静的サイトを作ったばかりで、それをウェブに公開したいなら、朗報です。ターミナルから離れる必要は一切ありません。Claude Code でデプロイするとは、シェルコマンドを代わりに実行させることです。プラットフォームの CLI をインストールし、ログインし、ビルドを実行し、コードをプッシュし、そしてログを読んでエラーをループで検出・修正します。
重要なのは、Claude Code は本物のターミナルコマンドを実行するという点です。シミュレートするわけではありません。「このプロジェクトを Vercel にデプロイして」と伝えると、実際に vercel --prod を呼び出し、結果を待ち、ビルドが失敗すればエラーメッセージを読んで修正案を提示します。これこそがブログ記事のコマンドをコピペするのとは違う点です。ツールが初めてなら、まず Claude Code とは何かにざっと目を通し、サンドボックス内でどのようにコマンドを実行するかを理解しましょう。
ただし「魔法のようにデプロイする」わけではありません。人間がやるべきことが3つあります。
- Vercel または Cloudflare のアカウントが必要です（最初は無料プランで十分です）。
- 初回はログイン手順で通常ブラウザが開き、自分で確認します。Claude Code があなたのアカウントにサインインするわけではありません。
- プラットフォーム、ドメイン、環境変数は自分で決めます。AI は提案できますが、判断するのはあなたです。
要するに、AI は繰り返しのコマンド作業とやっかいなログ読みを担当し、あなたは判断とアカウントを担当します。この分担をきちんと理解しておくと、期待値が現実的になります。
手作業でデプロイする代わりにこれをやる価値があるのはなぜでしょうか。実用的な理由が3つあります。第一に、各プラットフォームのコマンドを覚える必要がありません。vercel と wrangler は構文が異なり、どちらもかなり速く変化します。第二に、修正ループが短くなります。ビルドが失敗したとき、あなたがエラーをコピーしてウェブ検索する代わりに、AI がその場でログを読みます。第三に、コンテキストが保たれます。Claude Code はアプリをビルドしたばかりの同じフォルダにいるので、プロジェクト構造、使ったフレームワーク、出力の場所を把握しています。あなたのコードを何も知らないガイドからコマンドを貼り付けるのとは大きな違いです。
デプロイ前に（チェックリスト）
デプロイがスムーズに進むかどうかは、ほとんど準備段階で決まります。Claude Code にアプリを本番環境へプッシュするよう指示する前に、以下をすべて確認しましょう。
- ✓ きれいな git リポジトリ：すべてコミット済みで、未処理の変更がないこと。この部分が初めてなら、Claude Code での git ワークフローを参照してください。
- ✓ 自分のマシンで
npm run buildが成功すること。これが第一条件です。ローカルでビルドが失敗するなら、サーバーでも必ず失敗します。「とりあえず試しに」デプロイしてはいけません。 - ✓ フレームワークを把握する：Next.js、Vite/React、または静的 HTML。種類によってプラットフォームとデプロイコマンドが異なります。
- ✓ Vercel または Cloudflare のアカウントを持っていること。
- ✓
.gitignoreがすでに.envをブロックしていること（ロックファイルも）。この行を再確認しましょう。
セキュリティ警告：Claude Code に
.envや API キーを git へコミットさせないでください。git add -Aを実行させる前に、.gitignoreに.envと.env.localが含まれていることを確認しましょう。シークレットはコードの中ではなく、プラットフォームのダッシュボードかwrangler secretに置くべきものです。
アプリにサーバーサイド（API ルート、データベース）がある場合は、Claude Code でのバックエンドと API の構築も読んでおくとよいでしょう。本番環境に出す前に、アプリがどの環境変数を必要とするかがわかります。このリストを正しく揃えれば、以下のデプロイ手順は通常わずか数分で終わります。
方法1 - Claude Code で Vercel にデプロイする
Vercel は Next.js と SSR アプリにとって最もスムーズな選択肢です。多くの部分がほぼ「クリックするだけで完了」です。Claude Code に一手順ずつ実行させられる CLI の流れは次のとおりです。
- Vercel CLI をインストール：
npm i -g vercel - ログイン：
vercel login- ブラウザが開いて認証します（自分で行う手順です）。 - プロジェクトをリンク：
vercel link- 現在のフォルダを Vercel 上のプロジェクトに接続します。 - プレビューを作成：
vercel（フラグなし）を実行してプレビュー URL をビルドし、まず確認します。 - 環境変数を設定： Vercel ダッシュボードまたは
vercel env add VAR_NAMEで設定します。 - 本番環境へ公開：
vercel --prod。
Claude Code では上記の各コマンドを入力する必要はありません。次のようなプロンプトで十分です。
Deploy this project to Vercel. Run vercel link first,
create a preview for me to check, then ask me before
running vercel --prod. If the build fails, read the
log and suggest a fix.Claude Code はコマンドチェーンを実行し、あなたが確認できるようにプレビューで止まり、あなたが承認して初めて本番環境へ公開します。ビルドが失敗すれば、エラー出力を読んで修正します。ここが「AI がログを読む」ことで明らかに時間を節約できる場面です。
2026年の新機能：Vercel には公式の Claude Code プラグインと Vercel MCP コネクタがあり、Claude Code が Vercel とよりきれいに連携できます（プロジェクト管理、デプロイの読み取り）。Vercel によくデプロイするなら、どちらも試す価値があります。
Next.js/SSR では、Vercel の大きな利点はランタイムをほとんど設定しなくてよいことです。フレームワークが自動検出され、「ただデプロイするだけ」です。Server Components、API ルート、ミドルウェアはすべてアダプターなしで動きます。トレードオフは、トラフィックが多いとコストが急速に上がりうることです（下の比較表を参照）。
プレビューを正しく使う：--prod の前に必ず vercel（プレビュー）を実行しましょう。プレビューには専用の URL があり、これから公開するのとまったく同じコードを使いますが、実際のユーザーには影響しません。その URL を開き、いくつかの主要な流れをクリックして確認し、それから初めて Claude Code に本番環境へプッシュさせます。壊れたビルドをメインドメインに公開してしまうのを防ぐ、コストの低い習慣です。
方法2 - Claude Code で Cloudflare にデプロイする（Pages と Workers）
Cloudflare は安価に、エッジで動かしたい、または Workers でフルスタックにしたいとき（KV、D1、R2）に向いています。主要なツールは wrangler です。手順は次のとおりです。
- Wrangler をインストール：
npm i -g wrangler（一回だけならすぐ使えるnpx wranglerでも可）。 - ログイン：
wrangler login- ブラウザが開いて認証します。 - アプリをビルド：
npm run buildで出力フォルダを生成します。 - Pages をデプロイ：
wrangler pages deploy <build-folder>（例えば Vite ならdist、またはお使いのフレームワークのビルドフォルダ）。 - シークレットを設定：
wrangler secret put SECRET_NAMEまたはダッシュボードで設定します。コードにハードコードしてはいけません。 - ドメイン + SSL を割り当て： ダッシュボードでカスタムドメインを追加します。Cloudflare が SSL を自動的にプロビジョニングします。
Claude Code 向けのサンプルプロンプトです。
Build this app and deploy it to Cloudflare Pages with wrangler.
After it deploys, show me the .pages.dev URL so I can check it.
Remind me which secrets I need to set with wrangler secret put.Next.js を Cloudflare で動かす際の落とし穴（よく読んでください）：Next.js は Vercel のようには Cloudflare Pages/Workers 上で直接動きません。アダプター層が必要です。
@cloudflare/next-on-pages- Next.js を Cloudflare Pages 向けにビルドし、エッジランタイムで動かすアダプターです。- OpenNext（
@opennextjs/cloudflare） - より新しい方向性で、複雑な Next.js アプリ向けに Workers の Node ランタイムをよりよくサポートします。Cloudflare 向け OpenNext のドキュメントを参照してください。
どちらも通常、設定で Node 互換フラグ（nodejs_compat）を有効にする必要があります。その手順を飛ばすと、わかりにくいランタイムエラーに遭遇します。これはまさに Vercel 専用のガイドが省いている点です。Claude Code にこう伝えられます。「このアプリは Next.js です。OpenNext を使って Cloudflare にデプロイし、nodejs_compat を有効にして」。
Cloudflare には Claude Code 向けの agent-setup ドキュメントもあり、AI エージェントを Cloudflare インフラに接続する方法が説明されています。動的なロジック（データベース、キャッシュ、ファイルストレージ）には、すべてを静的な Pages に詰め込む代わりに、Workers を KV/D1/R2 と組み合わせて使いましょう。KV は高速なキーバリュー、D1 は SQL データベース、R2 は egress 料金のない S3 形式のオブジェクトストレージです。Claude Code に wrangler.toml でこれらのサービスへのバインディングを作らせ、対応する読み書きのコードを書かせることができます。
Vercel と比べると、Cloudflare のトレードオフはもう少し設定が必要な代わりに、より高い柔軟性とスケール時の低コストが得られることです。アプリが単なる静的サイト/SPA なら、トレードオフはほとんどありません。Pages はビルドフォルダを受け取り、すぐにエッジで配信します。アダプターの複雑さが本当に問題になるのは、Next.js の SSR に至ったときだけです。
Vercel か Cloudflare か？プラットフォーム選びの表
「最良のプラットフォーム」というものはなく、あなたのアプリの種類に合うものがあるだけです。下の表は、Claude Code が生成したプロジェクトの種類に基づいて素早く選ぶのに役立ちます。
| アプリの種類 | 選択 | 理由 | 開始コスト |
|---|---|---|---|
| 静的サイト / SPA（Vite、素の React、HTML） | Cloudflare Pages | 広いエッジネットワーク、寛大な帯域幅、超高速なデプロイ | 無料プランあり |
| Next.js / SSR | Vercel | フレームワークの自動検出、最もスムーズな DX、ほぼゼロ設定 | 無料プラン（Hobby） |
| エッジでの API / 関数 | Cloudflare Workers | 低いグローバルレイテンシ、スケール時に安価 | 無料プランあり |
| DB/キャッシュ/ストレージが必要なフルスタック | Cloudflare Workers + D1/KV/R2 | データベース、キーバリュー、オブジェクトストレージが組み込み | 無料プランあり |
| Next.js だがとにかく安くしたい | Cloudflare + OpenNext | 設定が増える代わりに、トラフィックが多いとより安価 | 無料プランあり |
手っ取り早い結論：Vercel は最も考えずに済む最もスムーズな Next.js 体験を、Cloudflare は低コスト・エッジ・Workers でのフルスタックを提供します。どちらも個人アプリやサイドプロジェクトには十分な無料プランがあります。迷ったら、両方の無料プランで始めて Claude Code にそれぞれデプロイさせ、比較しましょう。
よくあるデプロイエラーへの対処
デプロイが一発できれいに通ることはめったにありません。ここでの Claude Code の強みはデプロイログを読んでループで修正することです。エラーを貼り付けるか、単に「その出力を読んで直して」と伝えるだけです。最もよく遭遇するエラーとその対処法は次のとおりです。
- 初回のビルドが失敗する。たいていは依存関係の欠落かビルドスクリプトの誤りです。Claude Code にこう伝えましょう。「今失敗したビルドログを読んで、欠けている依存関係か package.json の誤ったスクリプトを見つけて直して」。これは最もよくあるエラーであり、最も簡単に直せるものでもあります。
- 環境変数の欠落 → アプリはデプロイされるものの、空白ページや 500 エラーが表示されます。ダッシュボードで変数が設定されているか確認しましょう。
.envのローカル変数はそれ自体ではサーバーに伝わらないことを覚えておいてください。 - Cloudflare での Next.js エッジランタイムエラー。兆候は「module not found」や存在しない Node API です。対処：
@cloudflare/next-on-pagesまたは OpenNext を使い、nodejs_compatを有効にします（上の Cloudflare のセクションを参照）。 - Node バージョンの不一致。ローカルは Node 20 を使うのにサーバーは別のものがデフォルト → ビルド結果が異なります。プロジェクト設定か
package.json（engines）でバージョンを宣言しましょう。 - 誤ってシークレットをコミットした。API キーが git に入ってしまったら、すぐにキーをローテーション（無効化して再生成）してください。コミットを削除するだけでは不十分です。キーはすでに履歴に露出しているからです。その後、シークレットをあるべき場所であるダッシュボード/wrangler secret に移しましょう。
（プラットフォーム側ではなく）Claude Code のセッション内でエラーに遭遇した場合は、よくある Claude Code のエラーを参照してください。一般的なコツ：やみくもに再デプロイしないこと。何かを直す前に、必ず AI に該当のログを読ませましょう。
自動化する：git push → 公開（CI/CD とプレビュー）
手動の CLI デプロイは初回には最適ですが、長期的にはすべての git push が自動的に公開されるようにしたいものです。Vercel と Cloudflare Pages はどちらも GitHub リポジトリへの直接接続をサポートしています。
- リポジトリを接続：プラットフォームのダッシュボードで接続すると → main ブランチへのすべてのプッシュが本番環境に自動デプロイされます。
- プレビューデプロイ = 本物の QA。すべてのプルリクエストに専用のプレビュー URL が付くので、マージ前にあなた（またはレビュアー）が確認できます。これはほぼ無料の QA なので、飛ばさないでください。
- ワンコマンドのロールバック。新しいビルドが壊れたら、ダッシュボードでほぼ瞬時に前のビルドにロールバックできます。慌てる必要はありません。
設定ファイルも Claude Code に書かせられます。Vercel なら vercel.json、Cloudflare なら wrangler.toml、パイプラインをきめ細かく制御したいなら GitHub Actions のワークフローです。Claude Code での git ワークフローと組み合わせれば、コード → プッシュ → プレビュー → マージ → 公開という引き締まった開発ループが手に入ります。
あらかじめ用意されたスキルでより速くデプロイ（ak-deploy）
各 vercel/wrangler コマンドを覚えて入力する代わりに、あらかじめ用意されたデプロイスキルを使えます。ak-deploy はプロジェクト設定や docs/deployment.md ファイルからデプロイ先を自動検出します。Vercel、Cloudflare、Netlify、Railway、Fly.io など多くをサポートしているので、たいていは「このアプリをデプロイして」の一文で正しい流れを選んでくれます。より重いインフラ（Cloudflare Workers/R2/D1、Docker、Kubernetes）には、ak-devops がその側を担当します。
これらのスキルは Engineer Kit（ak-deploy スキルを含む）に入っています。これは Claude Code 向け AgentKit バンドル — 現在 $149（$198 から）の一部です（agentkit.best、ak CLI を使用）。誤解を避けるために明確にしておくと、これは AgentKit、つまりClaude Code 向けのスキル/エージェントのパックであり、OpenAI の AgentKit とはまったく別物です。Engineer Kit は $99（ページに継続課金の記載はありません）で、生涯アップデートと返金保証が付きます。まず Claude Code でスキルがどう動くかを理解したいなら、Claude Code のスキルとは何かを参照してください。
よくある質問（FAQ）
Claude Code は自分だけでデプロイできますか？
はい。Claude Code は本物のターミナルコマンドを実行するので、vercel/wrangler を代わりに実行します。CLI のインストール、ビルド、デプロイ、そしてログを読んでエラーを直します。ただし、Vercel/Cloudflare のアカウントは必要で、初回のログインは自分で行います。
Vercel と Cloudflare はどちらが安く、無料で使えますか？
どちらにも、個人アプリやサイドプロジェクトには十分な無料プランがあります。Cloudflare はトラフィックが多いときや静的/エッジのアプリで安くなりがちで、Vercel は Next.js/SSR でよりスムーズです。スケールする前に、正確な制限を料金ページで確認しましょう。
Next.js を Cloudflare にデプロイするには何が必要ですか？
Next.js は Cloudflare 上で直接は動きません。@cloudflare/next-on-pages アダプターか OpenNext（@opennextjs/cloudflare）が必要で、通常は Node 互換フラグ（nodejs_compat）を有効にする必要があります。Vercel ではこの手順は不要です。
Claude Code はシークレットを漏らすことがありますか？
あなたが .env/API キーを git にコミットさせた場合に限ります。防ぐには、.env を .gitignore に追加し、シークレットはダッシュボードか wrangler secret put で読み込みます。キーが漏れてしまったら、すぐにローテーション（再生成）してください。すでに git の履歴に入っているからです。
静的 HTML を最も速くデプロイする方法は？
静的サイトなら、最も速いのは wrangler pages deploy <folder> で Cloudflare Pages にデプロイするか、プロジェクトフォルダで vercel を実行することです。Claude Code にコマンドを実行させ、確認用の公開 URL を渡してもらいましょう。
新しいビルドが壊れたとき、どうロールバックしますか？
Vercel と Cloudflare Pages はどちらも、ダッシュボードでほぼ瞬時に前のデプロイにロールバックできます。各デプロイはそれ自体が不変のビルドなので、ロールバックはとても安全で、再ビルドは不要です。
まとめと次のステップ
Claude Code でのデプロイは一つの原則に集約されます。AI にコマンドを実行させてログを読ませ、あなたはプラットフォームとアカウントを決める、ということです。Next.js とスムーズな DX には Vercel を、安価・エッジ・Workers でのフルスタックには Cloudflare を選びましょう。きれいなリポジトリ、ローカルで通るビルド、git の外に保たれたシークレットを揃えれば、すでにトラブルの80%は回避できています。
次のステップ：アプリにサーバーサイドがあるなら、Claude Code でのバックエンドと API の構築を参照してください。プッシュから公開までを自動化するには、Claude Code での git ワークフローを参照しましょう。
Claude Code に一つのコマンドでデプロイさせたいですか？Engineer Kit の ak-deploy スキルはプラットフォームを自動検出し、CI/CD も扱います。多くのプロジェクトをデプロイし、各プラットフォームのコマンドを覚えたくない人に便利です。