こんにちは！

最近弊社の勉強会でJamstackを取り扱ったのでざっくりとまとめてみます！

Jamstackとは

Javascript/API/Markup で構成されたシステムです

特徴

• 静的サイトである
• WEBサーバーの管理が不要
• 静的サイトのビルド時にAPIから最新のデータを取得、htmlに反映

Jamstack構成が向いているサイト

• コーポレートサイト
• メディアページ

基本的に全閲覧者に同一の情報を公開するようなサイトに向いています

Jamstack構成のサイト作成に必要なもの

• ヘッドレスCMS

-必要なデータを登録し、APIとして公開するためのサービスです

• 静的サイトジェネレーター

　　　-静的サイトを生成するためのライブラリです

• ホスティングサービス

-作成した静的サイトを公開するためのサービスです

勉強会では実際に以下の構成でサイトを作成しました！

ヘッドレスCMS

microCMS（https://microcms.io/）

静的サイトジェネレーター

Nuxt.js（Vue.jsのフレームワーク）

ホスティングサービス

AWS Amplify（https://aws.amazon.com/jp/amplify/）

サイト公開までの下準備

• Nuxt.jsでプロジェクトを作成し、git（今回はAWS CodeCommitを使用）に紐付け
• AWS Amplifyでビルドの設定とWebHookURLの発行
• microCMSでデータ公開のためのAPI設定とWebHookURLの紐付け

基本的なサイト運用の流れ

1. microCMSでデータを登録し、公開
2. AWS AmplifyがWebHookの通知を受け取り、自動的にビルド&デプロイ
3. 最新のデータが反映されたhtmlが公開

microCMSとAWS Amplifyの設定は割愛しますが、どちらも基本的に管理画面でボタンを押して設定するだけなのでかなり簡単です！

Jamstackについての感想

サービス構成上向き不向きがありますが、静的サイトであればWEBサーバーの管理を考えずにサイト作成ができるのは非常に楽だと思いました

ホスティングサービス側で自動的にCDN配信まで行ってくれるのは、正直驚きました。。

余談ですがNuxt.js（Vue.js）とNext.js（React.js）の違いを調べたあとにTypeScriptについて興味が出てきたのでこちらも触っていきたいと思います！

それではまた！