microCMS のコンテンツ更新のタイミングで Vercel (ZEIT Now) を再ビルド・デプロイさせる

前回は、Gridsome x microCMSを用いた簡単なブログサイトを構築した。

これで npm run build で生成したファイルをNetlify / Vercel等へホスティングさせると、ブログサイトとして公開できる。

しかし、このままではmicroCMSのコンテンツ更新をするたび、Netlify / Vercelのようなホスティングサービスで再ビルド・デプロイしなくてはならない。

本記事では、上記の手間を改善するmicroCMS のコンテンツ更新のタイミングで Vercel（ZEIT Now） を再ビルド・デプロイさせた際の手順を書き残す。

Vercel （ZEIT Now）とは？

ノンコーディングでデプロイができるサービス。前はNowというサービスだったが、Vercelに変更された様子。

Vercel CLIを使うことで、

# Vercel CLIをグローバルインストール 
npm i -g now

# カレントディレクトリをデプロイ
now

だけでデプロイできる。

無料プラン（Hobby）は Free, forever（永遠に無料）とのこと。

サクッとポートフォリオや個人ブログサイトを公開するのに良い選択肢かもしれない。

手順

github.com

のデプロイ設定したときの手順を記載する。

前提

• GitHubへリポジトリ作成済み
• nowを用いて、デプロイしたことがある

1. Vercel - Deploy用のURL発行

Vercelは、GitHubやGitLabのリポジトリと連携させることで、URLを叩いてビルド・デプロイするDeploy Hookの仕組みが用意されている。

vercel.com

詳しい設定手順は上記URLに記載されているが、ざっくり説明すると以下。

1. https://vercel.com/[GitHubのユーザー名]/[リポジトリ名]/settings/git-integrationへ遷移、GitHubのリポジトリ名を入力
2. 「Hook Name」「GitHubのブランチ名」を入力後、Create Hookを押下すると、デプロイ用URL https://api.zeit.co/v1/integrations/deploy/hogehoge が生成される

2. microCMS - カスタム通知の設定

microCMSは、コンテンツやAPIを変更したタイミングでWebhook通知できる。

種類は現時点（2020/04）で、

• Slack
• Chatwork
• Netlify
• GitHub Actions
• メール通知
• カスタム通知

が存在する。今回はカスタム通知を使用する。

microcms.io

ざっくり説明すると、以下のような手順となる。

• https://[サービス名].microcms.io/apis/[コンテンツ名]/settings/webhookに遷移
  • URL欄に先ほど発行したデプロイ用URL https://api.zeit.co/v1/integrations/deploy/hogehoge を入力
  • URLを叩くタイミングにチェックをする

設定はこれだけ。かなり簡単。

所感

最初は以下のようなワークフローを組んでいたが、microCMSからコンテンツ更新時にデプロイが成功せず、本記事のような仕組みに変えた。

• GitHubActionsでmicroCMSのコンテンツ更新を受信
• amondnet/now-deploymentを使って、Vercelのデプロイを走らせる

うまくいかなかった時のGitHub Actionsのワークフローは以下。

# https://github.com/zakizaki-ri9/javascript-sandbox/blob/master/.github/workflows/micro_cms_sample.yml
name: microCMS Now Deploy
on:
  # push時の条件
  push:
    branches:
      - master
    paths:
      - "gridsome-micro-cms-sample/**"
      - ".github/workflows/micro_cms_sample.yml"
  # microCMSが更新されたときの条件
  repository_dispatch:
    types: [micro_cms_updated]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
        with:
          ref: "master"
      - run: |
          cd gridsome-micro-cms-sample
      - uses: amondnet/now-deployment@v2
        with:
          zeit-token: ${{ secrets.MICROCMS_SAMPLE_NOW_ZEIT_TOKEN }}
          now-org-id: ${{ secrets.MICROCMS_SAMPLE_NOW_ORG_ID }}
          now-project-id: ${{ secrets.MICROCMS_SAMPLE_NOW_PROJECT_ID }}
          working-directory: "gridsome-micro-cms-sample"

だが、今考えると、

• microCMSのWebhookはGitHub Actionsを指定
• GitHub ActionsからDeployHookのURLを叩く

のようにすれば、丸く収まったかもしれない。

参考リソース

• 素振りしたリポジトリ - GitHub - zakizaki-ri9/gridsome-micro-cms-sample at microcms-custom-webhook-to-vercel
• Deploy Hooks - Vercel Documentation
• microCMS - WebHook機能を拡充しカスタム通知に対応しました⚙️