Claude × Vercel デプロイ｜/deploy で Next.js を公開

Claude × Vercel 連携でできる 3 つのこと

Claude Code と Vercel を組み合わせると、ターミナルから出ずに「本番デプロイ」「ログ分析」「サンドボックス実行」が完結します。具体的には以下の三系統が用意されています。

1. /deploy による本番デプロイ:Vercel 公式プラグイン経由で、現在のプロジェクトを vercel --prod に近い形でワンコマンド公開できます。
2. /vercel-logs によるログ取得:--follow フラグで live ストリーミングに切り替えられ、ビルド失敗の原因をその場で Claude に解釈させてリトライまで自動化できます。
3. Vercel Sandbox 上での Claude Agent SDK 実行:本番システムから隔離された vCPU 環境で Claude Code CLI を動かし、コード生成・ファイル操作・shell 実行を安全に並列化できます。

公式プラグインのインストール実績は 122,341 件(2026 年 5 月時点)で、Vercel × Claude は事実上のスタンダード構成になっています(Vercel Plugin for Claude Code 公式ページ)。

前提条件:Node.js v18+ / Git / GitHub / Claude 有料プラン

連携を始める前に揃えておく環境は 4 点です。1 つでも欠けると /vercel-setup が途中で止まります。

• Node.js v18 以上:Vercel CLI と Next.js 14 系の最低要件。node -v で確認。
• Git クライアント:GitHub にプッシュして Vercel の Git 連携デプロイを発火させるために必須。
• GitHub アカウント:Vercel と OAuth 連携する必要があり、リポジトリが Public か、Private なら Vercel に権限付与済みであること。
• Claude の有料プラン(Pro / Max など):Claude Code 自体が有料プラン前提のため、Free では /deploy を実行しても plugin が起動しません(Claude Code で Vercel に公開する手順解説)。

GitHub の権限設定が Private リポジトリで甘いと、Vercel ダッシュボードに「プロジェクトが表示されない」状態になります。Vercel の Integration 画面から All Repositories か対象リポジトリを明示的に許可してください。

/vercel-setup で Vercel CLI を初期化する

最初に走らせるのは /vercel-setup です。このコマンドが内部で Vercel CLI の認証・プロジェクトリンク・環境変数の初期取得を一括処理します。

1. Claude Code セッション内で /vercel-setup を実行。
2. 初回はブラウザで Vercel ログイン画面が開くので、GitHub アカウントで認証。
3. CLI が vercel link 相当の処理で現在ディレクトリと Vercel プロジェクトを紐付け。新規なら vercel init 相当の対話に入ります。
4. vercel env pull で .env.local に環境変数を取得。OIDC トークンが必要な Sandbox ユースケースでもここで揃います。

セットアップ完了後はリポジトリ直下に .vercel/ ディレクトリが作成され、以後 /deploy がこの紐付けを利用します。.vercel/ は .gitignore に含める運用が推奨です。

/deploy で本番公開する手順

セットアップが終われば本番公開はワンコマンドです。自然言語でも "deploy my app to Vercel" と書けば同じ動作になります。

