はじめに
プリセールスで提案や検証を回すとき、「動くデモ」を即座に出せるかが勝負どころです。特に Twilio のように GUI が薄い API 系だと、視覚的に伝わる動作確認環境があると圧倒的に進めやすい。
そこで自分は Vercel × Next.js を標準装備にしています。Vercel はデプロイが簡単でグローバル配信にも強く、GitHub 連携で CI/CD を自動化できます。最近は Codex / Claude Code を使った CLI ドリブンな開発が増えているので、本記事も CLI 中心でまとめます。
全体の流れ（フェーズ概要）
本記事は Vercel CLI を軸に、開発 → 構築 → デプロイ → テスト → 運用 を一気通貫で実行する手順です。
- プロジェクト準備 – Next.js の雛形とローカル開発環境を用意
- 初期デプロイ – Vercel に登録し Preview へデプロイ
- 開発・カスタマイズ –
vercel devでホットリロード開発 - 環境変数設定 –
.env.localと Vercel 環境変数を CLI 管理 - Blob（Storage）実装 – SDK でアップロード等を組み込み
- GitHub 連携 – Push と同時に CI/CD を回す
- テスト & ログ確認 – CLI で状態・ログを素早く把握
- 運用・更新 – Push 自動デプロイ / 即時本番反映
💥 フェーズ別のコマンドフロー（早見表）
「全部を手入力」する場面は多くありません（自分は MCP + Codex/Claude Code にまとめて投げることが多い）が、必要なときに迷わないよう、最小のコマンド列だけに絞ってあります。またこれらのコマンドのインストールやVercelやGithubの設定などはすべて省いています。それぞれのコマンドですでにログイン済みであることが前提になります。
| フェーズ | # | コマンド | 目的/メモ |
|---|---|---|---|
| プロジェクト準備 | 1 | mkdir my-app && cd my-app |
新規フォルダ作成 |
| 2 | npm i -g vercel |
Vercel CLI をインストール | |
| 3 | vercel login |
ブラウザ認証でログイン | |
| 4 | vercel init nextjs |
Next.js テンプレから初期化（create-next-app でも可） | |
| 5 | npm install |
依存関係をインストール | |
| 6 | vercel dev |
ローカル開発（http://localhost:3000） | |
| 初期デプロイ | 7 | vercel project create |
Vercel 上にプロジェクト作成 |
| 8 | vercel |
Preview（デフォルトブランチ外）に初回デプロイ | |
| 開発・カスタマイズ | 9 | （コード編集） | ページや API ルートを追加 |
| 10 | vercel dev |
ローカル確認（自動リロード） | |
| 環境変数設定 | 11 |
.env.local を作成 |
例: API_URL=https://api.example.com
|
| 12 | vercel env add API_URL production |
本番の環境変数を登録 | |
| 13 | vercel env add API_URL preview |
プレビューの環境変数を登録 | |
| 14 | vercel env ls |
登録済み変数の一覧 | |
| 15 | vercel env pull .env.local |
Vercel 上の値をローカルへ同期 | |
| Blob（Storage）実装 | 16 | npm i @vercel/blob |
SDK を追加（アップロード準備） |
| 17 | vercel storage create blob my-blob-store --region sfo1 |
Blob ストレージを作成 | |
| 18 | vercel env add BLOB_READ_WRITE_TOKEN production |
本番トークンを登録 | |
| 19 | vercel env add BLOB_READ_WRITE_TOKEN preview |
プレビュー用トークンを登録 | |
| 20 | vercel blob put ./public/test.jpg --path uploads/test.jpg |
CLI でアップロードテスト | |
| GitHub 連携 | 21 | git init |
Git 初期化 |
| 22 | git add . && git commit -m "Initial commit" |
初回コミット | |
| 23 | git remote add origin https://github.com/<user>/my-app.git |
リモート登録 | |
| 24 | git branch -M main |
メインブランチ作成 | |
| 25 | git push -u origin main |
GitHub へ Push | |
| 26 | vercel link |
ローカルを既存 Vercel プロジェクトにリンク | |
| 27 | vercel git connect --yes |
（任意）Vercel 側から GitHub を接続 | |
| 本番デプロイ | 28 | vercel --prod |
Production にデプロイ |
| テスト & ログ確認 | 29 | vercel open |
デプロイ URL をブラウザで開く |
| 30 | vercel inspect <deployment-url> |
環境/リージョンなど詳細表示 | |
| 31 | vercel logs <deployment-url> |
ログ一括表示（エラー調査に便利） | |
| 32 | vercel blob list |
Blob 内のファイル状況を確認 | |
| 33 | vercel env ls |
環境変数が反映されているか確認 | |
| 34 | vercel env pull |
最新の環境値を同期 | |
| 運用・更新 | 35 | git commit -am "update feature" |
変更をコミット |
| 36 | git push |
Push → Preview が自動デプロイ | |
| 37 | vercel --prod |
即時で本番反映 | |
| 38 | vercel project ls |
使用中プロジェクトの一覧 |
🔍 テストフェーズの CLI まとめ（用途別）
GUI を開かず、CLI だけで大体の状況は把握できます。
| 目的 | コマンド | 詳細 |
|---|---|---|
| ブラウザで結果確認 | vercel open |
デプロイ URL を自動で開く |
| デプロイ詳細情報 | vercel inspect <url> |
環境・リージョン・ルーティング情報 |
| ログ全体確認 | vercel logs <url> |
API ログやエラーを一括表示 |
| Blob 内確認 | vercel blob list |
ファイル一覧（接頭辞フィルタも可） |
| 環境変数確認 | vercel env ls |
production / preview / development |
ざっくりとした開発〜運用の一連の流れ
開発開始
↓
vercel dev でローカル開発
↓
vercel で Preview デプロイ
↓
vercel logs で動作検証
↓
vercel --prod で本番反映
↓
vercel logs で運用監視
実務ポイント
-
.env.localは Git に含めない（Vercel 側のvercel envを正とする） - Blob は SDK 実装後にストレージ作成/トークン付与するのが安全
-
vercel logsとvercel inspectは不具合切り分けの最短ルート - GitHub 連携後は Push → Preview → Merge → Production で自動化できる
- 初期化は
vercel init nextjsでもnpx create-next-appでも OK（チーム慣例で統一） - 既存プロジェクトの設定や環境値は
vercel pullでローカル同期できる
最後に
実際にこのコマンドを使って実装した手順やコマンドの実行結果などについて、今後のBlogで掲載します。