私は現在nexterias/actions-vercelというものを作っており、私は必要な時にこれを利用していくつもりです。
完成したらこの記事に使い方を書こうと思います。

と前回の記事で書いてしまったので、書こうと思います。

私が作ったActionに頼らなくてもいい方法と、GitHub Actionsを使ってVercelへデプロイするメリットなんかも上げているので気になる人は合わせて読んでみてください。

使い方

実際にワークフローを組むと下記のようになります。

.github/workflows/vercel.yml

name: Vercel

on:
  push:
  pull_request:

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' }}

入力しなければならないものは多いものの、上記の設定ファイルだけで本家のvercle-botに少し動作を近付けることができます。

導入方法

下記のリストに書かれているものが必要です。

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

Vercelアカウントを用意してVercel CLIを導入したら、vercel loginコマンドでVercelアカウントにログインしている状態にまでしてください。

Vercelプロジェクトを作成する

$ gh repo create --private --clone example-vercel-project # 既にリポジトリがある場合は git clone してください
$ cd example-vercel-project
$ vercel link

プロジェクトIDとアカウントID（またはチームID）の取得

vercel linkコマンドが正常に完了していれば、カレントディレクトリの中に.vercelフォルダが作成されるのですが、その中にあるproject.jsonに**プロジェクトID（projectId）とアカウントID（orgId）**の２つの情報が含まれているので、値を取り出してこの手順に従って

projectIdをVERCEL_PROJECT_IDとしてシークレットに追加
orgIdをVERCEL_ORG_IDとしてシークレットに追加

上記の２つの操作を行ってください。

ダッシュボードから取得する方法

Vercelに既存のプロジェクトが存在している場合のみVercel CLI不要で、projectIdとorgIdを取得可能です。

Vercelアカウントのアクセストークンを作成する

アカウントの設定から作成可能です。

https://vercel.com/account/tokens

TOKEN NAME
- 分かりやすい名前を入れましょう
SCOOP
- HobbyプランではFull Accountしか選択できないので、それを選択
EXPIRATION
- トークンの有効期限です
- 推奨はNo Expirationですが、自己管理が出来る人は短めにして定期的に交換するといいでしょう

作成したトークンはこの手順に従って、VERCEL_TOKENとしてシークレットに保存してください。

ワークフローを構築する

下記のようなファイルを作るだけです。

.github/workflows/vercel.yml

name: Vercel

on:
  push:
  pull_request:

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' }} # main ブランチにpushされたら本番環境にデプロイする

ワークフローを動かす

mainブランチでgit add .してgit pushすればデプロイが始まります。

これで導入手順は終わりとなります。

GitHub Actionsでビルドしてデプロイする

nexterias/actions-vercelはvercel buildとvercel deploy --prebuiltを使用してGitHub Actionsでビルドして、Vercelにデプロイする方法をサポートしています。
これにより、Vercelでのビルド時間がゼロになるため使えるなら使った方がお得でしょう！（特にHobbyプランの人）

下記のように書き換えるだけで、GitHub Actionsでビルドするようになります。

.github/workflows/vercel.yml

name: Vercel

on:
  push:
  pull_request:

jobs:
  deploy:
    name: Deploy
    runs-on: ubuntu-latest
    permissions:
      contents: read
      deployments: write
      statuses: 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 }}
          github-token: ${{ secrets.GITHUB_TOKEN }}
          production: ${{ github.ref == 'refs/heads/main' }} # main ブランチにpushされたら本番環境にデプロイする
+         prebuilt: true

Vercelプロジェクトの設定について

ダッシュボードを開いて、プロジェクトページに飛んでSettingsから変更してください。

あるいはvercel.jsonを配置して、デプロイすれば反映されます。

`macos-latest`と`windows-latest`

nexterias/actions-vercelはGitHub-hosted runnerで使える全てのイメージで使えます。

もし動かない場合はGitHubで報告してもらえるとありがたいです。

おわり

nexterias/actions-vercelの実装はGitHubから閲覧できます。

Vercel CLIを使っていい感じにやってるだけなんで、そんな複雑なプログラムではないです。
vercel deploy時に渡すメタデータを調べるのにちょっと苦労した記憶があります。（値ミスるとダッシュボードからプロジェクトページが閲覧出来なくなって焦ったことがありました）

後は英語で説明が書けてないのでなんとかしたいところです。

Discussion