code-log

フロントエンドの話題中心です。

モダンなweb開発「JAMstack」アーキテクチャについて調べてみた

こんにちはかみむらです。Qiitaを眺めていた時にJAMstackアーキテクチャーというワードを見つけました。最近はReactやvueなどのSPAフロントエンドばかり開発していたのに、JAMStackというアーキテクチャを明確には知りませんでした。

なので今回はJAMstackがweb開発にとって、どういったアーキテクチャーなのか調べてみました。

こちらがJAMstackの公式サイトです。

jamstack.org

追記

JMAstackの情報交換Slackを立ち上げました。どなたでもご参加ください

join.slack.com

 

JAMStackとは?

JAMstackはJavaScriptAPI、Markupの略です。これは総称してJAMstackと呼びます。この用語はMathias Biilmannによって、クライアント側のJavaScript、再利用可能なAPI、および事前構築されたMarkupに基づいた最新のWeb開発アーキテクチャを実現するために作成されました。Mathias Biilmannのツイッターアカウントをみてみると、静的サイトホスティングサービスNetlifyのCEOみたいです。静的サイトを高速でビルドし、配信できるNetlifyはまさにJAMStackに最適なサービス設計であると言えます。

JAMstackアプリケーションの性質は、アプリの拡張を容易にして、CircleciなどのDevOpsがなくても運用を容易にします。 また、JAMstackのアプローチは静的サイトのセキュリティにあります。静的サイトであるため、動的サイトで攻撃がされやすいコードレイヤーの部分がないので、セキュリティリスクが非常に少ないです。

もう1つの利点は、バックエンドで処理されていた多くの機能がユーザーのブラウザで行われることです。また、技術スタックがJavaScriptベースであるということは、Web開発者にとって大きな利点で、開発者のDXをさらに高めてくれます。

JAMstackアーキテクチャーはいつ頃できたのか?

JAMstackというワード自体最近よく聞くようになりました。なので、割と最近のアーキテクチャーパターンかと思われがちですが、JAMStackのGitHubをみてみると、二年前にコミットされています。そんなに前からあるとは知りませんでした。こちらがjamstack.orgのGitHubレポジトリです。

github.com

JAMStackのベストプラクティスについて

JAMStackには6つのベストプラクティスが公式によって定義されています。ここからは公式サイトのほぼ妙訳です。自分の解釈も若干加えて書いていきます。ベストプラクティスが書かれているページはこちらになります。

https://jamstack.org/best-practices/

CDN上のプロジェクト

JAMstackプロジェクトはサーバー側のコードに依存しないため、単一のサーバー上で配布することができます。 CDNから直接提供することで、スピードとパフォーマンスが実現します。アプリケーションの多くは、エッジにプッシュすることができます、より良いユーザーエクスペリエンスを提供できます。

すべてGitで

JAMstackプロジェクトでは、誰でもgitクローンを実行し、標準的な手順(npm installなど)で必要な依存関係をインストールし、完全なプロジェクトをローカルで実行できるようにする必要があります。複製するデータベースがなく、複雑なインストールも不要です。これにより、コントリビュータの摩擦が軽減され、ステージングおよびテストワークフローが簡素化されます。

最新のビルドツール

最新のビルドツールを活用します。それは現在、Babel、PostCSS、Webpackなどを意味します。

自動ビルド

JAMstackのマークアップはあらかじめ作成されているので、別のビルドを実行するまでコンテンツの変更は有効になりません。このプロセスを自動化することで、多くの不満が解消されます。 webhooksでこれを自分で行うことも、サービスを自動的に含む公的なプラットフォームを使用することもできます。

アトミック・デプロイ

JAMstackプロジェクトが大きくなるにつれて、新しい変更には何百ものファイルを再配置する必要があります。これらのファイルを一度にアップロードすると、プロセスが完了している間に矛盾した状態が発生する可能性があります。これを回避するには、変更されたファイルがすべてアップロードされるまで変更が反映されない「アトミックデプロイ」を行うシステムが必要です。

インスタントキャッシュの無効化

ビルドからデプロイのサイクルが定期的になると、 CDNがインスタントキャッシュパージを処理できることを確認してください。

JAMStackを実現するサービス

そして、私たちが次に考えるべきことは、実際にJAMStackを構成できるサービスを知ることです。現在では様々な優良サービスが出ているので一部紹介しておきます。

ホスティングサービス

Netlify

www.netlify.com

今話題の静的ホスティングサービスです。静的なサイトを自動ビルド、自動ホスティングすることができます。しかも、SLL化も簡単にできるのでセキュアなアプリを提供することができます。

Now

https://zeit.co/

こちらも静的サイトホスティングサービスです。作っているのはReactjsのSSRフレームワークであるNext.jsを作ってるzeitという会社です。特に注目なのが、CLIツールのコマンド一つでデプロイできることにあります。

Firebase

firebase.google.com

Firebaseは、Googleが運営しているmBaaSで、iOS/AndroidアプリからWebサービスまで幅広く使えます。

ヘッドレスCMS

microCMS

microcms.io

日本製のヘッドレスCMSです。今までヘッドレスCMSは海外製のcontentfulを使っていましたが、やっと日本製のヘッドレスCMSが誕生しました。これで日本のフロントエンドエンジニアは案件の幅が広がりそうです。

contentful

www.contentful.com

contentfulは、APIベースのCMS(コンテンツ管理システム)です。wordpressとは違い、管理画面とapiの提供のみです。

storyblock

www.storyblok.com

こちらも海外製のヘッドレスCMSです。contentfulと類似したサービスです。

最後に

JAMStackアーキテクチャーについて調べてみました。最近のReactjsやvuejsの影響により、だんだん企業でもJAMstackな構成を採用してるところが増えてきてます。これからのWEBの動向がさらに気になるところです。

参考

https://jamstack.org/