目次

はじめに

microCMSは国産のヘッドレスCMSで、このブログのコンテンツもmicroCMSで管理しています。microCMSはWebhookを提供しているので、コンテンツやAPIを更新した時にGitHub ActionsやNetlifyなどのサービスにイベントを送信することができます。

今回はGitHub Actionsとの連携方法を紹介します。連携の手順は簡単で、大きく次の3ステップだけです。

  1. GitHubでトークンを発行する
  2. microCMSにGitHub ActionsのWebhookを追加する
  3. GitHub Actionsのworkflowにrepository_dispatchを設定する

GitHubでトークンを発行する

まずは、microCMSのWebhookで使用するトークンを発行します。GitHubの「Personal access tokens」で、「Generate new token」をクリックしてトークンを作成するページに遷移します。いろいろある権限の中から、「repo」をチェックしてトークンを作成します。トークンはmicroCMSの設定で使用するので、クリップボードにコピーするなどして一時的に保存しておきましょう。

microCMSにGitHub ActionsのWebhookを追加する

Webhookを設定したいコンテンツの「API設定」から「Webhook」をクリックし、Webhookの設定ページに遷移します。「追加」をクリックすると、連携するサービスの選択肢が表示されるので、「GitHub Actions」を選択します。先ほど発行したGitHubのトークンや、リポジトリの情報を聞かれるので入力していきます。「トリガーイベント名」は自分がわかりやすい任意の値で大丈夫です。例えば、このブログでは記事コンテンツを更新した時のみトリガーさせているので、update_postと設定しています。

余談ですが、microCMSのWebhookは「カスタム通知」で任意のエンドポイントを指定することもできるので、microCMSがまだサポートしていないサービスや自作のサービスなどにも組み込むことができます。

GitHub Actionsのworkflowにrepository_dispatchを設定する

microCMSにWebhookが追加できたら、GitHub Actionsのworkflowにrepository_dispatchを設定しましょう。

GitHub Actionsではrepository_dispatchという外部イベントを受け取るトリガーがあるので、microCMSで設定したトリガーイベント名を設定します。

次はmicroCMSのWebhookでupdate_postというトリガーイベントを設定した場合のworkflowファイルの一例です。

# /.github/workflows/deploy.yml
name: Deploy
on:
  repository_dispatch:
    types: [update_post]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - uses: actions/setup-node@v1
      with:
        node-version: 12.x
    - run: npm install
    - run: npm run build
    - run: npm run deploy

workflowファイルが準備できたら、workflowファイルをGitHubリポジトリにプッシュして連携は完了です。これ以降、microCMSでコンテンツを更新したら、repository_dispatchを設定したworkflowを実行することができます。repository_dispatchトリガーを設定するだけなので簡単ですね。

ただし、注意が必要な点があります。「ワークフローをトリガーするイベント - GitHub ヘルプ」に記載されていますが、repository_dispatchはmasterブランチでしか使用できません。今後、他のブランチでも使用できるようになるとより便利そうですね。

さいごに

簡単な3ステップでmicroCMSとGitHub Actionsを連携できました。

個人的に、今までmicroCMSとNetlifyを連携させる例をよく見ていたのですが、GitHub Actionsの方がデプロイ前にE2Eテストなどもしやすく柔軟性が高いので、GitHub Actionsとの連携をお勧めします。