VercelにGitHub Actionsを用いてデプロイする方法

GitHubレポジトリのフォルダ構成が以下のとおりであるという前提で、masterブランチにpushされたらfrontendをvercelにデプロイするようにします。

project
 ├backend
 └frontend
 └.github
     └workflows
         └preview.yaml

手順

preview.yamlに処理を書いていきますが、基本的には以下のドキュメントのとおりですが、masterブランチにpushされたときにデプロイするようにしたかったので以下のように変更しました。

# 変更前
on:
  push:
    branches-ignore:
      - main

# 変更後
on:
  push:
    branches: ["master"]

VERCEL_ORG_IDとVERCEL_PROJECT_IDの調べ方

ドキュメントで指定されている
${{ secrets.VERCEL_PROJECT_ID }}と、
${{ secrets.VERCEL_PROJECT_ID }}の調べ方を説明します。
まず、VERCEL_ORG_IDは以下のとおりAccount SettingsのVercel IDです。

次に、VERCEL_PROJECT_IDは以下のとおりprojectsのSettingsのProject IDです。

VERCEL_TOKENについて

VERCEL_TOKENは以下の場所で作成したトークンを用います。

注意点

frontendをデプロイしたかったのでyamlファイルで「working-directory」として「./frontend」を指定していました。しかし、以下の記事で紹介しているとおり、「Root Directory」で「frontend」を指定しているので、「working-directory」でも「./frontend」を指定すると、project/frontend/frontendを参照するようになりうまくいきません。したがって、yamlファイルで「working-directory」の指定は不要です。