ポートフォリオ(仮)を作ってみたい

JAMSTACKでサイトを作ってみてぇよぉ…と思ったので作ってみました

JAMSTACKとは


そもそもJAMSTACKとはなにか、といいますと…
J（JavaScript）でA（api）を叩いて、M（markup）を配信するものらしいです。
パフォーマンスとセキュリティが高いのが特徴らしい…


もう少し詳しく行くと、JAMSTACKでは静的コンテンツの配信しかしません。


例えばPHPでデータを取得してレンダリングするようなよくあるwebアプリでは、



という流れになります。このとき、クライアントがhttpレスポンスを受け取るまでに、サーバがデータベースにアクセスするという処理が挟まります。


次にサーバレスの場合です。



この場合、クライアントはすぐにhtmlなどのファイルを受け取ることはできますが、データベースなどから引っ張ってくるデータは遅延して表示されることになります。
また、クライアントがデータを取得するため、クライアントの通信量が増えることもわかると思います。


最後にJAMSTACKです。



JAMSTACKではこうなります。データはどこで引っ張ってきてるんだよと思うかもしれませんが、そこがJAMSTACKのミソなのです。
JAMSTACKでは事前にデータをサーバが取得しておき、データを元に静的コンテンツを生成します。
データに変更があった場合、再度静的コンテンツの生成を行います。
このため、クライアントはサーバがレンダリングをすることを待つ必要がなく（すでにレンダリング済みのデータをサーバが持っているから）、
また、クライアントがデータを取得する必要もないのです。
マシンパワーにものを言わせた戦法とも言えますね。


JAMSTACKを構成する要素

というわけで、JAMSTACKの概要がわかったかもしれません。
次にJAMSTACKで必要なツールを上げていきます。

静的サイトジェネレータ
データの取得などを行い、静的コンテンツを生成します。JSフレームワークだとNuxt.jsとかNext.jsが有名ですね。

CMS
データの更新などを行い、更新に伴い静的サイトジェネレータで静的コンテンツを生成させます。
実際にはデータの更新をした際に、何らかのサービスに対し生成を命令するのが役割です。
CMSとしてはwordpressなどが有名どころですが、JAMSTACKではヘッドレスCMSを使用することが多いらしいです。
有名なヘッドレスCMSは、Contentfulだとか日本製だとMicroCMSとかがありますね。

サーバ
静的コンテンツを配信するためのサーバが必要です。
普通にapacheやらnginxを使ってもいいですが、JAMSTACK界隈ではfirebaseだとかNetlifyやらGithub Pagesを使うことが多いっぽいですね。


実際に作ってみた

ここからが本編です。
実際にJAMSTACKで作りますが、細かいコード類は書きません。

静的サイトジェネレータ
今回はNuxt.jsを使いました。使い慣れてるからね。
create-nuxt-appで作業ファイルを作成する際に、Render modeでUniversal(SSR / SSG)、
Deployment targetでStatic(Static/JAMStack)を選んでおきましょう。
ページの生成はnpm run generate で行います。

CMS
MicroCMSを使いました。Nuxtからfetchでデータを取得するだけです。uriにクエリをくっつけてデータを取得します。

サーバ
Netlifyを使用しました。というのもMicroCMSから簡単にweb hookで色々できるからですね。安直。
Netlifyへのデプロイは他のサイトで調べて貰えばいいですが、
Build commandはnpm run generate、
Publish directoryはdist/になります。
webhookの設定ですが、Site settings→Build & Deploy→Build hooksから、Add build hookで適当に名前をつけて保存します。
保存後にURLが表示されますので、MicroCMSのAPI設定からWebhookに追加してもらえれば、CMSの更新と同時にNetlifyがサイトをビルドしてくれます。

作ってみた感想とは言っても、サーバレスなサイトを作るのとほとんど同じ感覚で作成できます。
サービスの選択をしっかりして、APIのリファレンスを読めば困ることは特にないと思います。
　
暇があれば作ってみては～～～