JAMStackをいまさらながら解説してみる

最近、JAMStackという考え方を、遅まきながら知りました。
静的サイトジェネレーターは昔から知っていましたが、CD/CIやBaaSなどと組み合わさってこんなに進化していたのは驚きでした。
ということで、JAMStackについて調べた内容をまとめてみました。

JAMStackとは

JAMStackとは、静的ファイル（HTML, CSS, Javascript)を基本とした新しいタイプのウェブアーキテクチャーです。
ちなみに、JAMStackのJAMとはJavascript + API + Markupの略です。

現在のメジャーなCMSは、ウェブサーバーとDBサーバーの連携により構成されています。
WordPressやDrupalといったCMSが有名ですね。
なので、ユーザーがブラウザでアクセスするとウェブサーバーがDBサーバーに問い合わせてHTMLを返します。

この構成は、ダイナミックなウェブコンテンツを生成するのにはいいのですが、リクエストのたびにDBアクセスが発生するのでサーバー負荷が高くなります。

JAMStackは、データ登録時HTMLを生成しHTMLファイルなど静的ファイルのみでコンテンツを構成します。

上の図では、まず最初に記事データをGitHubなどのバージョン管理システムにプッシュします。
すると、静的サイトジェネレーターというHTMLを生成するプログラムが自動で実行されます。
生成されたHTMLファイルはCDN（コンテンツ配信システム）に配置されます。
JAMStackでは、静的ファイルのみで構成されてデータベースとの接続は行いません。
ただし、動的コンテンツが必要なこともありますので、ウェブAPIを公開するサードパーティサービスを利用します。

JAMStackのメリット

では、WEB+DB方式より優れているJAMStackの点はところはどこなのでしょうか？

• CDNでの運用の容易さ
  JAMStackは、基本的に静的ファイルのみを扱いますので、CDNへファイルをアップロードするだけで運用が簡単です。
• スピード
  DBアクセスがないので、ユーザーからのアクセスにも素早く返すことができます。大規模なアクセスが集中するサイトに向いていますね。
• セキュリティ
  既存のCMSは、複雑なプログラムになってしまっているのでセキュリティの脆弱性がしょっちゅう出ます。しかし、JAMStackはその心配がありません。
• バックアップ
  静的ファイルだけで構成されているのでバックアップも簡単です

ただ、JAMStackにも向いていない分野があります。

• 更新頻度
  プラットフォーム系サービスなどコンテンツがしょっちゅう更新されるようなサイトだと、頻繁に静的ファイルのリビルドが走ることになるので向いていません。ただ、ヘッドレスCMSというサービスを使えば問題はありません。

• コーディングの必要性
  後ほど説明しますが、静的サイトジェネレータというプログラムを実行することになりますので、エンジニアでないと運用できない部分が増えることになります。

JAMStackを実現する技術

JAMStackは、いくつかの要素技術によって構成されています。

• 静的サイトジェネレーター
  JAMStackでは、最終的にHTMLやCSS, Javascriptなどの静的ファイルを生成しますが、それを行うのが静的サイトジェネレーターです。
  静的サイトジェネレーターとして有名なものは以下のようなものがあります。

Gatsby.js
www.gatsbyjs.com

Hugo
gohugo.io

Jykill
jekyllrb-ja.github.io

• CD/CI
  プログラム開発では、CD（継続デリバリー）/ CI（継続インテグレーション）は当たり前ですが、ウェブコンテンツ制作でも必須のものとなりそうです。
  JAMStackが可能になったのは、CD/CIサービスが充実したことも理由の一つと言えるでしょう。
  有名なCD/CIサービスとしては、GitHubやBitBucketなどがあります。

• CDN
  CDN（コンテンツ配信ネットワーク）の普及もJAMStackには重要な要素です。
  CDNは、効率よくコンテンツを配信するしくみで多くの大規模ウェブサイトで利用されています。
  JAMStackは、CDNの使用が前提となる技術となっています。

• Web API
  静的ファイルのみではダイナミックなコンテンツを提供することができません。
  データ更新毎に静的ファイルを生成するという方法もありますが、あまり現実的ではありません。
  そんな時は、APIを公開している外部サービスを利用します。
  現在では、認証や決済、CMSなどの機能を公開しているサービスがたくさんあります。

JAMStackエコシステム

ここにきてJAMStackが話題になったのは、様々な関連サービスによって構成されるエコシステムが実用レベルになってきたのがあります。
上の図のように、現在では様々なフレームワークやサービスが提供されています。
この中で、いくつか注目のサービスについて解説しましょう。

Netlify

www.netlify.com Netlifyは、JAM Stackという言葉を考えた会社で、提供するサービスもJAM Stackに特化したものになっています。
無料プランで色々できますので試しに使ってみてはいかがでしょうか。

Firebase

firebase.google.com Googleが提供するBaaSと呼ばれるサービスで、認証やデータ保存、Web API公開などが手軽に利用することができます。
詳しくはこちらのブログ記事で解説してますので、よかったら読んでみてください。

blog.it-plusx.com

AWS Amplify

aws.amazon.com Amazon AWSが提供するNetlifyとFirebaseが一緒になったようなサービスです。
AWSの他のサービスとシームレスに連携できるので、AWSを利用しているユーザーには便利なサービスです。

駆け足でJAM Stackについてまとめてみましたが、イメージできましたでしょうか。
まだまだWordPressなどの従来のウェブシステムが主流な状況ですが、これからはJAM Stack型のサイトが増えていくものと思われます。
ITエンジニアならぜひともキャッチアップしておきたい技術ですね。