esaをHeadless CMSとして使う

最近仕事の同僚からHeadless CMS という言葉を聞いていて「自分には関係ないな」と距離を取っていたのですが、なぜか回り回って自分からHeadless CMSを作ることになりました。世の中何が起きるか分からないですね。

PROBLEM

• ブログを普段書かない人なのだが、よそ向けに情報発信する必要が出てきた
  • とは言っても、今までMarkdownをJekyllで管理していたので画像を貼り付けるのが手間でモチベーションが大きく下がっていた
    • さらにPlantUMLを出力するのも手間、試行錯誤した末にいずれも付け焼き刃で、esaの操作感に勝てるものはなかった

SOLUTION

というわけで、esaをHeadless CMSとして使うことにしました。

やってることは昔のMovableTypeそのもので懐かしかったです。コンテンツを別システムで管理しビルドサーバーに当該コンテンツを流し込みリビルド、最後にホストサーバーにアップロードというワークフロー。今はJAMStackの文脈で語られているようです。

このHeadless CMSが昔と違うのはコンテンツ作成に集中できること。CI周りが発達したので一度ワークフローを組み立てれば後は自動でコンテンツを生成できます。

やり方

• esa.io でゆるふわ情報共有 - Middleman Blog への Export サンプル付き #esa_io - Qiita
• 技術ブログを支える技術（Gatsby + esaio） - mottox2 blog
• Next.jsとesaを使った個人サイト構築 | corocn.dev

それほど時間をかけられなかったので、上記3記事の中で手軽さを考慮しmottox2さんのソースコードを拝借しました。ありがとうございます。

• 作ったレポジトリ：nabinno/nabinno.github.io: On Blahfe - Nab's Github Pages

シークエンス図

私が手を入れたのはコンポーネントを削りGatsby Blog Starterに寄せたのと、デプロイ方法を使い慣れたCircleCIに変えたくらいです。

GitHub PagesにはVercelのような便利なWebhookがないので、esaで実装されたGitHub Webhook連携を使いそれをトリガーにCircleCIジョブを走らせています。

skinparam handwritten true

actor ユーザー as U
boundary esa as E
box GitHub #white
    control "GitHub\nPages" as S
    collections Repository as R
end box
box Build
    control CircleCI as C
    actor Gatsby as G
end box

U -> E: 入力・保存
activate E
E -> R: |GitHub Webhook|\n保存内容をプッシュ
deactivate E
activate R

C <<->> R
activate C
C -> G: ビルド
activate G
return
C -> R: ビルド結果を\nプッシュ
deactivate C
R -> S: サーブ
activate S

U -> S: リクエスト
activate U
return レスポンス

CircleCIジョブ

また、CircleCIジョブは何の変哲もないもので、NodeJSを叩いてGitプッシュしているくらいです。先ほどのGitHub Webhookと似た感じの泥臭いワークフローは [skip ci] コメントの追加があります。当該コメントを入れないとジョブが再帰的に走り続けるので出口で明示してあります。

version: 2.1

jobs:
  build_deploy:
    docker:
      - image: circleci/node:12.4
    steps:
      - checkout
      - run:
          name: Install NPM
          command: npm install
      - run:
          name: Build
          command: npm run clean && npm run build
      - add_ssh_keys:
          fingerprints:
            - "{foo}"
      - deploy:
          name: Deploy
          command: |
            git config --global user.email "nab+circleci@blahfe.com"
            git config --global user.name "nabinno+circleci"
            git add .
            git commit -m "[skip ci]Run npm run clean && npm run build."
            git push origin master

workflows:
  build_deploy:
    jobs:
      - build_deploy:
          filters:
            branches:
              only: master

WRAPUP

とまあ大した作業内容ではないのですが、久しぶりに昔懐かしのMovableTypeのリビルドを思い出しつつ、副産物として全く縁遠かったNetlifyとVercelの位置づけを薄らと感じ取れました。