Jamstack 事始め - Astro でサイトを作成し、Cloudflare でホスティング (その1: Jamstackとは何か？)

Jamastack とは何か

Jamstackという言葉はそれが世に出てきた時と現在では意味するところが異なっています。元々は使用されている技術 stack の頭文字をとって付けられたもの(JavaScript、API、Markup)ですが、現在は「分離」、"decoupling" を示すアーキテクチャとしてのアプローチの意味があります。

現在の公式サイトでは以下のように定義しています。

What is Jamstack?

Jamstack is an architectural approach that decouples the web experience layer from data and business logic, improving flexibility, scalability, performance, and maintainability.

Jamstack removes the need for business logic to dictate the web experience.

It enables a composable architecture for the web where custom logic and 3rd party services are consumed through APIs.

For fast and secure sites | Jamstack

目的としては、"improving flexibility, scalability, performance, and maintainability." (柔軟性、拡張性、パフォーマンス、保守性を向上させる) ものと言っています。
ではどうやって？、"an architectural approach that decouples the web experience layer from data and business logic" (Webエクスペリエンス層をデータやビジネスロジックから切り離すアーキテクチャ・アプローチ)と。
後者の表現は少しわかりにくいのですが、私の中で1番しっくりきていた説明は、Software Design 2022年11月号の「いまJamstackを始める理由」で記載されていた以下の記載です。

Jamstack において、最も重要なのは「分離」と「事前レンダリング」です。HTML を作る「ビルドプロセス」と配信する「ホスティングプロセス」を分離し、さらに静的な HTML によるフロントエンドと API によるバックエンドを分離します。

Software Design 2022年11月号｜技術評論社

Jamstack のコンセプトを取り込んだコンテンツの作成

Jamastack のコンセプトを取り込んだ上でのコンテンツの作成、構成は以下のようになると思っています。

1. コンテンツは静的サイトジェネレータを使って事前に作成 (SSG(Static Site Generation))
   【ローカル(or Github Actions など)で実行】
2. 作成されたコンテンツは HTTP サーバの機能をもつホスティングサービスで公開
   【ホスティングサービスを利用】
3. 静的サイトを作成する際に可能な限り動的な情報も取り込んで HTML に落とし込む
   【ローカル(or Github Actions など)で実行】
4. どうしても静的サイトを作成する際に HTML に落とし込めない情報は情報が必要なタイミングで動的に情報を取得する (SSR(Server Side Rendering))
   【ホスティングサービスを利用】

先程の Software Design の記事の引用で、

HTML を作る「ビルドプロセス」と配信する「ホスティングプロセス」を分離し

とありましたが、「分離」というところを意識するために【】で"ローカル(or Github Actions など)で実行"、"ホスティングサービスを利用"と入れてみました。

「ビルドプロセス」は、1と3、「ホスティングプロセス」の部分は、2と4にあたります。4 で「どうしても」とありますが、1〜3だけで構築、運用可能な Web サイトは結構あると思います。この場合、所謂静的サイトとなりますので、ホスティングサービスに求められるものは、純粋な Web サーバの機能だけです。自前でサーバを持たなくても、AWS の S3、GCP の Cloud Storage にファイルを置くだけでもう配信が可能です。各社ちょっとした CDN のサービスも合わせて提供してくれるので、ホントに簡単なサイトであればもう充分です。
コンテンツの作成だけでにフォーカスし、ホスティングの部分は任せてしまいます。

餅は餅屋ということで、ホスティングの部分を適切なサービスに任せる(分離する)ことで、Jamstack を採用する上での"flexibility, scalability, performance (柔軟性、拡張性、パフォーマンス)"の向上が低コストで満たせます。
また、Jamstack は Secure だとも言われます。そう、ホスティングサービスにちゃんとしたサービスを使用しておけば、Webサーバを稼働させているインフラのセキュリティ、Webサーバの脆弱性などへのセキュリティ対策などは、サービサーに任せておけばよく、ちゃんとした品質で提供されておりますので安心して運用できます。

