Zenn
📚

Jamstackってなんだろう？ Cloudflare Pagesにホスティングしてみた !

2021/03/05に公開
Gatsby.js
Netlify
Contentful
Jamstack
Cloudflare Pages
tech

Jamstack

  • Jamstackとは、事前にデータを埋め込んだ静的なHTMLに、JavaScriptを利用し、APIより動的なコンテンツを取得するWebアプリ・Webサイトのアーキテクチャです。
  • ちなみに、JamstackのJamはJavaScript, API, Markupの頭文字を取ったものです。
  • なぜ、それらの頭文字から取ったのかというと、それぞれの役割にあります。

[役割を考えると?]

  • JavaScript, API => 動的なコンテンツを扱う
    JavaScriptなら、Request, Responseの動的プログラムの制御を行うし、APIなら、サーバーサイドの処理やデータベースへのRequestを行います。

  • Markup => 静的コンテンツを扱う
    デプロイ時にビルドされるテンプレート化されたMarkupです。

つまり、あらかじめAPIからデータを取得して、表示するページの内容を静的なHTMLとして書き出しておくことで迅速にレスポンスを返すことができます。

メリット/デメリット

メリット

セキュリティ

  • サーバー側のプロセスがAPIに集約されるので、攻撃対象が減ります。
  • ページとアセットを事前に生成されたファイルとして提供するので、読み取り専用のホスティングが可能になります。

規模

  • 人気のあるサイトは、人気のあるページ, リソースをキャッシュするロジックを追加することで、大量のトラフィック負荷に対処します。 => CDN
  • Jamstackはデフォルトでこれを提供します。

パフォーマンス

  • Jamstackのサイトでは、ビルド中に事前にページを生成するので、要求時にサーバー上でページを生成する必要がなくなります。

保守性

  • ホスティングの複雑さが軽減されるので、メンテナンスにかかる負荷が減ります。

スケーラビリティ

  • Jamstackのサイトは、事前に生成されています。
  • つまり、さまざまなホスティングサービスに簡単にホストできます。

デメリット

ユーザーロールの切り替えができない

  • JAMstackサイトはユーザー管理ができないようです。
  • 書き込み権限設定（パーミッション設定）ができないようです。

buildに時間がかかる

  • 静的サイトジェネレーターは変更が一部分だけでもウェブサイト全部のページ生成を毎回行うためbuildに時間がかかります。

インタラクティブにできない

  • ユーザーに応じてコンテンツを表示したり、コンテンツの変化が激しくなる場合、こちらもビルドの負荷が高まるため向いていません。

Jamstackではないもの

  • WordPressなどのサーバーサイドで動くCMSにより管理及び公開されているWebサイト
  • PHPなどによりサーバーサイドでHTMLが作られ、公開されるようなWebサイト
  • Ruby on RailsによりサーバーサイドでHTMLが作られるWebアプリ
  • SSRされるSPA

=> つまり、サーバーサイドでHTMLが作られるようなWebサイト, WebアプリはJamstackではない

これまでのWebとの比較

SPAなど

Jamstack

  1. 事前にHTMLを生成する時にAPIから情報を取得して埋め込みビルド、デプロイを行います。

  2. Jamstackは静的なコンテンツを配信するだけなので、これで済みます。

Jamstackを構成するための技術スタック

静的サイトジェネレータ

  • コンテンツデータとテンプレートからサイトを生成するためのものです。
  • 有名どころだと、Gatsbyが挙げられます。

静的サイトジェネレータのリスト

CMS

  • コンテンツの管理を行うシステムです。
  • APIを通してデータの入出力を行います。
  • 有名どころだと、netlifycmsが挙げられます。

ホスティング

  • ビルド、静的コンテンツをCDN上にデプロイする環境です。
  • 有名どころだと、netlifyが挙げられます。

Cloudflare Pages

  • 昨日、クラメソさんでJamstackのホスティングの記事が出ていて僕的に気になったので、試してみようと思います。
  • それがCloudflare Pagesというものです。
  • CDNやセキュリティのSaaSで有名なCloudflareが提供する静的サイトのホスティングサービスだそうです。

Deployしてみた

  1. あらかじめGatsbyで作成したものをGitHubにpushしておく。

  2. cloudflareの公式ページの右上にある(Sign up)を押し、アカウントを作成します。

  3. ログイン後に右端にある、Pagesをクリックします。

  4. Githubとの接続認証画面があるので、その設定を行い、Deployするためのソースが格納されているリポジトリを選択します。

  5. Freamework presetを選択する画面があるので、Gatsbyを選択し、(Save and Deploy)を押しましょう！

  6. 無事、Deployが完了しました。

  7. Deployしたページを見てみましょう！ かなり簡単にDeployできましたね！

参考文献

Discussion