XENEXE

ブログ記事をローカルファイルで管理するか Headless CMS で管理するか


heroImage

1. はじめに

GatsbyJS では,ブログ記事を管理する方法として 2 つの方法があります。1 つ目は,ローカルに Markdown ファイルや MDX ファイルとして保管して,ビルド時にコンパイルする方法。2 つ目は, Headless CMS に保管して,ビルド時にコンパイルする方法。どちらの管理方法を選択すべきかは,ユーザーのニーズや状況に応じて異なります。本記事では,この数年間で両方の方法を試して得られた知見をまとめたものです。

2. 比較対象

具体的な比較対象として,本記事では 3 つ取り上げます。1 つ目は,gatsby-plugin-mdx を使ってローカルに保管している MDX ファイルを,ビルド時にコンパイルする方法。2 つ目は,マネージドホスティング型 Headless CMS の Contentful に記事を保管する方法。3 つ目は,セルフホスティング型 Headless CMS の Strapi に記事を保管する方法。

2.1. リモートアクセス

Headless CMS (Contentful と Strapi) は,Web UI を提供しているので Web 上で記事の追加,編集,削除が可能です。そのため,Google Chrome や Mozilla Firefox などの Web ブラウザとインターネット環境があれば,どこからでもブログ記事にアクセスして編集が可能です。一方で,gatsby-plugin-mdx を使用する方法では,ローカル環境に MDX ファイルを追加して編集します。そのため,ブログ記事を編集する端末ごとに Node.js をインストールして,ブログのソースコードをクローンするなどの環境構築が必要です。もちろん,「GitHub と Netlify を連携させる方法」や「リモート開発環境 (VPS や自宅サーバー) を構築しておいて SSH でアクセスする方法」など,工夫すれば gatsby-plugin-mdx を使用する方法でも Headless CMS を使用する方法と同様にリモートアクセスが可能になります。ただし,構築する環境によって要求される技術レベルは跳ね上がります。

2.2. コスト

gatsby-plugin-mdx を使用する方法では,外部サービスを使用していないので追加コストは必要ありません。一方で,Contentful を使用する場合の追加コストはプロバイダー依存です。執筆時点では強力なフリープラン 1 を提供してくれているため,多くのユーザーは無料で利用することができると思います。しかし,マネージドホスティング型 Headless CMS である以上,価格やプランの改定が行われる可能性がないとは言い切れないため,その点は考慮しておく必要はあると思います。Strapi は FLOSS として公開されている Headless CMS です。そのため,利用自体は無料ですることが出来ます。しかし,セルフホスティングして運用しないといけないので,VPS をレンタルするならサーバー代が,自宅サーバーで運用するなら電気代が必要になります。そのため,厳密には完全無料で利用することは難しいと思います。

2.3. メタデータ

Headless CMS は,一部のメタデータ (ID や日付など) を自動的に生成してくれます。もちろん任意のメタデータを定義して設定することも可能です。生成されたメタデータを GraphQL で取得するという方法が GatsbyJS を用いたブログ開発ではデファクトスタンダードです。一方で,ローカルで記事を管理する場合は,ほぼ全ての MDX ファイルに Frontmatter を手動で書き込む必要があります。もちろん,技術的には createNodeField 2 で部分的に自動生成することも可能ですが大半は手動で設定する場合が多いです。細かい部分ではありますがブログ記事を執筆する際に気になった部分ではあるので記述しておきます。

3. まとめ

ここまで,gatsby-plugin-mdx,Contentful ,Strapi を色々な角度から比較してきました。2 章で記述した内容以外に,アカウント管理やリソース管理などの運用コストは gatsby-plugin-mdx < Contentful < Strapi であったり,システムダウンのリスクは,gatsby-plugin-mdx < Contentful < Strapi であるなど,もっと細かい部分はありますが本記事では割愛しています。

インターネット上の情報では,ローカルで管理するか Headless CMS で管理するかを決める大きなポイントとして「リモートアクセスが可能か否か」が挙げられています。しかし,2.1 節でも述べた通り,gatsby-plugin-mdx を使用する方法でもリモートアクセスは技術的には可能です。そのため,ローカルで管理するか Headless CMS で管理するかを決めるポイントとして「リモートアクセスが可能か否か」は個人的には弱いと思います。筆者としては,それよりも「管理者の中に非技術者が含まれるか否か」が重要なポイントだと思います。管理者全員が技術者の場合,ソースコードは GitHub にあるから Clone しておいて。記事を執筆したら Pull Request を送っておいてと伝えれば十分でしょう。しかし,非技術者の人にとっては難しい作業です。教えるにもコストがかかります。この場合,Headless CMS の Web UI が有効に働いてくれると思います。

また,Contentful を利用するか Strapi を利用するかを決めるポイントとしては「コスト」が挙げられると思います。Contentful のフリープランでは不足している,しかし,Contentful の有料プランは利用したくないというケースで Strapi が候補に上がってくると思います。あとは,社内向けのブログで情報リソースを外部サービスに置きたくないってケースでも Strapi が候補に上がってくると思います。上記でも述べた通り,大多数のユーザーは Contentful のフリープランで十分だと思います。他にも microCMS などのマネージドホスティング型 Headless CMS が提供されているので,個人運用で Strapi を採用するケースは稀だと思います。

最後に,2 章の比較を表にまとめたものを以下に示しておきます。本記事が,ブログ記事をローカルで管理するか Headless CMS で管理するかで悩んでいる人の参考になれば幸いです。

gatsby-plugin-mdxContentfulStrapi
リモートアクセス可能 ※1可能可能
コスト無料プロバイダー依存無料 ※2
メタデータ手動設定自動生成自動生成

※1:GitHub などの外部サービスと連携させる必要がある
※2:2.2 節でも述べた通り厳密には無料ではない


  1. Contentful Pricing | Contentful - https://www.contentful.com/pricing/

  2. Extending the GraphQL MDX nodes - https://www.gatsbyjs.com/plugins/gatsby-plugin-mdx/#extending-the-graphql-mdx-nodes