そこの君、HeadlessCMSを始めないか？

はじめまして、またはn度目まして、uiroです。

この記事は FUN Part2 Advent Calendar 2024 23日目の記事です。

そこの君、君もHeadlessCMSを始めないか？という内容を含んでいます。

CMS と Headless CMS

HeadlessなCMSの話をする前に、まずCMSについて説明する必要があります。

CMSとはコンテンツ管理システムのことであり、記事やプロダクトのデータなど、Webサイトに表示する様々なコンテンツやアセット（画像、音声）を管理することができます。プログラムとして直接実装する場合と比べて、リッチなエディターを使えることや、エンジニアでない人がコンテンツ管理を行うことができるという点が特徴です。

このCMSというものは、コンテンツ管理システムであるため、それを表示するフロントエンドと連携することではじめて役に立ちます。

Wordpress を始めとするHeadlessではないCMSは、コンテンツ管理とフロントエンドが密接に結びついており、そのままコンテンツ管理ができるフロントエンドとして利用します。

一方で、 HeadlessCMS とは、ブロントエンドがないバックエンドのみで構成されるCMSのことです。

バックエンドがないため、特定のリクエストに対してコンテンツを返す部分だけを担うのが HeadlessCMS なのです。

なぜ Headless CMS ?

みなさん、フロント書きたくないですか？

Wordpress を一度使ったことがある方であれば分かると思うのですが、WordpressはPHP製であり、ナウなReactやVueなどのフレームワークを用いてフロントを書くことはあまりせず、流通しているテンプレートを加工して使っていくことになると思います。

しかし、複雑なコンテンツを扱ったり、デザインをこだわったりするのには、フロント一体型のCMSはあまり向いていないことが多いです。

一方で、 HeadlessCMS を使うと、Next や Nuxt, Svelte などお好きなフレームワークで書くこともできるし、また Flutter や Swift に埋め込んで使うことも簡単にできちゃいます。

コンテンツの責任をフロントエンドから分割できて、かつ拡張性もある、ということでこれは使うしかないというわけです。

おすすめの HeadlessCMS 紹介

ここで、いくつかおすすめの HeadlessCMS を紹介します

CaaS 系

自宅サーバーなどでホストせずに、Webサイトから会員登録して使う形式です。

microCMS

日本製 HeadlessCMS で一番有名な気がします。後に紹介する Self-hosted 系と比べて信頼性があるので、止まると困る用途に向いていると思います。

無料枠があり、無制限のリクエスト数と、20GB/月の転送量を使うことができます。趣味的な用途だったらこの枠を超えることはまあないと思います。

3人までコンテンツ管理のためのユーザーを追加できます。

作れるAPI (スキーマと言ったほうが伝わりやすいかも) が3つまでなので、軽いブログぐらいまでなら構築できますが、逆にそれ以上複雑なものを作るのは少し難しいと思います。

Newt

これも日本製 HeadlessCMS です。 microCMS と比べると、作れるモデル (≒API, スキーマ) の数が10個までなので、自由度が上がると思います。

こちらも無料枠があり、100GB/月と100万リクエスト/月の制限がありますが、これに引っかかるのはかなり難しいでしょうし、これに引っかかる規模のサイトであれば有料プランに移るコストもほぼ無視できると思います。

メンバーの追加ができないことと、microCMSと比べて少し複雑であることには注意が必要です。

どちらが使いやすいかは試してみてもらうことが一番ですが、個人的には microCMS の方がわかりやすい管理画面をしていると思いました。APIをすぐ試したりできるのも気に入っています。

その他

上記以外には、 Contentful Prismic Kuroco あたりがパッと見でいいなーと思いました。 (試せてはいません)
もしこれまでに挙げたサービスが合わないなーと思う方がいれば、見てみると良いのかなと思います。

Self-hosted 系

うちのような偏った大学にいるみなさんであれば、自宅にサーバーがある、という方も多いんじゃないでしょうか。

多くなりましょう、自宅にサーバーを置いてください。

私はサーバーを置きました： おうちを増やして仮想化した話

……それでは、 Self-hosted 系の HeadlessCMS をいくつか紹介します。

Strapi

Strapi は、オープンソースの HeadlessCMS です。Strapiが提供するクラウドを使うこともできますが、Self-hosred して手元で動かすこともできます。おそらくStrapiが一番有名であり、拡張性が高めの HeadlessCMS になると思います。

Directus

Directus は、このサイトでも使っている HeadlessCMS です。日本語対応が可能なこと（訳は若干あやしい）、ダッシュボードが使いやすい（主観）ことが選んだ理由です。データベースを設計する作業に近い形でAPIを作成できることが特徴だと思います。

