LoginSignup
0
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@ponta8240(ponta8240)

チーム開発におけるvercel の自動デプロイでテスト落ちしないようにする。

Last updated at Posted at 2025-03-26

GitHub Actions で Vercel デプロイを自動化する（Preview環境と本番環境の分離）

はじめに

vercelでチーム開発をする際に何も考えずに設定してしまうと開発メンバーの人数分の課金をする必要が出てきます（テストが落ちることを無視すれば問題はないです。）この問題を解決するためにGithub Actionsを用いて特定の一つのアカウントでデプロイをするように変更しました。その際のフローを社内資料としての役割も踏まえてまとめました。

前提条件

  • Vercel アカウントをお持ちであること
  • GitHub アカウントをお持ちであること
  • Vercel にデプロイするプロジェクトが GitHub リポジトリに存在すること
  • ローカル環境に Node.js と npm (または yarn) がインストールされていること

この記事でやること

  1. ローカル環境で Vercel CLI を設定
  2. GitHub リポジトリに Vercel の設定をリンク
  3. GitHub Actions のワークフローファイル (Preview 環境用と本番環境用) を作成
  4. GitHub Secrets に必要な情報を設定（VERCEL_TOKEN, VERCEL_ORG_ID, VERCEL_PROJECT_ID）
  5. vercel.json を作成して、Vercel の Git 連携を無効化 (推奨)
  6. GitHub リポジトリに変更をプッシュして自動デプロイを確認

手順

1. ローカル環境で Vercel CLI を設定

まず、ローカル環境に Vercel CLI をインストールし、Vercel アカウントにログインします。

npm install -g vercel

インストールが完了したら、以下のコマンドでログインします。

vercel login

メールアドレスを入力すると Vercel から認証メールが送信されます。メールに記載された手順に従って認証を完了してください。

2. GitHub リポジトリに Vercel の設定をリンク

次に、ローカルのプロジェクトディレクトリで下記コマンドを実行し、Vercel プロジェクトをリンクします。

vercel link

コマンドを実行すると、いくつかの質問が表示されます。

  • Set up "[プロジェクトディレクトリ名]"? : yes
  • Which scope should contain your project? : ご自身の Vercel アカウントを選択
  • Link to existing project? : yes
  • What’s the name of your existing project? : 既存の Vercel プロジェクト名を入力

正常にリンクされると、.vercel ディレクトリが作成されます。このディレクトリは Vercel プロジェクトの設定を保持するために使用されます。
※ .vercel ディレクトリは、GitHub リポジトリにコミットしてください。

3. GitHub Actions のワークフローファイルを作成

.github/workflows ディレクトリ内に Preview 環境用 と 本番環境用 の 2 つの YAML ファイルを配置します。

Preview 環境用 (preview.yml)

name: Vercel Preview Deployment
env:
  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}

on:
  push:
    branches-ignore:
      - main  # mainブランチへのプッシュは無視

jobs:
  Deploy-Preview:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

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

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

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

      - name: Deploy Project Artifacts to Vercel
        run: vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }}

このワークフローは main ブランチ以外へのプッシュをトリガーし、Preview 環境にデプロイします。

本番環境用 (production.yml)

name: Vercel Production Deployment
env:
  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}

on:
  push:
    branches:
      - main  # mainブランチへのプッシュでトリガー

jobs:
  Deploy-Production:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

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

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

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

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

このワークフローは main ブランチへのプッシュをトリガーし、本番環境にデプロイします。

4. GitHub Secrets に必要な情報を設定

上記のワークフローファイルで使用されている以下の 3 つの値を、GitHub リポジトリの Secrets and variables → Actions から Secrets として登録してください。

  • VERCEL_TOKEN
  • VERCEL_ORG_ID
  • VERCEL_PROJECT_ID

スクリーンショット 2025-03-26 13.18.35.png

各種値の取得方法

  1. VERCEL_TOKEN (Vercel Account Settings → Tokens から発行)
    • Vercel ダッシュボードで「Account Settings」を開き、「Tokens」セクションから新規トークンを作成します。
    • 作成後、一度だけ表示されるトークン文字列をコピーし、GitHub Secrets の VERCEL_TOKEN に登録してください。

スクリーンショット 2025-03-26 13.19.52.png

  1. VERCEL_ORG_ID と VERCEL_PROJECT_ID (Vercel ダッシュボード or .vercel/project.json で確認可能)
    • Vercel ダッシュボードでプロジェクトを開き、「Settings」→「General」のセクションに Organization ID と Project ID が表示されます。
    • もしくは、.vercel/project.json にある "orgId" や "projectId" から確認できます。
    • それぞれをコピーし、GitHub Secrets の VERCEL_ORG_ID, VERCEL_PROJECT_ID に登録してください。

5. vercel.json を作成して、Vercel の Git 連携を無効化 (推奨)

Vercel の自動デプロイ (Git連携) を無効化したい場合は、プロジェクトのルートに vercel.json ファイルを用意し、以下のように設定します。これを設定しない場合、Github Actions経由のデプロイとデフォルトの自動デプロイが両方行われてしまいます。

{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "git": {
    "deploymentEnabled": false
  }
}

この設定により、Vercel はリポジトリへのプッシュを監視しなくなり、GitHub Actions からの明示的なデプロイだけを受け付けるようになります。
※ vercel.json は GitHub リポジトリにコミットしてください。

6. GitHub リポジトリに変更をプッシュして自動デプロイを確認

以上のファイルをコミットして GitHub リポジトリにプッシュすると、以下のように自動デプロイがトリガーされます。

  • main ブランチ以外にプッシュ : Preview 環境へのデプロイ
  • main ブランチへのプッシュ : 本番環境へのデプロイ

GitHub Actions の実行状況は、リポジトリの「Actions」タブから確認できます。

まとめ

  • GitHub Actions でビルドして Vercel へデプロイすることで、Preview / Production 環境の運用が簡単かつ安全になります。
  • vercel.json で deploymentEnabled をオフにすると、Vercel 側の自動デプロイを止められます。
  • 必要なトークンや ID は GitHub Secrets に登録し、ワークフローで参照する仕組みがおすすめです。

トラブルシューティング

  1. デプロイが失敗する場合
    • GitHub Actions のログを確認し、エラーメッセージを基に問題を特定する。
  2. API トークンが無効な場合
    • 正しいトークンが GitHub Secrets に設定されているか再確認する。
  3. Organization ID または Project ID が無効な場合
    • Vercel ダッシュボード or .vercel/project.json で再度確認する。
  4. ビルドエラーが発生する場合
    • ローカル環境でビルドが通るか確認し、依存関係や設定を見直す。
  5. デプロイが反映されない場合
    • vercel.json の "deploymentEnabled": false を見直し、Git 連携が想定通りオフになっているか確認する。

参考資料

0
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?