VercelのDeploy Hookがとても便利だった。

最初に

今回はNext.jsで作成した技術ブログをあるタイミングでビルドして欲しいので、その機能を実装していく。 そのタイミングはZennの記事を管理するリポジトリに更新があったらである。 そこで再ビルドをかけて記事を更新するようにしたい。 どうしてそんな事するのかというと下記の技術ブログはZennの記事を管理しているリポジトリからデータを取得して作成しているので、Zennに記事を投稿したら同様に再ビルドをかけて記事を追加して欲しいためである。

Next.jsで作成した技術ブログ 大学生だった.

それを実装するには Vercelにある Deploy Hook を使う事で簡単に実装できる。 これがとても便利でこれを使えば、コードを一行も書く事なくお望みの機能を実装出来るので紹介したいと思う。

Deploy Hooks - Vercel Documentation

これを使うとVercelが生成したURLにPost通信を投げる事で再ビルドをかける事ができる。

Deploy Hookを作成する。

まずVercelでPost通信、再ビルドをかけたいプロジェクトに移動する。

settings > git ページに移動する。

自分はすでに作成したのがあるため上に表示されているが、作成してない場合は何も表示されていないと思う。

名前（任意のhookにあった名前）とビルドするブランチを指定する。プロジェクトと連携してある本番環境をビルドして欲しいのでmainと入力する。

生成すると https://api.vercel.com/v1/integrations/deploy/QmcwKGEbAyFtfybXBxvuSjFT54dc5dRLmAYNB5jxxXsbeZ/hUg65Lj4CV こんな感じのURLが生成されるので、そこに curl等でPost通信を投げるとビルドを始めてくれる。そして /deploy/ 以降のランダムな文字列が他の人に渡ると誰でもビルド出来てしまうのでパスワードのように扱う必要がある。

下記を実行すると再ビルドが走る。

curl -X POST 生成したURL

このURLをGitHubのZennを管理する、リポジトリのwebhooksに設定する事でリポジトリの更新が入るたびにVercelにPost通信を投げてビルドして記事を更新してくれる。

GitHub webhooksの設定

Vercel functionを使ってQiitaの記事をGitHubリポジトリから自動投稿・更新出来るAPIを作ってみた。

上記のページでPayload URLを設定する箇所があるので、それを今回生成したURLにする事で設定する事ができる。

最後に

今回はコードを書かずに機能を追加する事が出来てとても簡単だった、webhookを使うとこのように外部サービスの機能を簡単に連携出来るのでとても便利だと思う。

記事に関するコメント等は

🕊：Twitter 📺：Youtube 📸：Instagram 👨🏻‍💻：Github 😥：Stackoverflow

でも受け付けています。どこかにはいます。