JAMstack

#システム設計 #静的サイトジェネレーター #CI/CD

https://d.org

JavaScript, API, Markup

https://project.nikkeibp.co.jp/idg/atcl/19/00110/070600002/?ST=idg-cio-management&P=2

静的サイトと動的サイトの良いところをとっている

バックエンドに依存しない。

JavascriptでAPIを呼び出す。

CI/CDでCDNにデプロイ

CMS

CMSの場合、ヘッドレスCMS

HTMLページの中で、JavaScriptを使ってCMSのAPIを呼び出し、CMSから返ってきたコンテンツを変換して表示

microcms jamstack blog

https://microcms.io/blog/what-is-jamstack/

すべてCDNに

セキュリティ

サーバー側のプロセスがマイクロサービスAPIに抽象化されることで、攻撃の表面積が減少

アトミックデプロイ

これを回避するには、すべての変更されたファイルがアップロードされるまで変更が反映されない「アトミックデプロイ」を実行できるシステムを使用

API

全てのサーバーサイドの処理やデータベースアクションは再利用可能なAPIとして抽象化されており、JavaScriptによるHTTPS経由でアクセス

フロントエンドはバックエンドに依存していない

https://scotch.io/tutorials/secure-and-scalable-an-introduction-to-jamstack

JAMstack does not dictate you switch to any particular technology. You can use any JavaScript library or technology that compiles to JavaScript (e.g. TypeScript, Elm, Clojure, or WebAssembly). JavaScript can fetch data or send updates to third-party APIs, your own API, Serverless functions, or any combination of APIs. For managing content, you can choose from a variety of static site generators, such as Hugo, GatsbyJS, Jekyll, Next.js, Nuxt.js, or VuePress, and write content using Markdown or any other markup system that renders as HTML.

特定の技術に依存するわけではない。

技術選定

#Amplify

パターン

https://blog.logrocket.com/building-a-jamstack-e-commerce-website/