1. ローカルで npm run dev を起動し、localhost で動作確認(失敗を本番で発見しない最低限の規律)。
2. 変更を git commit してクリーンな状態にする(Vercel CLI は uncommitted な状態でも動きますが、ロールバック時に困ります)。
3. Claude Code に /deploy と入力。プラグインが vercel --prod 相当を実行し、ビルド開始。
4. 完了すると本番 URL(https://<project>.vercel.app)が標準出力に返ります。

GitHub と Vercel を連携済みの場合、main ブランチへ git push した時点でも自動デプロイが走ります。プラグイン経由の /deploy は「ブランチを切らずに今すぐ本番反映したい」ケースで真価を発揮します。

/vercel-logs でリアルタイムにデバッグ

デプロイが失敗したときの体験を一変させるのが /vercel-logs です。

• 引数なしで実行すると直近デプロイのビルドログを取得。
• --follow を付けると live ストリーミングに切り替わり、ビルド進行に応じて差分が流れます。
• Claude に「このエラーの修正案を出して」と続ければ、ログ解析 → 修正 → 再 /deploy のループがチャット内で完結します。

ローカル npm run build が通るのに Vercel でだけ落ちる場合、Node バージョン不一致と環境変数の欠落が二大要因です。/vercel-logs 冒頭の Using Node.js xx.x 行と「Environment Variables」セクションを最初に確認してください。

Vercel Sandbox で Claude Agent SDK を安全実行する

「Claude にコード生成と shell 実行を任せたいが、本番サーバや手元のローカルを触らせたくない」ケースには Vercel Sandbox が答えです。隔離された vCPU 環境で Claude Code CLI を起動でき、リソース上限とタイムアウトも明示できます。

import { Sandbox } from "@vercel/sandbox";
import ms from "ms";

const sandbox = await Sandbox.create({
  resources: { vcpus: 4 },
  timeout: ms("10m"),
});

await sandbox.runCommand({
  cmd: "npm",
  args: ["install", "-g", "@anthropic-ai/claude-code"],
});

セットアップ後は Anthropic SDK を import して、Claude Agent SDK の標準フローでファイル操作・shell 実行を走らせます。本番システムへのアクセス禁止・無制限リソース消費の抑止・他プロセスへの干渉防止という 3 つの安全性が、Sandbox を選ぶ理由です(Vercel KB: Using Vercel Sandbox to run Claude's Agent SDK)。

独自ドメインを Vercel に紐づける手順

*.vercel.app のままでは検索流入が伸びないため、独自ドメインの設定までセットで覚えておきます。

1. お名前.com / Google Domains / Cloudflare Registrar などでドメイン取得(年間 1,000〜2,000 円程度)。
2. Vercel ダッシュボードの該当プロジェクト → Settings → Domains で対象ドメインを追加。
3. Vercel が指示する DNS レコード(A レコード or CNAME)をドメイン管理画面で登録。
4. 反映待ち(数分〜数時間)。dig <domain> で名前解決が Vercel の IP を返せば完了。

DNS 反映を待たずに「繋がらない」と判断して設定をいじり直すのが一番の事故源です。最低 30 分は触らずに待ってください。

つまずきポイント:GitHub 権限・DNS・環境変数

連携作業でハマる箇所は経験上ほぼ 3 つに集約されます。

• GitHub Private リポジトリの権限不足:Vercel Integration で対象リポジトリを明示許可していないと、Vercel 側のリポジトリ一覧に出てきません。
• DNS 伝播の体感時間:体感は数分でも実際は数十分かかるケースがあり、TTL を 300 秒以下に下げておくと再試行が早まります。
• 環境変数の Production / Preview / Development 切り分け:vercel env pull は 1 環境ずつしか取れないため、--environment=production 指定を忘れると本番値が .env.local に来ません。

これらは /vercel-logs --follow と Vercel ダッシュボードの「Environment Variables」タブを並べておけば、ほぼ 5 分で切り分けられます。

まとめ:Claude × Vercel が向く案件・向かない案件

Claude Code と Vercel の組合せが最も光るのは「Next.js / Remix / SvelteKit などフロント中心の SaaS や個人ブログを、最短で本番公開しながら継続的に Claude に改修させる」ケースです。MCP 経由で v0 と組み合わせれば UI 生成からデプロイまでチャット内で完結します。

逆に、複雑な VPC 構成・常駐型バックエンド・GPU 計算が中心のワークロードは Vercel の前提と合いません。その場合は Vercel Sandbox を「Claude の作業場」として限定利用し、本番は AWS / GCP に置く構成が現実的です。/deploy と /vercel-logs の二枚看板は、今のところ Claude × クラウドデプロイの中で最も摩擦の少ない選択肢と言えます。