GitHub Actionsを使ってVercelへデプロイできるやつを作った
私は現在
nexterias/actions-vercelというものを作っており、私は必要な時にこれを利用していくつもりです。
完成したらこの記事に使い方を書こうと思います。
と前回の記事で書いてしまったので、書こうと思います。
私が作ったActionに頼らなくてもいい方法と、GitHub Actionsを使ってVercelへデプロイするメリットなんかも上げているので気になる人は合わせて読んでみてください。
使い方
実際にワークフローを組むと下記のようになります。
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アカウントのアクセストークンを作成する
アカウントの設定から作成可能です。
-
TOKEN NAME
- 分かりやすい名前を入れましょう
-
SCOOP
- HobbyプランではFull Accountしか選択できないので、それを選択
-
EXPIRATION
- トークンの有効期限です
- 推奨はNo Expirationですが、自己管理が出来る人は短めにして定期的に交換するといいでしょう
作成したトークンはこの手順に従って、VERCEL_TOKENとしてシークレットに保存してください。
ワークフローを構築する
下記のようなファイルを作るだけです。
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でビルドするようになります。
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