YASD-TECH
YASD TECH
# vercel
# Next.js
# TypeScript

Vercelでdeployの定期実行を実施してみた

投稿日:2024/11/4

更新日:2024/11/4

ttitleImage

前置き

このテックブログをVercelでデプロイしており、ブログ詳細画面ではSEO対策としてSSGを利用している影響でブログを書くたびにデプロイを実施してビルドし直す必要がありました。

これがめんどくさかったので自動化することにしました。

いくつかやり方があるみたいなのですがVercelのDeploy HookとGitHub Actionsを利用して定期実行する方法でやろうと思います。

実装

1. VercelでDeploy Hookを作成する

Vercelのプロジェクトから「設定」 > 「Git」 >「Deploy Hooks」の順に移動します

Create Hooksの中に適当な名前とデプロイしているブランチ名を書きます。

作成できればWebhookのURLが発行されるので、このURLをコピーしておきます。

2. GitHub Secretsを使用してDeployキーを登録する。

先ほどコピーしたキーを使用していくのですが、ハードコーディングだと他人に見られるリスクがあるのでここで管理します。

GitHubリポジトリの「Settings」 > 「Secrets and variables」 > 「Actions」に移動移動し、「New repository secret」をクリックします。

Nameに適当な名前、Secretに手順1で発行したurlを貼り付けます。

自分はVERCEL_DEPLOY_HOOK という名前でVercelのデプロイフックURLを追加しました。

3. GitHub Actionsでスケジュールのワークフローを設定する

  • プロジェクトのルートに .github/workflows/redeploy.yml ファイルを作成します。
  • 以下のようにスケジュールされた時間でデプロイフックを叩く設定を行います(毎日午前2時に実行)。
.github/workflows/redeploy.yml
name: Redeploy Vercel Site

on:
  schedule:
    - cron: '0 2 * * *'  # 毎日午前2時に実行

jobs:
  redeploy:
    runs-on: ubuntu-latest
    steps:
      - name: Trigger Vercel Deploy Hook
        run: curl -X POST "${{ secrets.VERCEL_DEPLOY_HOOK }}"

最後にGitHubにPushしてスケジュールを有効化しましょう!

redeploy.yml を作成後、GitHubリポジトリにプッシュします。これで指定されたスケジュールで自動的にビルドがトリガーされるようになります。

手順は以上です。

明日になればdeployの実行が確認されると思います。

まとめ

会社でもgithub actionsを結構使っていたりするのでこの辺も合わせて勉強したいなぁと思いました!

Index

  • 前置き
  • 実装
  • 1. VercelでDeploy Hookを作成する
  • 2. GitHub Secretsを使用してDeployキーを登録する。
  • 3. GitHub Actionsでスケジュールのワークフローを設定する
  • まとめ