Vercel Teamに入らずにデプロイしたい！トークンだけで実現するGitHub Actions CD

はじめに

Next.jsのCDパイプラインを作成しました。

現在、受託開発を行なっていて、Vercelにデプロイしたいが依頼者のVercelアカウントにログインすることはできない。Teamにメンバーとして参加する方法もあるようだが、一人につき20ドル必要。

個人開発の時のデプロイに比べてめんどくささを感じました。（個人開発の時はGitHubリポジトリを連携するだけでよかったため。）

対象者

• 他人のVercelアカウントでデプロイしたい
• GitHubリポジトリは自分のものを使いたい
• できるだけお金をかけたくない

手順

1. トークンを発行する

Vercelアカウント所持者にトークンを発行してもらいます。
Vercelダッシュボード -> 自分のアイコン -> 歯車マーク -> Tokens

2. プロジェクトを作成する

npx vercel --token <Vercelトークン>

上記のコマンドをプロジェクトルートで実行し、プロジェクトを作成します。

3. 環境変数を設定する

2で作成された.vercel/project.jsonに

• projectId
• orgId
  が記載されているので、それぞれVERCEL_PROJECT_ID, VERCEL_TEAM_IDとして、
  リポジトリのSettings → Secrets and variables → Actionsから保存します。

手順1で発行してもらったトークンも、VERCEL_TOKENという名前で保存します。

Supabaseを使う場合はSUPABASE_URL, SUPABASE_PUBLISHABLE_KEYもシークレットとして保存してください。

4. CDパイプラインを作成する

.github/workflows/deploy.yml

name: Deploy

on:
  push:
    branches:
      - main
  workflow_dispatch:

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Check out the code
        uses: actions/checkout@v3

      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: "20"

      - name: Install dependencies
        run: npm install

      - name: Deploy to Vercel
        run: |
          npx vercel --prod \
          --token ${{ secrets.VERCEL_TOKEN }} \
          --yes \
          --build-env NEXT_PUBLIC_SUPABASE_URL=${{ secrets.SUPABASE_URL }} \
          --build-env NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=${{ secrets.SUPABASE_PUBLISHABLE_KEY }}
        env:
          VERCEL_ORG_ID: ${{ secrets.VERCEL_TEAM_ID }}
          VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}

上記のファイルを配置します。
今回はSupabaseを使用しているので環境変数としてSupabaseのシークレットも渡していますが、利用しない場合は該当箇所を消してください。

5. ワークフローを動かす

mainに変更をpushするとワークフローが動き、デプロイされます。

参考文献

おわりに

Vercelアカウントにログインできないとこんなデプロイがめんどくさくなることに驚きました。
また、Vercelにログインして、リポジトリを連携させるやり方にもデメリットはあって、共同開発者（Vercelアカウントの所持者でない）がPRをマージしてもCDに失敗する（権限がないから）ということです。色々気づきがありました。