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の頭文字を取ったもので、それぞれ以下のような役割を担っています：

  • JavaScript＋API：動的データコンテンツの取り扱い
    • リクエスト／レスポンスサイクル中の動的プログラムの制御（JavaScript）
    • すべてのサーバーサイドの処理やデータベースへのリクエスト（API）
  • Markup：静的データコンテンツの取り扱い
    • デプロイ時にビルドされるテンプレート化されたマークアップ

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

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

  • 高パフォーマンス
    • Webサーバーが不要なため、JAMstackでは静的ページをCDNで配信します。デプロイ時にページをあらかじめ生成するためページの構築を待つ必要がなく、CDNでファイルを提供しているので初期読み込み時間が最小になり、より高いパフォーマンスが期待できます
  • 高いセキュリティ
    • サーバー側のプロセスがマイクロサービスAPIに集約されるため脆弱性に対する攻撃対象の減少が期待できます
  • 低コストなスケーラビリティ
    • コンテンツ配信の手段として利用するため、安価でかんたんにスケーリングできます
  • よりよい開発者体験
    • Webサイト運用に関わるそれぞれの技術が疎結合化されるため、よりターゲットを絞った開発とデバッグが可能になります。またそれぞれの技術の選択肢が幅広いため、要件に応じて柔軟に環境を構築できます

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

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

JAMstackの技術選定

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

  • 静的サイトジェネレーター
    • コンテンツデータとテンプレートからサイトを生成
  • Headless CMS
    • コンテンツデータの管理を行うシステム。GUIを持たず、APIを通してデータ内容を入出力する
  • ホスティング
    • ビルド、静的コンテンツをCDN上にデプロイ

それぞれに該当する技術が複数あるため、JAMstackを構築するにあったってまずは要件に応じた技術選定からはじめなくてはなりません。有名な組み合わせはGatsby、Netlify CMS、Netlifyでしょうか。単純にサイトを公開するだけならボタンを何度かクリックするだけで完了してしまうので、デプロイまでに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で利用できそうなサービスをピックアップしました：

  • AWS Amplify
    • AWSを利用するWebアプリケーション向けのJavaScriptライブラリ。サインアップやサインイン、コンテンツ管理などの機能をサーバーレスに実装することができる
  • AWS Amplify Console
    • 「AWS Amplify」を組み込んだWebアプリを、コンソール上から構築、ビルド、リリースすることができる
  • Amazon CloudFront
    • 大規模にスケールされ、グローバルに展開しているコンテンツ配信ネットワーク
  • AWS AppSync
    • リアルタイムのデータ同期機能とオフラインプログラミング機能を備えたGraphQLサービス
  • AWS CodeBuild
    • ソースコードをコンパイルし、テストを実行し、デプロイ可能なソフトウェアパッケージを作成できるビルドサービス

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

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