JAMSTACKの紹介

2021/07/12

はじめに

今回の記事は初回なので、当サイトの自己紹介ということでこのブログの構成について紹介してみます。ここの構成はいわゆるJAMSTACKと呼ばれるもので名前は聞いたことがあっても、内容は詳しく知らないという人は多いのかもしれません。 JAMSTACKについて簡単にまとめてみるので、雰囲気だけでも伝わると嬉しいです。

JAMSTACKとは？

JAMSTACKの公式サイトではJAMSTACKに関して以下のように説明されています。 https://jamstack.org/

Jamstack is the new standard architecture for the web. Using Git workflows and modern build tools, pre-rendered content is served to a CDN and made dynamic through APIs and serverless functions. Technologies in the stack include JavaScript frameworks, Static Site Generators, Headless CMSs, and CDNs.

Jamstackは、ウェブの新しい標準アーキテクチャです。Gitワークフローと最新のビルドツールを用いて、プリレンダリングされたコンテンツをCDNに配信し、APIやサーバーレス機能によって動的化します。スタックを構成する技術には、JavaScriptフレームワーク、Static Site Generator、ヘッドレスCMS、CDNなどがあります。

書いてある通りではあるのですが、これだけでは全体の構成をイメージすることは難しいと思います。そこで、JAMSTACKを従来のWeb構成と比較してみます。

従来のWeb構成

SSR(サーバサイドレンダリング)

blog-jamstack-1

昔からある構成
WordPressなどはだいたいこれ

SPA(シングルページアプリケーション)

blog-jamstack-2

ここ最近の主流
サーバ側で生成していたフロントエンド部分(HTML,CSS,JS)を分離した構成
APIとは基本的にデータのやり取りのみを行い、クライアント側で表示させる画面はJSを駆使してブラウザで動的に変化させる

続いてJAMSTACKの構成を見てみます。

JAMSTACKの構成

blog-jamstack-3

...ただの静的ファイルをサーバへ置いただけでは？

はい。サイトの利用者側からはただの静的サイトにしか見えません。 JAMSTACKの特徴はその静的ファイルを用意するまでのプロセスにあります。ファイルを用意するまでの工程を含めたJAMSTACKの全体像は以下の通りになります。 blog-jamstack-4

図中における静的ファイルをデプロイするまでの工程は

サイトの管理者がCMSサーバ(青)を利用してサイトのデータを一部更新する（記事を追加するなど）
CMSがデータを更新
データの更新を検知したビルドサーバ(黄)がCMSへデータをリクエストする
最新のデータをビルドサーバが受け取る
受け取ったデータをもとにビルドサーバがHTML等をビルドし、サーバ(緑)へデプロイする

という感じになります。ビルドサーバがデータの更新を検知する方法ですが、データが更新されたときにCMS側からビルドサーバへweb hookでビルドを促すのが一般的です。このようにデータの更新毎にビルド・デプロイを行うことで、静的サイトでも常に最新のデータが表示されるようになります。 CI/CDによるサービスの連携がメジャーになってきた近年だからこそ生まれた構成だといえるでしょう。

具体例（当サイト）

上記のような構成は自前のサーバで用意することも可能ですが、外部サービスを使用してJAMSTACK構成にするのが一般的です。当サイトではJAMSTACK構成にするにあたって以下の外部サービス(フレームワーク)を使用しています。

https://www.contentful.com/

ContentfulはCMSサービスの一つです。 APIを利用したデータのやりとりのみを行うCMSであるため、ヘッドレスCMSと呼ばれています。この記事もContentfulを利用して書いており、Contentfulの管理画面では下の画像みたいな感じで編集しています。 blog-jamstack-edit 記事に変更を加え、保存(Publish)すると即座にビルドが走ってサイトが更新されます。