バックエンドエンジニアが調べるヘッドレスCMS

1. ヘッドレスCMS調査
Strapiを試してみた
山田創介

2. 自己紹介
経歴
勤怠管理システムの Saasの開発経験後、フリーランスとして起業。 2022年1月に株式会社 coroutineの取締役
に就任フリーランスの事業と並列して業務を行う
バックエンドを軸とし開発を行う。業務では Laravel(PHP) や DRF(Python)などを取り扱う。その他にも React.js
をはじめとしたフロントエンド開発や GitHub Actionsを利用したCI/CDの整備なども行っている。
現在は アパレルの物販で収益を上げる会社で DXを行うプロジェクトの開発に参画中
スキル
DRF(Python)/Laravel/Nuxt.js
React.js/Vue.js/Cypress.js/Tailwind CSS
Go lang/ AWS
山田創介
フリーランス / 株式会社 coroutine 取締役

3. なぜヘッドレスCMS
バックエンドエンジニアとして数年勤めてきたが、昨今のサーバーレスの流行りやフ
レームワークの進化を見る限りバックエンドのアプリケーション開発の進化が今後縮小
していくように最近、感じました。
バックエンドのアプリケーション層の特にREST APIによる設計には時間をかける事自
体をせずにフロントエンドの開発もしくは、複雑なロジックのみに関心ごとがいくような開
発が主流になると思います。今回のヘッドレスCMSの調査に至ったのはバックエンドの
開発を軽量に済ませられる手段の一つとして考え調査に至りました。

4. ヘッドレスCMSとは
従来のCMS(コンテンツ マネジメント システム)では、Web
ページ上に表示する内容(記事やタイトルなど)とどのよう
に表示するかのデザインを同一のサーバ内で管理してい
ます。
ただしCMRバックエンドをベースとして作成されているた
めテンプレートの改修にはバックエンドの修正・変更が必
要になってきます。
ヘッドレスCMSはバックエンドで取り扱うデータをフロント
エンドと分離して管理します。そうする事で、テンプレート
の解消をフロントエンドのみで解決できるようにしていま
す。

5. ヘッドレスCMSの種類
クラウドサービス
クラウド上のサービスを利用する事で自前でサーバーを用意せずに管理を行う。
メリット ・・・ 導入が楽。サーバーのメンテナンスを気にしなくていい。コンソール画面しかいじらないの
で操作方法で手こずることが少ない。日本初のサービスもあるためドキュメントを確認しやすいサー
ビスもある。
デメリット ・・・実装したい機能がサービス上の仕様で実装できない可能性がある。
WordPressのよう
なわかりやすいデファクトスタンダードがないので仕様に対する回避策が多くない。予期せぬタイミン
グ(サービス会社によるもの)でサーバーが落ちる事がある

6. ヘッドレスCMSの種類
セルフホスティング
自前で用意したサーバーに対して導入を行い管理をする。例Ghost, Strapi,など
メリット ・・・ ネットワークセキュリティの関係でセルフホスティングしないといけない場合の選択にな
る。本番環境とstg環境が分けやすい。大規模なサービスを取り扱う際に
CMS部分を別サービスと同
様のデプロイメントラインにおくことが可能
デメリット ・・・ デプロイやモニタリングなどインフラに対する管理コストが別途必要
ソースコードを自分でいじれるのでアーキテクトの設計は正しく行わないとカオスなことになる

7. ヘッドレスCMSの種類
今回の調査ではセルフホスティングで導入できる。Strapiを試してみようと思います。
理由
・ヘッドレスCMSを採用する以上ある程度、柔軟な開発が求められるのでセルフホスティング
して自分で調整しやすい方がいい。
・StrapiはJavaScriptで作成されているのでフロントエンドエンジニアが導入で迷うことがない
はず

8. Strapi
読み: ストラーピ
https://strapi.io/
Koa.js(Express.jsの作者が開発したNodeの
Web FW)をベースに開発を行っているヘッドレス
CMSです。
REST APIのみでなくGraphqlでの実装も可能
TOYOTAやNASAがスポンサーだったりする

9. Strapi導入
Node.jsとnpmの事前にインストールする必要がある
インストール
npx create-strapi-app {service name}
--quickstart
インストール後は管理画面がブラウザで立ち上がりスー
パーユーザの作成をしていく
クイックリファレンス
https://docs.strapi.io/developer-docs/late
st/getting-started/quick-start.html

10. 設定の変更
設定ファイルの編集
src/admin配下にある
app.example.jsをapp.jsにリネー
ムし編集
ビルド
設定を反映させるためビルド
npm run build
起動コマンド
npx strapi develop

11. Contentsを作成
アクセスを行うコンテンツの作成とアクセス
方法を設定してきます。
初回にコンテンツの作成方法は表示される
チュウトリアルを進めていくと作成する事が
できるようになります。

12. Contentsへのアクセス
コンテンツのアクセスするURLは以下にリクエストするとデータを取得できます。
http://{ホスト}/api/{API IDの複数形}
この際に認証トークンとしてチュートリアルで作成したAPI トークンをBearer認証でリク
エストヘッダー内に含めてください

13. Strapiで今後調べたいこと
・ユーザ認証(おそらくあるはず)
・GraphQL
・多言語対応
・Contents Typeを元にOpen API仕様のファイルのGenerateができたら

14. ご清聴ありがとうございました!
Twitter: @yamasaw44