Jamstack構成（microCMS × Gatsby × Netlify）で自社サイトをフルリニューアルした話

これまでのWebサイトで採用されていた、ユーザーがアクセスした際にWebサーバー内でページを構築する方式(Server Side Rendering)や、ページがブラウザに返却された際にWebサーバーからコンテンツを取得して生成を行う方式(Client Side Rendering)と異なり、事前にビルドした静的HTMLを配置しておき、それを表示するだけの方式(CSR with Prerendering)をとっています。

したがって、ユーザーが閲覧する際にWebサーバーを介する必要がなく、「Webサーバーを排除し、サーバーの管理や運用のコストを削減」に繋げることができるようになります。

また、Webサーバー自体が閲覧者から見えない状態になるので、セキュリティリスクを低くすることもできます。

それでは、ここからは今回のリニューアルで採用したサービスと採用理由についてご紹介します。

今回の採用サービスと採用理由

microCMS（ヘッドレスCMS）

APIベースで出力される日本製のヘッドレスCMS
予約公開やプレビュー機能もあり、GUIの管理画面からは直感的な入稿が可能
Next.jsやGatsbyなど様々な言語・フレームワークと連携可能

https://microcms.io/

Gatsby（静的サイトジェネレーター）

Reactベースの静的サイトジェネレーター
GraphQLをインターフェースに用いることで、コンテンツの取得処理を手軽に実装できる
プラグインが充実しており、ダウンロードして設定を少し書き加えるだけですぐに利用することができる

https://www.gatsbyjs.com/

Netlify（CDN/ADN）

静的サイトホスティングサービス
外部のリポジトリと連携し、任意のタイミングでビルド、デプロイが可能
設定がGUIの管理画面から簡単にでき、SSLの設定も可能

https://www.netlify.com/

そして、これらのサービスを先程の「Jamstackでコンテンツの登録からブラウザにページが表示されるまでの流れ」に当てはめるとこちらのようになります。

サービスを当てはめてみると、担当範囲が明確に分割されていることからかつてのWebサーバー中心の設計からマイクロサービス化されていることがよくわかります。このことから各サービスの範囲に絞った開発やメンテナンスもできるので、今後の運用についてもある程度コスト削減が見込まれると思います。

本章の結びとして各サービスを実際に使ってみた所感を書いていきます。

各サービスを使ってみた所感

microCMS

microCMSのブログ内でフレームワークと組み合わせた実装紹介もあり、非常に参考にしやすくて助かりました。簡単にスキーマを設定できるので、入出力のイメージもつきやすく、開発面でも分かりやすくて良かったです。また、管理画面からは開発ロードマップも確認でき、これからのアップデートにかなり期待しています。

Gatsby

個人的にここ1年間ほどReactを使う案件が多かったので、学習コストも少なく済んだ印象があります。サービスの採用理由でも書きましたが、やはりプラグインが充実しており、画像のwebpへの変換や本ブログのfeed取得等が簡単にできました。また、今回はSCSSでスタイリングを行いましたが、CSS-in-JSやCSS modulesも対応しているのでそのうち変更してみたいと思います。