#はじめる

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

#必要なもの

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

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

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

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

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

vercel link

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

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

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

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

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

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

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

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

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

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

#GitHub Actionsの設定

リポジトリに.github/workflowsディレクトリを作成し、その中にvercel.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@v7

      - uses: nexterias/actions-vercel@v2
        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にデプロイを行うことができるようになります。