vercel-deployment

Vercel のデプロイ

概要

Vercel は、自動 CI/CD、プレビュー環境、エッジインフラストラクチャを備えた、フロントエンドフレームワークやサーバーレス関数をデプロイするためのクラウドプラットフォームです。プロジェクトは、vercel.json（またはプログラムによる設定の vercel.ts）、Vercel ダッシュボード、または Vercel CLI で設定します。

使用するケース： 静的サイト、SSR フレームワーク（Next.js、SvelteKit、Nuxt）、サーバーレス API ルート、エッジ関数、プルリクエストごとのプレビュー環境、モノレポのデプロイ。

使用しないケース： 長時間実行されるバックエンドプロセス（コンテナを使用）、WebSocket サーバー（専用のインフラストラクチャを使用）、高負荷なコンピューティング処理（クラウド VM を使用）、永続的なファイルシステムへのアクセスが必要なアプリケーション。

クイックリファレンス

パターン	ツール／API	主なポイント
プロジェクト設定	vercel.json または vercel.ts	プロジェクトのルートに配置し、ビルド／ルーティング／関数を制御します
リライト	rewrites 配列	URL を変更せずにリクエストを転送先へルーティングします
リダイレクト	redirects 配列	URL を変更します。permanent: true で 301 になります
ヘッダー	headers 配列	パスパターンごとにカスタムレスポンスヘッダーを設定します
クリーン URL	cleanUrls: true	.html 拡張子を削除します
末尾のスラッシュ	trailingSlash: false	URL の形式を統一します
環境変数	ダッシュボードまたは vercel env	本番、プレビュー、開発環境ごとにスコープを設定します
カスタムドメイン	プロジェクト設定 > ドメイン	ルートドメインには A レコード、サブドメインには CNAME を設定します
プレビューのデプロイ	PR ごとに自動	プッシュごとに固有の URL が割り当てられます
エッジ関数	export const runtime = 'edge'	V8 分離環境、低レイテンシ、Node.js API の利用に制限あり
サーバーレス関数	api/ ディレクトリまたはフレームワークのルート	Node.js ランタイム、完全な API アクセス
CLI によるデプロイ	vercel または vercel --prod	デフォルトはプレビュー、--prod で本番環境へ
デプロイの昇格	vercel promote <url>	既存のプレビューを本番環境へ昇格させます
モノレポ	プロジェクトごとのルートディレクトリ設定	1 つのリポジトリから複数の Vercel プロジェクトを構成できます
GitHub 連携	プッシュ時に自動	ブランチごとのプレビューを備えた、設定不要の CI/CD
プログラムによる設定	@vercel/config を使用した vercel.ts	型付きで動的な、別の設定方法です
Fluid Compute	新規プロジェクトではデフォルトで有効	複数リクエストを処理するワーカー、デフォルトの実行時間は 300s
ローリングリリース	モニタリングを伴う段階的なロールアウト	トラフィックを段階的に切り替え、自動ロールバックのトリガーを設定できます
ファイアウォールルール	vercel.json の WAF 設定	ダッシュボード、API、または設定ファイルで脅威をブロックします

よくある間違い

間違い	正しい方法
プレビュー固有の値に .env.production を使用する	プレビュー環境にスコープを設定した Vercel 環境変数を使用します
VERCEL_URL にプロトコルが含まれると想定する	手動で https:// を先頭に追加します。安定した本番 URL には VERCEL_PROJECT_PRODUCTION_URL を使用します
エイペックスドメインだけを追加し、www を追加しない	どちらかで 404 が発生するのを避けるため、yourdomain.com と www.yourdomain.com の両方を追加します
エッジ関数で Node.js API を使用する	エッジランタイムで使用できるのは V8 のみです。fs、path、process は利用できません
静的リダイレクトが 1024 件を超える	リダイレクトが多数ある場合は bulkRedirects プロパティを使用します（CSV/JSON/JSONL）
エッジでストリーミングせずに QueryClient を作成したり、フェッチしたりする	エッジ関数で時間のかかる処理を行う場合は、ストリーミングレスポンスを使用します
プランの上限を超える maxDuration を設定する	Fluid Compute のデフォルトは 300s です。Hobby は 60s、Pro は 300s、Enterprise は最大 900s です
カスタムドメインの DNS レコードが競合する	重複する A レコードを削除し、Vercel を参照するレコードだけを残します
デプロイ前に CI でビルドの完了を待たない	CI で確実にデプロイするには、vercel build を実行してから vercel deploy --prebuilt を実行します
モノレポのルートディレクトリ設定を無視する	正しくビルドできるよう、Vercel ダッシュボードでプロジェクトごとにルートディレクトリを設定します

委任

• インフラストラクチャのレビュー：Task エージェントを使用してデプロイ設定を監査します
• 環境のデバッグ：Explore エージェントを使用して環境変数の問題を追跡します
• CI/CD パイプラインのレビュー：code-reviewer エージェントを使用して GitHub Actions のワークフローをレビューします

参考資料

• 設定：vercel.json、ビルド、リライト、リダイレクト、ヘッダー
• 環境変数とカスタムドメイン
• エッジ関数とサーバーレス関数
• CLI コマンドと CI/CD の統合