🚀

GitHub Actionsを使ってVercelへデプロイする

2023/05/04に公開

2件

Vercel

GitHub Actions

tech

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フォルダの中にその二つが入っているので取り出しましょう。

.vercel/project.json

{
  "projectId": "プロジェクトID",
  "orgId": "ユーザーID"
}

トークン

自分の環境ならvercel loginを使ったインタラクティブな方法でVercelにログインすることができますが、CI上だとインタラクティブな操作はできないため別の手段を使用しなければなりません。

そのため、Vercel CLIではグローバルオプションとして--tokenフラグが用意されており、値としてVercel Dashboard等で作成したトークンを渡すことでログインが必要な操作をできるようになります。

トークンの作成

トークンの作成はVercel Dashboardから行うことができます。

作成すると一度だけトークンが表示されるので、これらの値はGitHub上でシークレットとして登録しましょう。^[1:1]

Vercel CLIを使う方法

https://vercel.com/docs/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を導入できます。

.github/workflows/vercel.yml

name: Vercel

on:
  push:
    branches: ['main']

jobs:
  deploy:
    runs-on: windows-latest
    steps:
      - uses: actions/checkout@v3
      
      - run: npm i -g vercel

構成

vercel.yml

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

makoto-developer

この記事を参考にActionを作ってみたのですがエラーで実行できませんでした。

No steps defined in `steps` and no workflow called in `uses` for the following jobs: env

daiki / きちくりす

おそらく、そのままコピペしたらenv:のインデントがずれるからだと思います。インデントが正しくなっているか確認してみてください