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

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

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

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

Vercel （ZEIT Now）とは？
手順
所感
参考リソース

Vercel （ZEIT Now）とは？

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

Vercel CLIを使うことで、

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

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

だけでデプロイできる。

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

f:id:kic-yuuki:20200426104932p:plain

f:id:kic-yuuki:20200426104944p:plain

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

手順

github.com

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

前提

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

1. Vercel - Deploy用のURL発行

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

vercel.com

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

f:id:kic-yuuki:20200426135416p:plain

https://vercel.com/[GitHubのユーザー名]/[リポジトリ名]/settings/git-integrationへ遷移、GitHubのリポジトリ名を入力
「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

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

f:id:kic-yuuki:20200426141328p:plain

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"