GitHub Actionsを使ってVercelへデプロイする
VercelプロジェクトをGitHub上の個人アカウントじゃない組織アカウントにあるリポジトリに紐付けようとしたらProプランにしないとできないぜ！みたいなことを言われてしまい途方に暮れたのでじゃあGitHub Actions使ってVercelにデプロイしてやるぜ！っていうお話です。
メリット
- HobbyプランでもGitHubの組織アカウントにあるリポジトリを、Vercelに自動デプロイできる
- 一人だけでProプラン契約してチームを作成する必要するまでもないという場合
- CIでビルドしてVercelへデプロイすることで、Vercelでのビルド時間をゼロにできる
Vercelプロジェクトを作成する
昔は空のプロジェクトをダッシュボードから作れた気がするのですが、現在はGitHubのリポジトリを選ぶかテンプレートからしか作成できなくなっているので、ローカル環境でVercel CLIを使って新規プロジェクトを作成しましょう。
自分がVercelにデプロイしようと思っているアプリケーションのフォルダでターミナルを開いて、vercel linkを実行しましょう。
画像のように、プロジェクトのセットアップが開始されるので質問に従って新規プロジェクトを作成してください。
Vercelのダッシュボードを見てみると見事何もデプロイされていない状態の空プロジェクトが作成できていることが確認できれば問題ありません。
さて、GitHub ActionsからVercel CLIを使うにあたってプロジェクトIDとユーザーID又はチームIDが必要になるのですが、vercel linkを実行したときに生成される.vercelフォルダの中にその二つが入っているので取り出しましょう。
{
"projectId": "プロジェクトID",
"orgId": "ユーザーID"
}
トークン
自分の環境ならvercel loginを使ったインタラクティブな方法でVercelにログインすることができますが、CI上だとインタラクティブな操作はできないため別の手段を使用しなければなりません。
そのため、Vercel CLIではグローバルオプションとして--tokenフラグが用意されており、値としてVercel Dashboard等で作成したトークンを渡すことでログインが必要な操作をできるようになります。
トークンの作成
トークンの作成はVercel Dashboardから行うことができます。
作成すると一度だけトークンが表示されるので、これらの値はGitHub上でシークレットとして登録しましょう。[1:1]
Vercel CLIを使う方法
Vercelといえばvercelというコマンドを実行するだけで、設定無しでビルドからデプロイまで全て自動でやってくれるのが売りですよね。
GitHub Actionsでもこれを使えば簡単に実現できそうです。
そしてなんと、GitHub ActionsのRunnerイメージであるubuntu-22.04, ubuntu-20.04にはデフォルトでVercel CLIがインストールされているようで、インストール作業無しですぐ使えます。
Ubuntu以外のRunnerイメージを使用する場合
自分でVercel CLIをインストールする工程を追加してあげる必要があります。
どのRunnerイメージもnpmがデフォルトで入っているので、npm i -g vercelを実行するだけでVercel CLIを導入できます。
name: Vercel
on:
push:
branches: ['main']
jobs:
deploy:
runs-on: windows-latest
steps:
- uses: actions/checkout@v3
- run: npm i -g vercel
構成
name: Vercel
on:
push:
branches: ['main']
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- run: vercel --yes --prod --token=${{ secrets.VERCEL_TOKEN }}
env:
# プロジェクトIDを"VERCEL_PROJECT_ID"として環境変数に設定
VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
# ユーザーID又はチームIDを"VERCEL_ORG_ID"として環境変数に設定
VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
以上のような構成で簡単にGitHub Actionsから簡単にVercelへデプロイを行うことができます。
後は組み方次第でPRに対するプレビュー環境へのデプロイなんかも実現できますし、vercel build, vercel --prebuiltを使ってCIでビルドしたものをVercelへデプロイすることもできます。
ただVercelのGitHubボットみたいに下の画像のようなもの作成したりするのに、Workflowファイルだけじゃ無理がありますよね。そこで次のセクションでは別の方法を紹介したいと思います。
Actionを使う
GitHub Marketplaceで検索するとVercel CLIを使う方法も簡単ではありますが、GitHubのVercelボットのようにPRやコミットにコメントを残せる機能を持ったActionなんかもありますのでこちらを使ってもいいかもしれません。
おわり
uses: actions/checkout@mainなんかで呼び出せるものをActionという風に書いたのだけどこれは果たして正しいのだろうか...
私は現在nexterias/actions-vercelというものを作っており、私は必要な時にこれを利用していくつもりです。
完成したらこの記事に使い方を書こうと思います。
参考
-
登録の仕方はGitHub Docsを参考にしてください ↩︎ ↩︎
Discussion
この記事を参考にActionを作ってみたのですがエラーで実行できませんでした。
おそらく、そのままコピペしたら
env:のインデントがずれるからだと思います。run:の下にenv:が来てることを確認してみてください。