Biz Deploy Vercel — WebサイトをVercelに安全にデプロイ、ワンコマンド
このスキルは、ローカルプロジェクトフォルダ（React / Next.js / Vite / 静的HTML）を、SSL、CDN、プレビューデプロイメントを備えたVercel上のライブURLに変換します。目標: ソロプレナー / SME がDevOpsを知らなくても、Claudeとの会話だけでランディングページをデプロイできるようにすること。
精神: Claudeが自分で確認できることをユーザーに尋ねない。フレームワークを自動検出し、必要なときに
vercel.jsonを自動生成し、本当の手動ゲート（ブラウザログイン、カスタムドメインDNS）に遭遇するまで止まらない。
使用するタイミング
ユーザーが以下を希望する場合:
- ランディングページ / WebサイトをライブURLに公開して共有/テスト/広告配信
- コード修正後にプロジェクトを再デプロイ
- 新しいリポジトリに初めてVercelをセットアップ
- Vercelに向けてカスタムドメインを設定
使用しないタイミング
- ローカルビルドのみで、まだ公開したくない → スキップ、
npm run build/next devを使用。 - Netlify / Cloudflare Pages / AWS にデプロイする必要がある → このスキルはVercel専用。
- GitHub Actionsカスタムによる複雑なCI/CDが必要 → プロジェクト初期化にはこのスキルを使用できるが、ワークフローカスタムはユーザー自身が設定。
- ステートフルなバックエンドNode.js（WebSocket、long polling）が必要 → Vercelサーバーレスは不適切、Railway / Fly.ioを使用。
ユーザーが受け取る成果物
- ライブURL
https://<project>.vercel.app形式（本番）またはプレビューURL。 - 検査URL
https://vercel.com/<account>/<project>/<deployment-id>形式でログ確認可能。 .vercel/project.jsonにリンクされたプロジェクト（gitignored） — 次回以降のデプロイはvercel --prodのみ。- ユーザーがカスタムドメインを要求した場合 → 具体的なDNS手順（Aレコード / CNAME）。
6ステップのワークフロー
ステップ1 — 事前チェック: Vercel CLI / MCP の確認
scripts/check_vercel.sh（または同等のインラインコマンド）を実行し、以下の3つの状態を確認:
| 確認対象 | コマンド | 期待結果 |
|---|---|---|
| Node.js | node --version | v18+ または v20+ |
| Vercel CLI | vercel --version | バージョンが返る (v32+) |
| Vercel認証 | vercel whoami | ユーザー名が返る |
Node.jsがない場合:
- macOS:
brew install nodeまたは https://nodejs.org からのダウンロードを提案 - Windows: https://nodejs.org/en/download/ から .msi インストーラのダウンロードを案内
- Linux:
nvm install --ltsまたはパッケージマネージャー。 - スキルを停止し、ユーザーのインストール完了報告を待つ。
Vercel CLIがない場合:
- 使用中のパッケージマネージャーを検出 (
pnpm,yarn,npmの優先順位で確認、またはプロジェクトのロックファイルを読み取り)。 - グローバルインストール:
pnpm add -g vercel（ユーザーが pnpm を使用している場合）npm install -g vercel（デフォルト）
vercel --versionで再確認。
Vercel CLIはあるが認証されていない場合（vercel whoami がエラー）:
vercel loginを実行 — このコマンドはブラウザを開くため、ユーザーが確認クリックする必要あり。これは手動ゲートであり、スキップ不可。- ユーザーに通知: "
vercel loginを実行しました。ブラウザを開いて、確認をクリックして認証してください。完了したら 'ok' と入力してください。" - 停止し、ユーザーの応答を待つ。
ユーザーがVercel MCPを持っていると言った場合:
- MCPサーバーを確認（利用可能なMCPツールをリストアップ、
mcp__vercel__*プレフィックスがあるか）。 - MCPがある場合でも、実際のデプロイにはCLIを優先（ファイルアップロードにはCLIがより安定）、デプロイ後のプロジェクト/ドメイン/環境変数の照会にはMCPを使用。
- ユーザーがMCPを強制する場合: https://vercel.com/docs/mcp のドキュメントに従って認証し、対応するMCPツールを使用。
ステップ2 — フレームワーク + プロジェクト構造の検出
プロジェクトルートのファイルを読み取り、フレームワークを特定:
| ファイル | フレームワーク |
|---|---|
next.config.js / next.config.mjs / next.config.ts | Next.js |
vite.config.js / vite.config.ts | Vite (React/Vue/Svelte) |
package.json に "react-scripts" あり | Create React App |
package.json に "astro" あり | Astro |
package.json に "@remix-run/dev" あり | Remix |
index.html + アセットのみ、package.json なし | 静的HTML |
package.json あり、上記パターンに一致しない | ユーザーにフレームワークを確認、またはVercelの自動検出に委ねる |
さらに記録:
package.jsonのビルドコマンド (scripts.build)- 出力ディレクトリ (Next:
.next, Vite:dist, CRA:build, 静的:.) - 必要なNodeバージョン (
engines.nodeまたは.nvmrcから)
→ 該当するリファレンスを参照:
- React/Vite →
references/react-vite.md - Next.js →
references/nextjs.md - 静的HTML →
references/static-html.md
ステップ3 — vercel.json の生成（必要な場合）
Next.js: Vercelが完全に自動検出するため、カスタムヘッダー/リダイレクトが必要な場合を除き、vercel.json は不要。
Vite / CRA（SPAルーティング）: クライアントサイドルーティングを機能させるため、すべてのルートを index.html に書き換える vercel.json が必要:
{
"rewrites": [
{ "source": "/(.*)", "destination": "/index.html" }
]
}
静的HTML: 通常は不要。複数ページ（thank-you.html, privacy.html）があるサイトは書き換え不要。index.html のみ + JSルーターの場合はSPAと同様に書き換えが必要。
セキュリティヘッダー（本番環境推奨）:
{
"headers": [
{
"source": "/(.*)",
"headers": [
{ "key": "X-Content-Type-Options", "value": "nosniff" },
{ "key": "X-Frame-Options", "value": "DENY" },
{ "key": "Referrer-Policy", "value": "strict-origin-when-cross-origin" }
]
}
]
}
ルール: ユーザーが本当に必要な場合のみ vercel.json を作成。不要なファイルを作成するとリポジトリにノイズが増える。
ステップ4 — デプロイ前チェックリスト
vercel を実行する前に確認:
-
.gitignoreに.vercel/,node_modules/,.env*が含まれている（シークレットをコミットしないこと） - コード内のファイルパスはすべて小文字 + 相対パス（Linuxは大文字小文字を区別）
- ハードコードされた
localhostURL がない - 外部スクリプト/スタイルシートはすべて
https:// - Next.jsに環境変数がある場合 → 設定が必要な環境変数のリストを準備
-
package.jsonがある場合 →npm install（または同等）がローカルで実行可能
明確な問題（例: HTML内のハードコードされたlocalhost）を発見した場合は、先に修正してからデプロイ。
ステップ5 — デプロイ
初めてのプロジェクトデプロイ（.vercel/project.json がない場合）:
vercel --prod --yes
--yes フラグは、フレームワーク自動検出からのすべてのデフォルト設定を受け入れます。Vercelは:
- スコープを尋ねる（
--yes時は自動でユーザーアカウントを選択） - フレームワークプリセットを検出
- ビルドコマンド + 出力ディレクトリを設定
- コードをプッシュ、ビルド、デプロイ
カスタムプロジェクト名が必要、またはユーザーが既存のプロジェクトにリンクしたい場合:
vercel link # 既存のプロジェクトにリンク（インタラクティブ）
vercel --prod # リンク後にデプロイ
プレビューデプロイ（非本番）:
vercel
→ https://<project>-<hash>.vercel.app 形式のプレビューURLを返却。本番に昇格する前にテスト用に使用。
再デプロイ（プロジェクトが既にリンクされている場合）:
vercel --prod
出力をキャプチャ — 標準出力から以下を解析:
Production: https://<project>.vercel.appInspect: https://vercel.com/...
この2つのURLをすぐにユーザーに報告。
ステップ6 — 確認と報告
デプロイ成功後:
- HTTPチェック:
curl -I https://<project>.vercel.appでライブURLを確認 — ステータス200 + SSLアクティブを確認。 - ユーザーへの報告: 以下のフォーマットで:
## ✅ デプロイ成功
**ライブURL**: https://<project>.vercel.app
**検査 / ログ**: https://vercel.com/<account>/<project>/<deployment-id>
**フレームワーク**: <Next.js | Vite | CRA | 静的HTML>
**ビルド時間**: <X秒>
### 次回のデプロイ
`vercel --prod` を実行するだけ
### オプション
- カスタムドメイン設定 → `setup domain <yourdomain.com>` と伝えてください
- 環境変数設定 → `add env <KEY>` と伝えてください
- ログ確認 → `vercel logs`
- ユーザーがカスタムドメインを要求した場合 →
references/domains.mdを読み、DNS手順を案内。
エッジケースと復旧
Vercelでビルド失敗、ローカルでは正常
よくある原因:
- 大文字小文字の区別:
import './Components/Header'はMacでは動くが、実際のディレクトリがcomponentsの場合、Linuxでは失敗。修正: 実際の大文字小文字に合わせて名前を変更。 - 依存関係の欠落: パッケージが
devDependenciesにあるが、ランタイムで必要 →dependenciesに移動。 - Nodeバージョンの不一致:
package.jsonに"engines": { "node": "20.x" }を追加、または.nvmrcを作成。
→ vercel logs <deployment-url> でログを取得し、読み、修正して再デプロイ。
プロジェクトが間違ったアカウント/プロジェクトにリンクされた場合
rm -rf .vercel/ を実行し、再び vercel --prod --yes を実行。または vercel link を使用して正しいプロジェクトを選択。
本番環境変数
vercel env add <KEY> production
# プロンプトで値を貼り付け
vercel env pull .env.production.local # 必要に応じてローカルにプル
.env* ファイルをコミットしないこと。.gitignore にまだない場合は追加。
認証の期限切れ
CLIトークンは期限切れになる可能性があります。vercel whoami が未承認を報告した場合 → vercel login を再実行。
フレームワーク別詳細リファレンス
プロジェクトのフレームワークに合ったリファレンスを参照:
| フレームワーク | リファレンス |
|---|---|
| Next.js (App / Pages router) | references/nextjs.md |
| React (Vite / CRA) | references/react-vite.md |
| 静的HTML | references/static-html.md |
| カスタムドメイン + DNS | references/domains.md |
| エラー & トラブルシューティング | references/troubleshooting.md |
公式リファレンス
- Vercel CLI ドキュメント: https://vercel.com/docs/cli
- Vercel ビルド設定: https://vercel.com/docs/projects/project-configuration
- Vercel 制限（無料枠）: https://vercel.com/docs/limits
- ステータスページ: https://www.vercel-status.com