GitHub ActionsでVercelにデプロイ

GitHub Actions経由のVercelデプロイメント

Vercelは組み込みのGit統合を提供していますが、GitHub Actionsでデプロイすることで、ビルドパイプラインをより細かく制御できます。デプロイ前にテスト、リンティング、カスタムチェックを実行できます。

ワークフローYAML

name: Deploy to Vercel

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

env:
  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Install Vercel CLI
        run: npm install -g vercel@latest

      - name: Pull Vercel Environment
        run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}

      - name: Build
        run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}

      - name: Deploy
        run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}

必要なシークレット

シークレット	取得場所
VERCEL_TOKEN	Vercelダッシュボード > Settings > Tokens
VERCEL_ORG_ID	ローカルでvercel linkを実行、.vercel/project.jsonを確認
VERCEL_PROJECT_ID	同じ.vercel/project.jsonファイル

プレビュー vs プロダクション

ワークフローはGitHub Actions式を使用してデプロイタイプを決定します：

• mainへのpush: --prodでプロダクションデプロイをトリガー
• Pull Request: プレビューデプロイを作成し、レビュアーにライブプレビューURLを提供

Git統合の代わりにActionsを使う理由

• デプロイ前にテストとリンティングを実行
• 特定のチェックに合格した場合のみデプロイ
• カスタムビルドステップや環境セットアップを使用
• 他のCI/CDステップ（データベースマイグレーション、通知）との統合