JAMstackなブログ開設にチャレンジ

福岡から世界中の"むずかしい"を簡単にする株式会社[diffeasy](https://diffeasy.com)CTOの西[@_takeshi_24](https://twitter.com/_takeshi_24)です。

この記事はアドベントカレンダー「[diffeasyCTO西の24(にし)日連続投稿チャレンジ Advent Calendar 2019](https://qiita.com/advent-calendar/2019/diffeasy24)」の21日目の記事です。

この記事は「JAMstackなブログ開設にチャレンジ」シリーズとして、連載していきます。
JAMstackなブログ開発にチャレンジしたい方、是非Qiitaアカウントか[twitterをフォロー](https://twitter.com/_takeshi_24)していただき、ツッコミやいいね！お願いします！

## JAMstackって何？
まずJAMstackとは何か？
**J** : JavaScript
**A** : API
**M** : Markup
の頭文字をとったもので、その名の通り、JavaScriptとAPIとMarkupを組み合わせたWebアプリケーションアーキテクチャです。

こちらにJAMstackの定義が記載されています。
https://jamstack.org/

少し前のWebアプリケーション開発といえば、LAMPアーキテクチャがよく聞かれました。
LAMPとは
**L** : Linux
**A** : Apache
**M** : MySQL
**P** : PHP
の構成です。
ブログでは、今でも多く利用されているWordPressというCMSツールがまさにこの構成です。

JAMstackなアーキテクチャのCMSは「**ヘッドレスCMS**」と呼ばれています。
ヘッドとはビューの意味で、従来のLAMP構成のCMSだとビューも含めてコンテンツを管理していましたが、ヘッドレスCMSの場合は、その名の通り、ビューがなく、APIでコンテンツを管理します。


## JAMstackのメリット
JAMstackなサイトのメリットは主に以下のような点です。

- 静的サイトとして配信されるので、高速。
- 静的サイトとして配信されるので、安定的に稼働する。
- 静的サイトとして配信されるので、安価なサーバー費用。
- サーバーサイドがAPIとして提供されるため、攻撃範囲が限定的で、高いセキュリティ。
- ビューとAPIが分離しているので、柔軟なサイト構成が可能。

## JAMstackなブログの基本構成
JAMstackなブログを公開するためには以下の構成が必要になります。

### ヘッドレスCMS
何はともあれ、コンテンツを管理し、APIで提供するためのヘッドレスCMSが必要です。
よく利用されているのは[contentful](https://www.contentful.com/)というツールです。

他にもFirebase上でコンテンツを管理するためのヘッドレスCMS[Flamelink](https://flamelink.io/)などがあります。

### 静的サイトジェネレータ
WordPressでは基本的にコンテンツの情報をDBから取得して配信します。
それに対して、JAMstackなブログではブログサイトを静的コンテンツとして高速に配信します。
そのために静的コンテンツを生成するための静的サイトジェネレータが必要です。

静的サイトジェネレータも色々とありますが、有名どころでは、
React.js製の「[GatsbyJS](https://www.gatsbyjs.org/)」、Go製の「[HUGO](https://gohugo.io/)」、Vue.js製の「[VuePress](https://vuepress.vuejs.org/)」などがあります。
この辺は好みや使いやすさ、慣れている言語で良いと思います。

Vue.js製のフレームワーク[Nuxt.js](https://ja.nuxtjs.org/guide/)でも静的なサイトをジェネレートできますので、Nuxt.jsを利用したことがある方なら、こちらを利用する選択肢もあります。

### ホスティングサービス
静的サイトを配信するためのCDN、ホスティングサービスが必要です。
CDNは各社クラウドサービスのCDNの他、[Netlify](https://www.netlify.com/)、[FirebaseHosting](https://firebase.google.com/docs/hosting?hl=ja)などのホスティングサービスがあります。

## JAMstackなブログ運営
上記のツールがJAMstackなブログの基本構成になるのですが、ブログを日々運用して改善していくことを考える必要があります。
ソース管理ツールは当然必要ですが、CI / CDツールによって、コンテンツが更新された際に自動的に静的サイトをジェネレートし、継続的に配信を自動化していく仕組みが必要です。

### ソース管理ツール
ソース管理ツールも色々ありますが、基本は[GitHub](https://github.co.jp/)を利用するのが一般的です。
その他には[GitLab](https://about.gitlab.com/)や[BitBucket](https://bitbucket.org/)などがあります。

### CIツール
CIツールも色々あります。
[CircleCI](https://circleci.com/ja/)、[Jenkins](https://jenkins.io/)などが一般的です。


## 今回チャレンジする構成
今回JAMstackなブログ開設のためにチャレンジする構成は、以下の通りです。

- Nuxt.js : サイト制作、静的サイトジェネレーター
- Contentful : 記事投稿、ヘッドレスCMS
- Netlify : ビルドの実行。コンテンツ配信。
- GitHub : ソース管理。

<img width="1002" alt="スクリーンショット 2019-12-24 23.01.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3003/7ace634e-35ea-9477-5dc6-b37af99dd57a.png">


## 最後に
次回「[Nuxt.js / Contentful でJAMstackなブログ開発編](https://qiita.com/_takeshi_24/items/7d16dc5d0bc41f5e0779)」では、Contentfulで記事を投稿して、Nuxt.jsで表示するところまでを説明します。

続きはアドベントカレンダー「[diffeasyCTO西の24(にし)日連続投稿チャレンジ Advent Calendar 2019](https://qiita.com/advent-calendar/2019/diffeasy24)」に掲載していきます。

是非Qiitaアカウントか[twitterをフォロー](https://twitter.com/_takeshi_24)していただき、ツッコミやいいね！お願いします！

[#advent_24](https://twitter.com/hashtag/advent_24)のハッシュタグでフィードバックいただけると嬉しいです！