Smart Communication Design Company
ホーム > ナレッジ > Blog > フロントエンドBlog > 2019年12月 > AWSでJAMstackことはじめ(基礎知識編)

AWSでJAMstackことはじめ(基礎知識編)


UI開発者 古川

この記事はミツエーリンクスアドベントカレンダー2019 - Qiitaの10日目の記事です。

JAMstackとは2016年ごろにNetrifyの創設者Matt Biilmann氏が提唱した新しいフロントエンドスタックです。リクエストを受けてからサーバー上で処理を行いレスポンスを返す従来のWebサイトの配信方法とは異なり、JAMstackでは事前にビルドされたHTMLをCDN上で配信します。

最近、特に注目が集まっているこのJAMstackについて、基礎知識編と構築編の2回に分けてご紹介したいと思います。

JAMstackとは

JAMstackの公式サイトによるとJAMstackとは、

A modern architecture -- Create fast and secure sites and dynamic apps with JavaScript, APIs, and prerendered > Markup, served without web servers.

(JavaScript、API、およびプリレンダリングされたマークアップで構成された、サーバーレスで提供される高速かつ安全なサイトと動的アプリを作成するモダンなアーキテクチャ)

とあります。これだけを見ると少し難しく感じますが、ざっくり言ってしまうと「動的なデータコンテンツを扱う静的サイトを作る技術の総称」と個人的に解釈しています。

JAMstackはJavaScript、API、Markupの頭文字を取ったもので、それぞれ以下のような役割を担っています:

つまりあらかじめマイクロサービスのAPIを利用してデータを取得し、ページ内容を静的なHTMLとして書き出しておくことで即座にレスポンスを返却することが可能となります。現在利用されているサーバー技術がフロント側に移ったことで、より速く、安全で低コストなWebサイト運用が実現できます。

JAMstackを導入する利点について、公式サイトでは以下の点が挙げられています

JAMstackはその特性から、コンテンツが固定の情報発信サイトやWeb APIでデータを扱うWebアプリのフレームなどへの導入が考えられます。逆に、ユーザーごとに別コンテンツを表示する、などコンテンツの変化が激しいサイトはビルドの負荷が高まるため向いていません。

概要を把握したところでJAMstackを構築するための具体的な技術を見ていきましょう。

JAMstackの技術選定

JAMstackは大きく分けて以下の3つの技術で構成されます:

それぞれに該当する技術が複数あるため、JAMstackを構築するにあったってまずは要件に応じた技術選定からはじめなくてはなりません。有名な組み合わせはGatsbyNetlify CMSNetlifyでしょうか。単純にサイトを公開するだけならボタンを何度かクリックするだけで完了してしまうので、デプロイまでに3分もかかりません。またNetlifyの創始者がJAMstackを提唱しているだけあり、NetlifyとNelify CMSを利用したJAMstack構築の関連ドキュメントなども検索すればたくさん見つけられます。

JAMstackのエコシステムは千差万別なので、独自のベストプラクティスを見つけるまでは何を選定すればよいか迷うかもしれません。そこで今回はことはじめということで、「なるべくAWS(Amazon Web Services)で完結する環境」というルールを設け、JAMstackなBlogサイトを構築する構成を考えてみたいと思います。

AWSでJAMstackを実現できそうな技術

AWS(Amazon Web Services)とはAmazonが提供しているクラウドサービスの総称です。Amazonが保有するコンピューターリソースを、使用量に応じた従量課金制で使用できます。AWSを利用することで、オンプレミスなサーバーのように先行して設備を構築する時間やコストを大きく下げることが可能であり、また世界中に多数のデータセンターが存在するため物理障害にも強いのが特徴です。AWSのサービスはカテゴリーだけでも21あり、サービス総数は100を超えます。

以下にJAMstackで利用できそうなサービスをピックアップしました:

またJAMstackの主な構成技術要素のほかにJAMstackのベストプラクティスとして「すべてがGitに存在する」という項目がありますが、これにはAWS CodeCommitが利用できそうです。

基礎知識編は以上です。構築編ではAWSのサービスを用いて実際にJAMstackなBlogサイトを作成する方法をご紹介したいと思います。