- 調査・選定編 -
自己紹介
おはようございます。こんにちは。こんばんは。
現在、株式会社プロトソリューションで自社開発チームに所属しているスナガワです。
ITエンジニアってなんなん？そろそろ、名乗っていいんかな？
って、思いながら名乗るタイミングを逃した系の「IT園児」です。※ビール好きのおっさんです
今回の記事について
少し前に、新規サービス案件の話を頂いて、サクッとモックを構築してスタートしようってところからはじまり。
システム構成の調査や技術選定の過程でJamstackに出会い、
いろいろと自身で試してみたものを備忘録として記事にしました。
今回は、Jamstackはじめましての人に読んでほしい記事になります。
「こういうアーキテクチャ導入ありっすね」とか
「今運営しているサービスとマッチするかも」とか
なにかのヒントになってくれれば幸いです。
本記事の- 調査・選定編 -では、構築うんぬんの話はしませんのであしからず。 次記事の- 構築・実装編 -にて、投稿する予定です。
サービス要件
案件については、深堀って紹介はできませんが、
端的に言うと、会員制の動画記事投稿・記事閲覧サイト構築です。
動画記事コンテンツをフォームから投稿
↓
動画記事コンテンツを閲覧またはストリーミング視聴
そのため、
- アップロード用のフォーム画面 (backend)
- 閲覧用の動画記事コンテンツ一覧・詳細画面 (frontend)
が必要になり、フォーム画面をHeadlessCMSで、閲覧用画面をSSG(Static Site Generators)で
Jamstack構成を検討することにしました。
ぶっちゃけ単純にWordpress導入するだけでも運用可能な要件だったと思うのですが、
自身のスキルアップも兼ねて選定させていただきました。
Jamstackとは
Jamstackという単語はNetlify社によって定義されたとのこと。
Netlify公式サイト
“Jamstack” という言葉は、2015年に Netlify 社の共同創業者兼CEO である Matt Biilmann が、チームが Web を構築する新しい方法を表現するために作ったものです。
Jamstackのメリットや、従来のWEBサイトとの違いなど、
興味のある方はJamstack公式サイトに目を通していただければと。
ちなみにJamstackの「Jam」とは
もともと、「JAMstack」と呼ばれ、以下の3つを単語をとって名付けたシステム構成とされていたようです。
※「stack=システム構成」
- 「J」Javascript (プログラミング言語 ※動的に変化する要素の処理)
- 「A」API (データを操作する仕組み)
- 「M」Markup (主にWEBページを表示する静的HTMLのことを指す)
現在は「JAMstack」→「Jamstack」と変更となり、 定義も変更となって、JavascriptとAPIは必須ではなくなっているようです。
HeadlessCMSとは
CMS
そもそもCMSとは、【Contents Management System】の頭3文字をとった略で、
プログラミング・コーディングなど、WEB制作の専門的な知識が無くても、
WEBサイトやWEBコンテンツの構築・管理・更新をGUIで操作できるシステムのことです。
WordpressやDrupalなどが代表されます。
HeadlessCMS
Headlessという単語からわかるように、頭(顔)のないCMSっていう、意味合いで、
frontend側（見た目）がなく、backend側の機能しか持ってないことが特徴です。
WordpressにあるようなテーマやCSSといった機能はなく、シンプルなシステム構成になってます。
HeadlessCMSには、大きく2つの種類があります。
PaaSで提供されるクラウドサービス型
サーバー・DB・ストレージがクラウド上にあり、パッケージでサービス提供されているものになります。
無料枠が存在しますが、基本的に、運営している企業に料金を支払って、
CMSの管理画面のみを利用する形です。セルフホスティング型
自前でサーバー・DB・ストレージを用意して、動作環境を構築していきます。
管理する手間はありますが、オープンソースのCMSを選定すれば
サービス利用は無料で使い続けることができます。
技術選定
frontend (フロントエンド)
フロントエンドにイマドキなフレームワークの採用を検討しました。
有名なところからチョイスして、候補は以下になりました。
結果、GitHubのStarでNext.jsが一番人気だったこともあり、Next.jsを採用。
jamstack.org
※画像は2021年12月現在
backend (バックエンド)
バックエンドにHeadlessCMSの採用を検討しました。
いろいろ調べた結果、候補は以下です。
- microCMS (国産サービス)
- Contentful (HeadlessCMS最大の開発者コミュニティが特徴)
- Strapi (ローカルで構築可能)
実際にすべて触ってみて、個人的にはmicroCMSが使いやすかったです。
日本語の記事が多く、
なにより、Next.jsやNuxt.jsとの連携の仕組みもmicroCMS公式ブログで紹介されてたりして親切。
なんですが、
- 動画がメインで比較的重たいファイルを取り扱うこと（ストレージ料金の問題）
- 社内で管理しているAWSにデータの保存（動画ファイル・DB等）が必要だったこと
- GraphQLを触ってみたかった
- ローカルでお手軽に構築できて、なにかあっても「バルス」的に破壊できる
というのが理由で、上記の条件を満たしたセルフホスティング型のStrapiを採用することにしました！
microCMSは、またの機会に導入を検討します。個人的な趣味で構築してるシステムとかできっと使います。たぶん。
Next.jsとは
Next.jsはReactベースのJavascriptフレームワークです。（オープンソース）
Vercel社によって開発がされていて、現在も活発に活動している様子。
主観ですが、Next.jsといえば
サーバ側でページを生成するSSR(Server Side Rendering)や
クライアント側でJSを実行してレンダリングするCSR(Client Side Rendering)のイメージが強いです。
今回はSSG(Static Site Generation)で動作する環境を構築していきます。
Strapiとは
HeadlessCMSをセルフホスティング型で提供しているサービスです。
さらにオープンソースとなりますので、構築さえしてしまえば無料で使用することが可能。
Node.jsで動作するCMSとなり、Node.jsが動作する環境であれば、
コマンドを1行たたくだけで、あっという間に管理画面の表示までいけちゃいます。
また、普通に起動すると、提供されるAPIはRESTful APIとなりますが、
公式のプラグインでGraphQLを使用することも可能です。
英語ですが、Docsやハンズオンも充実していて、とても親切な印象。
本記事まとめ
さて、サービス要件をもらって調査してシステム構成を選定してみたいな流れから、
Jamstack・HeadlessCMS・各サービスの概要紹介をつらつらと書いていきましたが、
次回は実際に構築していった内容を記事におこして投稿しようと思います。
今回、触れられてないAWS側の設計やGraphQLについても、次回まとめて紹介させていただきます！
では、よいBeer Time🍺を！
See you again.