jamstackについて学習する為のサンプルアプリケーションです。 jamstackを知るためには、ここ最近のフロントエンドの仕組みを知っておく必要があります。 ここでは、HeadlessCMS や SSG の仕組みについて抑えた上で、 jamstackと呼ばれる構成とその仕組について学習します。

JamstackのJamはJavaScript/APIs/Markupの頭文字です。JavaScriptでAPIをたたいてMarkupを配信することを意味しています。

通常のWebアプリケーションは、ユーザがアクセスした際にサーバーがデータベースを参照することで最新のコンテンツを表示することが出来ます。

JamStackは、従来の概念とは異なり、コンテンツが更新されたタイミングで、予め静的なページを生成しておき、ユーザはこれを参照する形となります。

• PV増加（速度UP・SEO効果）
• 運用コスト減少（管理画面が不要、APサーバー不要）
• 安全性の向上（APサーバーが動作していないので攻撃ポイントが少ない）

• リアルタイム性が低い（ページの生成に時間がかかる）
• データの整合性が必要なものには不向き

• HeadressCMS
• SSG

HeadlessCMSは「プレビュー機能のない、コンテンツ管理に特化したCMS」です。 Contentful、Micro CMS、GraphCMS、Strapi などのサービスを利用することで、バックエンドを用意する必要がなくなり、フロントエンドの開発に注力できます。

SSGは、Static Site Generatorの略称で、静的サイト生成をする仕組みになります。 アプリのビルド時にAPIからデータを取得して、HTMLファイルをファイルを生成します。 ユーザからリクエストがあると、事前に生成しておいたHTMLファイルを返却することでコンテンツを表示します。

• Nuxt.js
• Typescript
• Tailwind CSS
• Github Actions
• Github Pages
• MicroCMS

https://isystk.github.io/nuxtjs-jamstack-sample/

MicroCMS

Micro CMS でコンテンツが更新された際に、WebHookを利用して、Github Action を実行させることで、最新のコンテンツが反映されるようにしています。

# MicroCMSのKeyとURLを設定する
$ cp .env.example .env
$ vi .env
# モジュールをインストールする
$ yarn
# アプリを起動する
$ yarn dev

$ yarn generate
$ yarn start

[MIT](https://github.com/isystk/nuxtjs-jamstack-sample /blob/master/LICENSE)

isystk