NRIネットコム Blog

NRIネットコム社員が様々な視点で、日々の気づきやナレッジを発信するメディアです

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

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

Creative Jamstack ヘッドレスCMS アーキテクチャ・理論 イベント・告知 - アドベントカレンダー #アドベントカレンダー2021

本記事は NRIネットコム Advent Calendar 2021 22日目の記事です。
🎁 21日目 ▶▶ 本記事 ▶▶ 23日目 🍰

はじめまして、フロントエンドエンジニアの牧と申します。
今回自社サイトのリニューアルをJamstack構成で行ったので、Jamstackとそこで採用したサービスについて書いていきます。

リニューアルの概要について

リニューアルの背景やコンセプトについては別記事にて記載しておりますので、こちらも合わせてご覧いただければと思います。

tech.nri-net.com

Jamstackとは

Jamstackは、JavaScript、API、Markupの頭文字をとった略語であり、それらの技術を組み合わせたWeb開発アーキテクチャになります。

ヘッドレスCMS等で事前に登録済みのデータをAPIで取得し、生成した静的HTMLをCDNで配信する形をとることで、Webサーバーを排除し、サーバーの管理や運用のコストを削減することができます。

https://jamstack.org/

上記の「ヘッドレスCMS等で事前に登録済みのデータをAPIで取得し、生成した静的HTMLをCDNで配信する形をとることで」だけだと少し分かりにくいので、Jamstackでコンテンツの登録からブラウザにページが表示されるまでの流れで見てみましょう。

Jamstackでコンテンツの登録からブラウザにページが表示されるまでの流れ

  1. ヘッドレスCMS等でコンテンツの登録を行う
  2. ビルド時にAPIでコンテンツを取得する
  3. 取得したコンテンツをもとにページを生成
  4. 生成したページをストレージに配置
  5. ユーザーがストレージに配置されたページにアクセスする
  6. ブラウザにページ返却され、ブラウザに表示される

これまでの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も対応しているのでそのうち変更してみたいと思います。

Netlify

静的サイトの公開だけであれば、もはやリポジトリとNetlifyだけあれば良いのではないかと思えるくらい簡単でした。ビルド時間の制限がありますが、毎日頻繁にリリースがあるというわけではなければ、かなり使い所があるサービスだと思いました。

最後に

今回は、Jamstack構成（microCMS × Gatsby × Netlify）で自社サイトをフルリニューアルした話として、Jamstackについてと各採用サービスについて書いてみました。

自分一人でサービス選定を行ったわけではないですが、各サービスが「直感的」、「手軽」、「簡単」であることは今後の運用で非エンジニアでもメンテナンスしやすくなることに繋がるので、かなり重要視していたかと思います。

また、今回は自社サイトのリニューアルでしたが、Jamstack構成の各サービスは要件によって柔軟に変更可能であり、選択肢も多いことから、今後お客さまの案件等で採用して今回の経験を還元できると嬉しいです。

NRIネットコム Advent Calendar 2021
🎁 21日目 ▶▶ 本記事 ▶▶ 23日目 🍰

執筆者：牧 光一

ポケモンカードが趣味のフロントエンドエンジニア。
最近はReactばかり触っている。