actions-vercel

Appearance

はじめる ​

このセクションでは、実際にnexterias/actions-vercelを利用してVercelにデプロイを行うための手順について説明します。

必要なもの ​

  • GitHubアカウント
  • Vercelアカウント
  • Vercel CLI

リポジトリとVercelプロジェクトの作成 ​

まずは、GitHub上にリポジトリを作成します。

bash
gh repo create --public --clone example-vercel-project
cd ./example-vercel-project

INFO

プライベートリポジトリを作成したい場合は、--publicフラグを削除して--privateフラグを付与してください。

次に、Vercel上にプロジェクトを作成します。

bash
vercel link

コマンドが正常に完了していれば、カレントディレクトリ上に.vercelというフォルダが作成され、その中にproject.jsonが作成されているはずです。

そのproject.jsonにprojectIdとorgIdという2つのプロパティが記載されているので、それぞれの値を控えてください。

bash
# projectId
cat ./vercel/project.json | jq -r '.projectId'

# orgId
cat ./vercel/project.json | jq -r '.orgId'

Vercelのアクセストークンを作成 ​

アカウントの設定に移動し、アクセストークンを作成してください。

項目説明
NAME任意の名前を入力
SCOPE作成したVercelプロジェクトがあるチームを選択
EXPIRATION任意の値を設定

上記の項目を埋めて、Createを押すとアクセストークンが手に入るので値を控えてください。

シークレット情報の登録 ​

  1. github,comからリポジトリのページにアクセス
  2. Settingsタブをクリック
  3. Securityセクションから、Secrets and variablesをクリック
  4. Secretsタブをクリック

New repository secretから、上記の値を以下のように登録します。

名前値
VERCEL_PROJECT_IDprojectIdの値
VERCEL_ORG_IDorgIdの値
VERCEL_TOKEN 作成したアクセストークン

GitHub Actionsの設定 ​

リポジトリに.github/workflowsディレクトリを作成し、その中にvercel.ymlというファイルを下記の内容を書き込んで作成してください。

yml
name: Vercel

on:
  push:
    branches: [main]
  pull_request:

concurrency:
  group: ${{ github.workflow }}-${{ github.ref }}
  cancel-in-progress: true

jobs:
  deploy:
    name: Deploy
    runs-on: ubuntu-latest
    permissions:
      contents: read
      deployments: write
      statuses: write
      pull-requests: write

    steps:
      - uses: actions/checkout@v4

      - uses: nexterias/actions-vercel@v1
        with:
          token: ${{ secrets.VERCEL_TOKEN }}
          org-id: ${{ secrets.VERCEL_ORG_ID }}
          project-id: ${{ secrets.VERCEL_PROJECT_ID }}
          production: ${{ github.ref == 'refs/heads/main' }}

これで、GitHub Actionsを利用してVercelにデプロイを行うことができるようになります。

GITHUB_TOKENの権限

jobs.*.permissionsで指定している項目について補足

権限説明
contentsactions/checkoutで必要
deploymentsデプロイメントを作成、更新する為にwriteに設定
statusesコミットステータスを作成、更新する為にwriteに設定
pull-requestsプルリクエストにコメントを作成する為にwriteに設定

contentsをreadだけに設定しても動作しますが、VercelのGitHub連携を模倣する機能が使えなくなります。