🌙 nuxtjs-jamstack-sample
📗 プロジェクトの概要
jamstackについて学習する為のサンプルアプリケーションです。 jamstackを知るためには、ここ最近のフロントエンドの仕組みを知っておく必要があります。 ここでは、HeadlessCMS や SSG の仕組みについて抑えた上で、 jamstackと呼ばれる構成とその仕組について学習します。
Jamstackとは
JamstackのJamはJavaScript/APIs/Markupの頭文字です。JavaScriptでAPIをたたいてMarkupを配信することを意味しています。
通常のWebアプリケーションは、ユーザがアクセスした際にサーバーがデータベースを参照することで最新のコンテンツを表示することが出来ます。
JamStackは、従来の概念とは異なり、コンテンツが更新されたタイミングで、予め静的なページを生成しておき、ユーザはこれを参照する形となります。
JamStack のメリット
- PV増加（速度UP・SEO効果）
- 運用コスト減少（管理画面が不要、APサーバー不要）
- 安全性の向上（APサーバーが動作していないので攻撃ポイントが少ない）
JamStack のデメリット
- リアルタイム性が低い（ページの生成に時間がかかる）
- データの整合性が必要なものには不向き
JamStack の実現に必要な技術
- HeadressCMS
- SSG
HeadressCMS とは？
HeadlessCMSは「プレビュー機能のない、コンテンツ管理に特化したCMS」です。 Contentful、Micro CMS、GraphCMS、Strapi などのサービスを利用することで、バックエンドを用意する必要がなくなり、フロントエンドの開発に注力できます。
SSGとは？
SSGは、Static Site Generatorの略称で、静的サイト生成をする仕組みになります。 アプリのビルド時にAPIからデータを取得して、HTMLファイルをファイルを生成します。 ユーザからリクエストがあると、事前に生成しておいたHTMLファイルを返却することでコンテンツを表示します。
利用している技術
- Nuxt.js
- Typescript
- Tailwind CSS
- Github Actions
- Github Pages
- MicroCMS
🌐 Demo
https://isystk.github.io/nuxtjs-jamstack-sample/
🖊️ 記事の投稿
Micro CMS でコンテンツが更新された際に、WebHookを利用して、Github Action を実行させることで、最新のコンテンツが反映されるようにしています。
🔧 開発環境の構築
# MicroCMSのKeyとURLを設定する
$ cp .env.example .env
$ vi .env
# モジュールをインストールする
$ yarn
# アプリを起動する
$ yarn dev
📦 SSGの動作確認
$ 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で公開するだけなのにハマった |
🎫 Licence
[MIT](https://github.com/isystk/nuxtjs-jamstack-sample /blob/master/LICENSE)