では、静的サイトでない場合、4 のケースはどうなるのでしょう。
この部分は所謂 servrless と言われる環境を使うのが Jamstack のコンセプトの中では言われています。こちらも自前でサーバ環境を用意するのではなく、既にプラットフォームが用意してくれているランタイム環境を使ってアプリを動作させるというものです。今ですと、JavaScript の動作環境、Node.js が主流なのかと思います。

以降でホスティングサービス、コンテンツを生成するジェネレータを整理します。

Jamstack ホスティングサービス

上記1〜4をカバーするホスティングサービスは幾つかありますが、私がよく聞くところでは以下のようなサービスです。

• Netlify / Develop and deploy websites and apps in record time
• Vercel / Develop. Preview. Ship. For the best frontend teams
• Cloudflare Pages

ホスティングサービスに関しては、今回は、最後の Cloudflare Pages を使って実際に試してみます。

Jamastack コンテンツジェネレータ

コンテンツを生成するジェネレータにもいろいろあります。

コンテンツジェネレータと言った時、「事前に静的コンテンツを生成するアプローチ」を行うツールだけが一昔前の一般的な認識ではなかったかなと思います。現在はそれに加え、「段階的に静的コンテンツを生成するアプローチ」、「サーバサイドでリクエストに応じて動的に生成するアプローチ」を機能として組み込んだものがあります。

実際のツールを取り上げる前に静的コンテンツの生成に対するアプローチを整理します。 コンテンツを生成するアプローチとしては、大きく以下3つパターンに分類されるのではないでしょうか。

1. 事前に静的コンテンツを生成するアプローチ
   • SSG (Static Site Generation)
2. 段階的に静的コンテンツを生成するアプローチ
   • ジェネレータを動作させたタイミングで事前に静的コンテンツを生成するという意味では、1.の SSG の仲間ですね。SSGの拡張版です。
   • 更に、ISG (Incremental Static Generation) と ISR (Incremental Static Regeneration) の2パターンがあります。
3. サーバサイドでリクエストに応じて動的に生成するアプローチ
   • SSR (Server Side Rendering)
4. クライアントサイドで動的に生成するアプローチ
   • CSR (Client Side Rendering)

SSG、ISG、ISR、SSR、CSR と、いろいろありますね。。

事前にコンテンツを生成する、という意味では、1、2が仲間です。 1と2は事前に静的コンテンツを生成するという意味では同じことなのですが、2の場合にはコンテンツ生成時に必要に応じて別のリソースにアクセスを行い、その時点の最新の情報を取り込んで静的コンテンツを生成する仕組みになります。

動的にコンテンツを生成するという意味では、3、4が仲間です。(実行環境はサーバとクライアントで異なりますが)

ツールによって、上記の1〜4を全て実現できるもの、その実現方法、異なりますが、jamastackのサイトでは以下のようなツールが紹介されています。

• Static Site Generators - Top Open Source SSGs | Jamstack

コンテンツジェネレータに関しては、今回は Astro を使ってみます。
全てのツールを試した訳でないのですが、紹介されているツールの中でも後発のものなり、React、Vue といった UI フレームワークを自由に選択できるというところから試してみようと思っています。

Jamstack の採用は進んでいる？？

個人的には Jamstack のコンセプトはとても合理的でその方向に進むのがよいのだろうなぁと思っているのですが、徐々に採用を試し始めている話を聞き始めているのですが、イマイチ日本ではまだ浸透していないように思えます。

個人的にはその理由としては、CI/CD がなかなか浸透できない開発環境における開発体制、組織体の問題なのではと思うところがあります。 Jamastack はアプローチの話とありましたが、環境のアーキテクチャの話だけではなく、公式サイトでも"improving flexibility, scalability, performance, and maintainability"と記載がありましたように、コンテンツの作成、リリース、メンテナンスといった運用まで含めた話となり、そのメリットは運用も含めての話になっていると思います。 そうなりますと、旧態依然とした環境、体制のもとではその効果が発揮できず、なかなか導入も進まないのではないかなと。

小回りの効く体制をとれる組織体で成功事例を作っていき、広く広まっていくとよいなぁと思っている今日この頃です。

この記事はここまでです。次回から実際のコンテンツの生成、ホスティングサービスへのデプロイなどを試していきます。