前提

この記事では、すでにGitHubのプロジェクトをVercelにデプロイしていることを前提としています。まだデプロイしていない場合は、以下の記事も併せてご覧ください。

実装手順

基本的にはVercel公式の通りに実装すれば問題ありませんが、以下から詳しく解説します。

ファイルの作成

GitHub Actionsを動作させるために、まずファイルを作成します。

プロジェクトのルートに .github ディレクトリを作成し、その中にさらに workflows ディレクトリを作成します。最終的に /.github/workflows/ という構成になります。

workflows の中に、任意の名前で .yml ファイルを作成します。今回は deploy_vercel.yml とします。このファイルに、Vercel公式サイトに記載されているコードをコピーしてください。

name: Vercel Preview Deployment
env:
  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
on:
  push:
    branches-ignore:
      - main
jobs:
  Deploy-Preview:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - 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 ブランチにプッシュされた際にVercelにデプロイされるようになっています。develop ブランチにプッシュした際にデプロイしたい場合は、以下のように設定を変更してください。

on:
  push:
    branches-ignore:
      - develop

これでコードの実装は完了です。

シークレットの設定

次に、今回デプロイを行うGitHubリポジトリにリポジトリシークレットを設定します。

詳しい設定方法については、以下の記事をご覧ください。

必要なシークレットは、ymlファイルに記述されていた以下の3つです。

${{ secrets.VERCEL_ORG_ID }}
${{ secrets.VERCEL_PROJECT_ID }}
${{ secrets.VERCEL_TOKEN }}

VERCEL_ORG_IDの取得

Vercelの右上にあるアカウントアイコンをクリックし、Account Settingsを開きます。

Generalタブの中にあるVercel IDが該当します。

VERCEL_PROJECT_IDの取得

Vercelで自動デプロイを設定するプロジェクトを開きます。

SettingsのGeneralタブから確認できます。

VERCEL_TOKENの取得

Account SettingsのTokensタブでトークンを作成します。

トークン作成時の設定は以下の通りです。

• TOKEN_NAME: 任意の名前
• SCOPE: 該当するプロジェクトを選択
• EXPIRATION: 有効期限を任意に選択

ここで作成したトークンを使用します。

最終的に、リポジトリシークレットに以下を設定すれば完了です。

VERCEL_ORG_ID = <取得したID>
VERCEL_PROJECT_ID = <取得したプロジェクトID>
VERCEL_TOKEN = <作成したトークン>

GitHubにプッシュ

最後にGitHubにプッシュします。

プッシュ後即座にGitHub Actionsが動作し、最終的にはVercelへのデプロイが完了します。

最後に

ここまで、VercelのデプロイをGitHub Actionsを経由して行う方法を紹介しました。難しい設定も必要なく、簡単に実装できるかと思います。ぜひ一度試してみてください。

ここまでお読みいただき、ありがとうございました。