Ghost

Ghost は、よりブログやニュースサイトに特化したイメージのある HeadlessCMS だと思います。こちらもGhostが運営するクラウド版と、Self-hosted版があります。

Directus を導入してみよう

紹介だけで終わってしまってもという感じなので、実際にこのサイトで使われている Directus という HeadlessCMS を Ubuntu で構築する方法について見ていこうと思います。

なお、インターネットに公開するためには、安全性などに配慮する必要があるので、各自で調べて行ってください（私は説明しきれない）

自宅サーバーで公開する方法は、適切なセキュリティー対策を行わないと家（仮想）が大変なことになる可能性があります。

① Linux サーバーを用意する

WSL2 や自宅サーバー、 VPS を用いて Linux サーバーを用意します。 Microsoft Store から Ubuntu をインストールすることで、 WSL2 を使うのが一番簡単だと思います。

② Docker Engine をインストールする

私は Docker が好きなので、 Docker を使って構築します。持っていない人は公式の Install Docker Engine on Ubuntu を見てインストールすると良いと思います。

（他のディストリビューションをお使いの方は各自で探してください）

③ お好きなディレクトリで

docker-compose.yml

を作成する

以下のようにして

cd
mkdir directus
cd directus
vim docker-compose.yml

次に、

services:
  database:
    image: postgis/postgis:13-master
    volumes:
      - ./data/database:/var/lib/postgresql/data
    environment:
      POSTGRES_DB: ${POSTGRES_DB}
      POSTGRES_USER: ${POSTGRES_USER}
      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
    restart: always
    healthcheck:
      test: ["CMD", "pg_isready", "--host=localhost", "--username=directus"]
      interval: 10s
      timeout: 5s
      retries: 5
      start_interval: 5s
      start_period: 30s
    env_file:
      - .env

  cache:
    image: redis:6
    restart: always
    healthcheck:
      test: ["CMD-SHELL", "[ $$(redis-cli ping) = 'PONG' ]"]
      interval: 10s
      timeout: 5s
      retries: 5
      start_interval: 5s
      start_period: 30s

  directus:
    image: directus/directus:11.2.2
    ports:
      - 8055:8055
    volumes:
      - ./data/uploads:/directus/uploads
      - ./data/extensions:/directus/extensions
    depends_on:
      database:
        condition: service_healthy
      cache:
        condition: service_healthy
    environment:
      SECRET: ${SECRET}

      DB_CLIENT: "pg"
      DB_HOST: "database"
      DB_PORT: "5432"
      DB_DATABASE: ${POSTGRES_DB}
      DB_USER: ${POSTGRES_USER}
      DB_PASSWORD: ${POSTGRES_PASSWORD}

      CACHE_ENABLED: "true"
      CACHE_AUTO_PURGE: "true"
      CACHE_STORE: "redis"
      REDIS: "redis://cache:6379"

      ADMIN_EMAIL: ${ADMIN_EMAIL}
      ADMIN_PASSWORD: ${ADMIN_PASSWORD}

      # Make sure to set this in production
      # (see https://docs.directus.io/self-hosted/config-options#general)
      PUBLIC_URL: <公開時のURL>

    restart: always

    # Environment variables can also be defined in a file (for example `.env`):
    env_file:
      - .env

注：あくまで私が現時点で使っている構成なので、各自で最新版に更新したりカスタマイズしたりしてください

④ 同じディレクトリで

.env

ファイルを作成します

同様にして、

POSTGRES_DB=<DB名>
POSTGRES_USER=<ユーザー名>
POSTGRES_PASSWORD=<パスワード>

SECRET=<いい感じのランダムな英数字>

ADMIN_EMAIL=<管理画面のメールアドレス>
ADMIN_PASSWORD=<管理画面のパスワード>

⑤ コンテナを起動します

sudo docker compose up -d

完了 ✨️

デフォルトだとポート

おわりに

ここに教えがあります

1. フロントを学んでポートフォリオサイトを建てましょう
2. ブログ機能を搭載しましょう
3. HeadlessCMS を契約してコンテンツ管理を加速しましょう
4. 自宅にサーバーを置きましょう
5. すべてをセルフホスティングしましょう

さすれば、すべてはあなたものです。思う存分、沼に浸かりましょう。
(※ 死活管理はしっかりしましょう。特にケーブルを引っ掛けてサービスダウンしてしまわないように)

以上、この記事は FUN Part2 Advent Calendar 2024 23日目の記事でした。

みなさま、良い年末をお過ごしください。