カルキチブログ

定期実行などに使えそう!VercelのDeploy Hookがとても便利だったという話

最近個人開発でVercelを使用しているのですが、DynamoDBのテーブルにデータの登録を行い、登録処理が終了したら、Vercelのビルドを実行したいというケースに遭遇しました。

調査段階では、DynamoDBの更新をトリガーにLambdaからGithub Actionsを起動したりしなきゃいけないのかなと考えていたのですが、VercelのDeploy Hookを使えば、AWSなどのクラウド上で何かしらの処理を完了したときにビルドを実行するみたいなことが簡単にできたので、その方法についてまとめてみることにしました。

VercelのDeploy Hookとは?

VercelのDeploy Hookとは、Vercelの管理画面上で作成したURLに対してPOSTリクエストを送ると、デプロイをトリガーしビルドを実行することができる機能です。

VercelのDeploy Hookについて

https://vercel.com/docs/more/deploy-hooks

導入部分でも触れましたが、利用例としてはAWSやGCPなどのクラウド上で何らかの処理を行った後に、Vercel上でビルドを実行するみたいな使い方が多そうです。

→LambdaのCloudWatch Eventsを使えば、バッチ処理の成功後にビルド処理を行うみたいな実装も比較的簡単に実装できそうです!

注意!

APIを実行するための認証などは一切不要なので、管理画面上で生成したURLはenvなどで管理して、外部に漏れないようにする必要があります!

設定方法と使い方

設定方法は、Vercelの管理画面上のsettingsをクリックします。

Settings画面に移動したら、Gitという項目があるはずなのでクリックすると、Deploy Hooksという項目が表示されるかと思います。

黒背景で隠しているのは、Deployの実行を行うためのリクエスト用URLです。

→これが外部に漏れると、第三者がビルドし放題になってしまうので要注意です。

実装イメージですが、Node.jsの場合は以下のような感じでビルドを実行することができます。

import fetch from 'node-fetch';

const deployToVercel = async () => {
  const vercelDeployUrl = process.env.VERCEL_DEPLOYMENT_URL;
  
  if (!vercelDeployUrl) throw new Error('環境変数が設定されていません。');
  
  await fetch(vercelDeployUrl, { method: 'POST' });
};

node-fetchでPOSTリクエストを投げているだけですので解説は省きますが、ポイントとしては、デプロイ用URLを環境変数で指定している点です。

しつこいようですが、ビルドし放題になってしまうので、デプロイ実行用リクエストは必ず環境変数として管理するようにしましょう。

Deploy Hook経由でビルドが成功すると、添付画像のようにVercelによってビルドが実行されていることが確認できるかと思います。

まとめ

ではまとめです。

  • VercelのDeploy Hookを使用すると、何らかの処理をトリガーにビルドを行うといった処理が簡単に実装できる
  • Deploy実行用のURLはPOSTリクエストが送信できる環境があれば、誰でもビルドが実行できてしまうので、デプロイ用URLは必ず環境変数として管理する

AWSやGCPなどのクラウドサービスと組み合わせることで、色々な機能を実装できそうです。

個人開発や案件などでVercelを使用している人は使ってみるとできることの幅が広がるのでいいかもしれませんね!

おまけ

小〜中規模のアプリケーションやサイト構築はもうVercelでいいんじゃないかという気すらしています。
最近個人開発でVercelを使用しているのですが、DynamoDBのテーブルにデータの登録を行い、登録処理が終了したら、Vercelのビルドを実行したいというケースに遭遇しました。

調査段階では、DynamoDBの更新をトリガーにLambdaからGithub Actionsを起動したりしなきゃいけないのかなと考えていたのですが、VercelのDeploy Hookを使えば、AWSなどのクラウド上で何かしらの処理を完了したときにビルドを実行するみたいなことが簡単にできたので、その方法についてまとめてみることにしました。

VercelのDeploy Hookとは?

VercelのDeploy Hookとは、Vercelの管理画面上で作成したURLに対してPOSTリクエストを送ると、デプロイをトリガーしビルドを実行することができる機能です。

VercelのDeploy Hookについて

https://vercel.com/docs/more/deploy-hooks

導入部分でも触れましたが、利用例としてはAWSやGCPなどのクラウド上で何らかの処理を行った後に、Vercel上でビルドを実行するみたいな使い方が多そうです。

→LambdaのCloudWatch Eventsを使えば、バッチ処理の成功後にビルド処理を行うみたいな実装も比較的簡単に実装できそうです!

注意!

APIを実行するための認証などは一切不要なので、管理画面上で生成したURLはenvなどで管理して、外部に漏れないようにする必要があります!

設定方法と使い方

設定方法は、Vercelの管理画面上のsettingsをクリックします。

Settings画面に移動したら、Gitという項目があるはずなのでクリックすると、Deploy Hooksという項目が表示されるかと思います。

黒背景で隠しているのは、Deployの実行を行うためのリクエスト用URLです。

→これが外部に漏れると、第三者がビルドし放題になってしまうので要注意です。

実装イメージですが、Node.jsの場合は以下のような感じでビルドを実行することができます。

import fetch from 'node-fetch'; const deployToVercel = async () => { const vercelDeployUrl = process.env.VERCEL_DEPLOYMENT_URL; if (!vercelDeployUrl) throw new Error('環境変数が設定されていません。'); await fetch(vercelDeployUrl, { method: 'POST' }); };

node-fetchでPOSTリクエストを投げているだけですので解説は省きますが、ポイントとしては、デプロイ用URLを環境変数で指定している点です。

しつこいようですが、ビルドし放題になってしまうので、デプロイ実行用リクエストは必ず環境変数として管理するようにしましょう。

Deploy Hook経由でビルドが成功すると、添付画像のようにVercelによってビルドが実行されていることが確認できるかと思います。

まとめ

ではまとめです。

  • VercelのDeploy Hookを使用すると、何らかの処理をトリガーにビルドを行うといった処理が簡単に実装できる
  • Deploy実行用のURLはPOSTリクエストが送信できる環境があれば、誰でもビルドが実行できてしまうので、デプロイ用URLは必ず環境変数として管理する

AWSやGCPなどのクラウドサービスと組み合わせることで、色々な機能を実装できそうです。

個人開発や案件などでVercelを使用している人は使ってみるとできることの幅が広がるのでいいかもしれませんね!

おまけ

エンジニアの思考回路としてあまり良くないですが、小〜中規模のアプリケーションやサイト構築はもうVercelでいいんじゃないかという気すらしています。

Vercelすげぇ。