Vercel とは？フロントエンドのデプロイプラットフォーム
Vercel はフロントエンドフレームワークと serverless 関数のためのデプロイプラットフォームで、Git 連携のデプロイ、プルリクエストごとの preview URL、グローバルな edge network で知られています。
Next.js を手がける Vercel は、モダンな web アプリのデプロイをほぼ摩擦のないものにします。Git リポジトリを接続すれば、push のたびに自動で build とデプロイが行われ、branch やプルリクエストごとに固有の preview URL が付きます。build、ホスティング、CDN、serverless または edge 関数を処理するため、その stack を自分で組み立てる必要がありません。
Git 駆動のデプロイ
Vercel は GitHub、GitLab、Bitbucket に接続します。branch への push が build とデプロイをトリガーし、production branch への merge が production へ昇格させます。Vercel が検出するため、一般的なフレームワークでは設定することがほとんどありません。
preview デプロイ
各プルリクエストに独自のライブ preview URL が付くため、レビュアーやステークホルダーは merge の前に実際の変更をクリックして確認できます。これは Vercel で最も愛される機能の 1 つで、レビュー workflow によく合います。
Vercel が実行するもの
- 静的および server-rendered なフロントエンドアプリ。
- backend ロジックのための serverless および edge 関数。
- 自動 HTTPS を備えたグローバルな CDN。
Vercel vs 自分で組み立てる
S3、CloudFront、Lambda で Vercel を再現することもできますが、Vercel は build、ホスティング、CDN、関数を優れたデフォルトとともに 1 つの製品にまとめています。トレードオフは、制御が減ることとプラットフォーム固有のモデルになることです。
CI/CD での役割
多くのチームにとって Vercel 自体が CI/CD として機能します。push で build、preview、デプロイです。追加の制御が欲しいチームは、まず GitHub Actions でテストとチェックを実行し、その後 Vercel CLI 経由でデプロイするか、Git 連携に任せます。required status checks により、production デプロイの前に merge をゲートできます。
重要なポイント
- Vercel はフロントエンドアプリと serverless 関数を Git から直接デプロイします。
- 各プルリクエストにレビュー用のライブ preview URL が付きます。
- CI/CD 全体を担うことも、追加チェックのために GitHub Actions と組み合わせることもできます。