新規開発で「Jamstack」アーキテクチャを取り入れて開発したので、その過程やメリットなどについてまとめておきます。
Jamstack構成にあたり以下のサービスを活用しています。
- 静的サイトジェネレータ：Nuxt.js
- ヘッドレスCMS：microCMS
- ホスティングサービス：Firebase Hosting
Jamstackとは
Jamstack(ジャムスタック)とはウェブサイトを実現するためのJAMの頭文字からなる技術の組み合わせです。JAMはそれぞれJavaScript・API・ Markupを表しています。
Jamstackは、サーバとフロントを疎結合にし、サーバが担っていた機能を外部化してフロントだけで扱いやすくする構成となっています。
公式サイト：https://jamstack.org/
Jamstackの特徴
- Webサイトの各ページのHTMLファイルは事前に静的サイトジェネレータで生成
- ブラウザからアクセス時にCDNから配信
- Webサーバに依存しないサーバレスな構成
Jamstackは以上のような特徴が挙げられます。
閲覧専用でユーザごとにコンテンツの出し分けがないようなWebサービスに最も適していると考えられます。パッと思いつくのは、ユーザ認証等がないWebメディアやコーポレートサイトで効果を発揮しそうです。
Jamstackで使われるサービス
このようなJamstack構成を実現させるために、以下のようなサービスが使われます。
- 静的サイトジェネレータ
- ヘッドレスCMS
- ホスティングサービス
Jamstackアーキテクチャの採用にあたり今回開発した新規サービスでは、静的サイトジェネレータはNuxt.js、ヘッドレスCMSはmicroCMS、ホスティングサービスはFirebase Hostingを採用しています。
ホスティングサービスは他にNetlifyが有名(そもそもNetlifyのCEOがJamstack提唱したっぽい)で、そちらはWebhookによるトリガが可能(Firebase Hostingではできないっぽい？)なので、ヘッドレスCMSから記事投稿時にWebhookによる通知をして、自動ビルドできます。
Firebase Hostingでは調べた限りでは、Webhookによるトリガができないようなので、新規サービスではGitプッシュ時とスケジューリングで1日1回自動ビルドするように運用しています。どうしてもその日に公開したい記事の場合は手動でビルド・デプロイといった感じです。
Jamstack導入のメリット
Jamstackには以下のようメリットがあります。
・高パフォーマンス
→nuxt generateによってデプロイ前にあらかじめ静的ページを生成することでCDN配信が可能となり、より高いパフォーマンスを実現できました。
・高セキュリティ
→コンテンツ等はあらかじめ静的ファイルとしてホスティングしているため、サーバ側のプロセスが必要最低限のAPIに集約され、脆弱性に対する攻撃対象の減少が期待できます。
・コスト削減
→主にコンテンツ配信の手段として利用するため、コストの削減が可能となります。
・SEO向上
→SSGによるページ遷移の高速化・サーバ側でレンダリングしたHTMLを読み込むことにより、SEO向上が期待できます。
また、コンテンツにおけるAPIレスポンスは、ビルドのタイミングで全部取得してホスティングしているため、安定的な稼働が可能となります。
逆に言えば、ビルド時にAPIがおかしかったらエラーがでるため、デプロイ前に気づくことができるのも良い点かと思います。
Jamstack採用において
今回の新規サービスでは、認証機能やユーザ登録・更新処理などが追加実装されたため、完全なJamstack構成というより、部分的Jamstack構成になりました。
もし、認証機能やユーザ登録・更新処理などがなくコンテンツのみの場合は以下のような構成になります。
これが静的ファイルのみで構成される一般的なJamstack構成になると思います。Firebase HostingからCDN配信で完結しているため、サイトの高速化・高セキュリティ・サーバレスとなります。
なんとかヘッドレスCMSからの記事投稿をトリガに自動ビルド・デプロイできれば理想型って感じですかね。
実際の新規サービスでは認証機能等あるので、以下のような構成になります。
- コンテンツはあらかじめビルドしてある静的ファイルをFirebase HostingからCDN配信
- 認証はFirebase Authenticationを利用
- ユーザ登録やユーザ情報更新等は別途APIからやり取り
コンテンツの表示スピードの高速化やSEO向上、ユーザ情報登録・更新や検索のみサーバを使っているのでコストの削減もでき、Jamstackの恩恵を十分に受けられていると感じています。
まとめ
実際にJamstackアーキテクチャで新規サービスを開発してみて、サイトスピードが高速化し安定的に稼働していていい感じです。
毎回ビルドするといった手間はありますが、CI/CDツールを取り入れればそんな手間ではなくなります。
静的化できるファイルが多くある場合は、Jamstackアーキテクチャを取り入れるのが良さそうですね。