Vercelで新しいNext.jsプロジェクトをGitHubリポジトリと連携してデプロイした。その後、mainブランチにpushするたびに本番環境が自動更新されるのはなぜか。

解説

Vercelはプロジェクトのインポート時にGitHub側へWebhook（特定のイベント発生時に外部URLへHTTPリクエストを送る仕組み）を自動登録します。mainブランチへのpushが発生するとGitHubがそのWebhookを通じてVercelに通知し、Vercelがソースを取得してビルド・デプロイを実行します。これがいわゆるGit連携による自動デプロイの正体です。他の選択肢について補足します。CLIはローカルからの手動デプロイ用ツールであり、ファイル監視機能は持ちません。GitHub Actionsは別サービスであり、Vercelのデプロイとは独立しています（併用は可能ですがデフォルトでは無関係です）。ポーリング方式は変更検知に遅延が生じるため、Vercelはこの方式を採用していません。Webhookベースのデプロイで理解しておくべきことVercelの自動デプロイには、本番デプロイとプレビューデプロイの2種類があります。mainブランチ（Production Branch）へのpushは本番URLに反映され、それ以外のブランチへのpushやプルリクエストでは一意のプレビューURLが発行されます。この仕組みにより、レビュー中の変更を本番に影響させずに確認できます。vercel.jsonとプロジェクト設定の関係デプロイ時のビルドコマンドや環境変数は、Vercelのダッシュボード上のProject Settingsか、リポジトリ直下のvercel.jsonで設定します。たとえばビルドコマンドを変更したい場合は次のように書けます。{ "buildCommand": "npm run build", "outputDirectory": ".next" }ただし、Next.jsプロジェクトではVercelがフレームワークを自動検出してデフォルト値を適用するため、特別な要件がなければvercel.jsonは不要です。実務でよくあるつまずきポイントブランチ設定のミス: Production Branchがmainではなくmasterになっている場合、pushしても本番に反映されない。ダッシュボードのGit設定で確認できる環境変数の未設定: ローカルでは.envに書いた値がVercel上では未定義になる。ダッシュボードのEnvironment Variablesに登録が必要Webhookの権限不足: GitHub Organizationのリポジトリでは、Org管理者がVercelアプリのインストールを許可していないとWebhookが登録されずデプロイが動かない