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/
Micro CMS でコンテンツが更新された際に、WebHookを利用して、Github Action を実行させることで、最新のコンテンツが反映されるようにしています。
# MicroCMSのKeyとURLを設定する
$ cp .env.example .env
$ vi .env
# モジュールをインストールする
$ yarn
# アプリを起動する
$ yarn dev
$ yarn generate
$ yarn start
プロジェクト | 概要 |
---|---|
Nuxt3 Docs | Nuxt3 Docs |
Vuetify 3 Beta | Vuetify 3 Beta |
Material Design Icons | Material Design Icons |
Tailwind CSS | Tailwind CSS |
vee-validate | vee-validate |
husky v6 のインストール方法と使い方。lint-staged も導入して、品質を保とう | husky v6 のインストール方法と使い方。lint-staged も導入して、品質を保とう |
microCMS + NuxtでJamstackブログを作ってみよう | microCMS + NuxtでJamstackブログを作ってみよう |
Nuxt.js + microCMS + Firebase + GitHub Actions で JAMstack なブログに移行した | Nuxt.js + microCMS + Firebase + GitHub Actions で JAMstack なブログに移行した |
Nuxt3のSSGなサイトをGitHub Pagesで公開するだけなのにハマった | Nuxt3のSSGなサイトをGitHub Pagesで公開するだけなのにハマった |
[MIT](https://github.com/isystk/nuxtjs-jamstack-sample /blob/master/LICENSE)