🐙

Contentfulでコンテンツを更新したらGitHubActionを実行したい

2023/12/15に公開

自作のブログをContentful(ヘッドレスCMS) + Next.jsのSSGで作ったのですが、Contentfulでコンテンツを更新した後、ビルドしてデプロイするためにGitHub Actionを実行する必要があります。
手動でやってましたがめんどくさいので、コンテンツを更新したら自動でアクションが実行されるようにしたいと思います。

大まかな手順

  1. GitHub Personal Access Tokenを作成
  2. ContentfulでWebhookを設定
  3. Actionを修正

前提:そもそもWebhookでGitHub Actionを実行する設定ってどうすればいいの?

GitHub Actionの公式Docを見たところ、どうやらrepository_dispatchイベントというのを発生させるといいようです。
URLは、https://api.github.com/repos/OWNER/REPO/dispatchesとのこと。
https://docs.github.com/ja/rest/repos/repos?apiVersion=2022-11-28#create-a-repository-dispatch-event

ていうかWebhookってなに?

恥ずかしながら説明できないので改めて調べました。

  • サービスで何尾かのイベントが発生した際にリアルタイムでHTTPプロトコルを使用して通知するシステムのこと
  • APIとの違いは、明示的なリクエスト操作があるかないか
  • 通常はPOSTリクエスト

要は普通のHTTP通信なんですね。なんか規格とかあるのかと思ってましたがそういうわけではなさそう。
https://circleci.com/ja/blog/webhook-explained/
https://www.redhat.com/ja/topics/automation/what-is-a-webhook

1. GitHub Personal Access Tokenを作成

というわけで設定していきます。
まずは前述のrepository_dispatchへのリクエストに必要なPersonal Access Tokenを作成します。
手順はこちら
https://docs.github.com/ja/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens#creating-a-fine-grained-personal-access-token

Permissionsについては、以下のページの記載に従ってContentsを`Read and write`、`Metadata`を`Read-only`としました。
https://docs.github.com/ja/rest/overview/permissions-required-for-fine-grained-personal-access-tokens?apiVersion=2022-11-28#actions

2. ContentfulでWebhookを設定

続いてContentfulのWebhookを設定していきます。
メニューの「webhook」から進んで、添付のように設定しました。
なお、nameに日本語を設定するとエラーとなるようです。


(上図のAuthorizationの値はBearer <1で作成したPersonal Access Token>です。

3. Actionを修正

リポジトリの.github/workflows/下のAction定義でon節に追記します。

on:
  push:
    branches:
      - main
  workflow_dispatch:
  repository_dispatch: # <= これを追加

今回あくまでActionをトリガーしたいだけなので、条件も内容も何もいらずこれだけです。

以上で、Contentfulでコンテンツを作成、編集、削除時にGitHub Actionが実行されました!🙌

Discussion