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

# 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 アカウントにログインします。

```bash
npm install -g vercel
```

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

```bash
vercel login
```

vercelに登録しているメールアドレスを入力すると Vercel から認証メールが送信されます。メールに記載された手順に従って認証を完了してください。ここで、個人のメールアドレスを登録してしまうと結局vercelのメンバーを増やす必要があるので、統一したいメールアドレスを登録してください。

---

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

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

```bash
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)

```yaml
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)

```yaml
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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3758357/6afab665-ad84-4828-bcfb-87221c3e8c49.png)


#### 各種値の取得方法

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

![スクリーンショット 2025-03-26 13.19.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3758357/78a1e230-a09f-42da-800f-9d432f96ae69.png)


2. **`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経由のデプロイとデフォルトの自動デプロイが両方行われてしまいます。

```json
{
  "$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 連携が想定通りオフになっているか確認する。

---

## 参考資料

- [VercelへのデプロイをGitHub Actions経由で行うことでVercelチームメンバー以外でも開発に参加できるようにする](https://zenn.dev/ttskch/articles/691fb62fbb6b1b)