VercelとGitHubの自動プレビューデプロイ設定方法

VercelとGitHubの連携による自動プレビューデプロイとは

VercelとGitHubを連携させることで、特定のブランチに変更を加えるたびに自動的にプレビュー環境が生成される仕組みを実現できます。この方法は、Web開発者やDevOpsエンジニアにとって、コード変更後の即時確認やチーム間のレビュー効率化に非常に有効です。特に、Pull Requestを作成した際に自動で一時的なURLが生成されるため、本番環境への影響を最小限に抑えながら検証できる点が大きなメリットです。

VercelでのGitHubリポジトリ連携手順

VercelとGitHubを連携させるには、以下の3つのステップで完了します。手順は直感的ですが、初期設定の際は権限確認を忘れずに。

GitHubアカウントの準備

• Vercelアカウントにログインし、「New Project」からGitHubリポジトリを選択する
• 初回接続時はGitHubアカウントとの連携許可が必要になる（OAuth認証）
• OAuth認証とは：OAuthは「開発者アカウントと外部サービスの連携を安全に行う仕組み」です。VercelがGitHubにアクセスする権限を、ユーザーの承諾に基づいて付与します。

Vercel側での接続設定

1. リポジトリ選択後、「Connect to GitHub」をクリック
2. リポジトリの権限をVercelに付与する（管理者権限不要）
3. 接続完了後に自動でプロジェクトが生成される場合も

権限確認と初期設定

• リポジトリアクセス時に「Read and Write access」が必要な場合は、GitHub側で権限を調整
• 初期デプロイ時にエラーが出る際は、リポジトリの.vercelディレクトリに設定ファイルが存在するか確認

ブランチベースの自動デプロイ設定方法

Vercelではブランチ名に基づいて環境を自動判別します。例えば「main」ブランチは本番環境、「develop」や「feature/XXX」はプレビュー環境と紐づけ可能です。

対象ブランチの選択

• プロジェクト設定の 「Git」タブ で対象となるブランチを選択
• 「Production」には通常mainブランチを、「Preview」に開発用ブランチを指定

環境名の指定

デプロイトリガーの有効化

• 「Deployments」タブで 「Triggers」 を編集し、以下の設定を実施：
• Branch Filter: 特定のブランチ名（例: feature/*）を指定
• Build only when requested: デプロイを手動にするオプション

Preview環境が生成される仕組みと特徴

VercelのPreview環境は、Pull Requestを作成した際に自動で作成されます。この仕組みにより、コード変更が本番に反映される前からユーザー体験やUI確認ができるようになります。

Pull Request時の自動作成

• GitHubでPull Requestを作成すると、Vercel側で以下が実行：
• ブランチの差分を検出
• 指定された環境（Preview）にデプロイ
• 一時的なURLを生成し、通知を送信

一時的なURLの発行方法

• URLは「https://<branch-name>-<random-id>.vercel.app」の形式で自動生成される
• 各プレビュー環境は最大24時間保持され、期限切れ後は削除される
  

  ソース参照: Vercel公式ドキュメント

本番環境との違い

GitHub Actionsとの統合方法

GitHub ActionsとVercelを連携させることで、コードのビルド・テスト・デプロイを自動化できます。特にCI/CDワークフローの強化に効果的です。

Vercel CLIの導入手順

1. GitHubリポジトリ内に以下のコマンドでインストール：
   bash
npm install -g vercel

2. 注意: npm install -g vercel はVercel CLIをローカルにインストールする方法であり、GitHub Actionsとの関係はありません。

3. または、vercel.jsonファイルを作成し設定を反映

ワークフロー設定ファイルの作成

• .github/workflows/deploy.ymlに以下を記述：
  yaml
name: Deploy to Vercel
on:
push:
branches:
- feature/*
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- run: npm install
- run: npx vercel --prod

継続的インテグレーションの流れ

1. GitHub Actionsがブランチ変更を検出 → 自動でコードビルド
2. ビルド成功後、Vercelにデプロイ指示 → Preview環境生成
3. 完了後に通知メールまたはSlackなどへ報告

.vercelディレクトリとvercel.jsonの存在確認手順

プロジェクト内の.vercelディレクトリおよびvercel.jsonファイルが正しく配置されているかを検証するには、以下のステップを実施してください。

手順1: ディレクトリの存在確認

• テキストエディタやVS Codeでプロジェクトルートへアクセス
• .vercel フォルダが表示されているか確認（隠しフォルダになる場合があります）

手順2: vercel.jsonファイルの内容確認

• .vercel/vercel.jsonを開き、以下の設定が含まれているかチェック：
  json
{
"version": 2,
"builds": [
{
"src": "index.html",
"use": "@vercel/static"
}
]
}

手順3: Vercel CLIでの確認（オプション）

• 端末で以下のコマンドを実行：
  bash
vercel env list

• vercel.jsonに定義された環境変数が表示される場合、設定は正しいと判断できます。

環境変数の正しい設定方法と注意点

本番環境用・開発環境用の環境変数を分けて設定することで、セキュリティリスクを最小化できます。特にAPIキー類はVercel側にのみ保存し、GitHub Secretsからは参照しないようにしましょう。

Vercel側での変数追加手順

1. Vercelダッシュボード → 「Project Settings」 から環境変数設定
2. 「Environment Variables」タブで以下を入力：
3. Key: API_KEY
4. Value: 実際の値（例: abc123xyz）
5. Target: Production / Preview を選択

GitHub Secretsからの参照方法

• 以下のコードを.env.localやvercel.jsonに記述：
  json
{
"env": {
"API_KEY": "${GITHUB_SECRET_API_KEY}"
}
}

セキュリティ上のポイント

重要: GitHub Secrets内にAPIキーを保存していても、Vercel側に設定していない変数は使用できません。常に両プラットフォームで環境変数の整合性を確認してください。

• GitHub Secretsに機密情報を保存する際は、vercel.json内のenvセクションで明示的に参照しない限り、Vercelはそれらを読みません。

さっそくVercelとGitHubを連携して自動プレビューデプロイを試してみましょう

本記事で紹介した手順を参考に、VercelとGitHubを連携させた自動プレビューデプロイの設定を今すぐ実施してください。コード変更後の即時確認やチームレビュー効率化が可能になります。特にGitHub Actionsとの統合により、CI/CDワークフローもスムーズに構築できます。

記事を参考にさっそくVercelとGitHubの連携を試してみましょう