×

JamstackとCDNの関係とは?基本からわかりやすく解説

2022/05/06

近年注目されているWeb技術にJamstackCDNがあります。どちらもWebを高速化する技術ですが、これらは組み合わせて使えばさまざまなメリットがあります。本記事ではJamstackCDNの関係について解説します。

 

JamstackCDNの関係とは?

JamstackCDNとは何なのか、それぞれを一言で言い表すと以下のようになります。

・Jamstack = サーバーサイドで毎回HTMLを作らず、事前に生成した静的HTMLをCDNのエッジサーバーから配信するだけにする仕組み

・CDN=世界中にエッジサーバーを配置し、ユーザーの近隣のエッジサーバーからコンテンツを配信する仕組み

どちらもWebサイトの表示スピードの高速化を第一の目的にしています。CDNJamstack以外でも使われる技術ですが、Jamstackは基本的にはCDNでの配信を前提とした構成です。

従来のCMSではサーバーでHTMLを生成するのに対して、Jamstackは静的サイトジェネレーター(SSG)によってHTMLがビルドされ、静的なコンテンツに変換されます。そして世界中に配置したCDNのエッジサーバーにデプロイされCDNを介して配信されます。

次のセクションで、JamstackCDNそれぞれについて仕組みを詳しく解説します。

 

Jamstackの仕組み

JamstackJamは、JaveScriptAPIMarkupの頭文字を取った略称です。この3つの頭文字である理由は、Jamstackは主にこの3つの技術で成り立っているからです。

Jamstackが静的なHTMLを事前にビルドし、配信するだけにする点は上で述べました。その仕組みは以下の通りです。

  • コンテンツを静的サイトジェネレーターによってビルドされる。
  • ビルド済みの静的Markup(HTML)は自動でCDNのエッジサーバーにデプロイされる。
  • ユーザーからのリクエスト受信時はビルド済みの静的Markup(HTML)をそのまま返す
  • 静的サイトジェネレーターはAPIを使って記事データの読み込みを行い、Markup(HTML)に埋め込む。
  • ・ JavaScriptなどを使った動的なレンダリングはクライアント側で行う

従来のCMSでは、サーバーでHTMLを生成するのに対して、Jamstackは、静的サイトジェネレーター(SSG)が静的HTMLに変換し、CDNを介して配信します。

 

CDNの仕組み

ではCDNはどのような仕組みなのでしょうか?CDNとはContent Delivery Network(コンテンツデリバリーネットワーク)の略称です。単一のサーバーではなく「ネットワーク」である点が重要なのです。

CDNは以下の仕組みで動きます。

  • 世界中に複数のエッジサーバーが配置され、ネットワークを形成している
  • オリジンサーバーにアップロードされたコンテンツは自動的にエッジサーバーにコピーされる。
  • ユーザーがアクセスすると近隣のエッジサーバーからコンテンツが配信される。

このようにコンテンツの配信元を世界中に分散すれば、負荷がオリジンサーバーに集中しなくなります。また、コンテンツが配信されるサーバーまでの距離も近くなります。したがって、高速なコンテンツ配信が可能になるのです。

これをJamstackによる静的サイト化と組み合わせれば、さらに高速なコンテンツ配信が可能です。

 

Jamstack導入にはCDNが必須なのか?

一般的にはJamstackとはCDNと一緒に使うのが前提の構成であり、必須と言っても良いです。なぜなら、多くのJamstack構成ではCDNに付属しているCI/CDというツールによって、静的サイトのビルド、テスト、デプロイまでを自動化するのが一般的だからです。

一方で、WordPressなどによるコンテンツ配信は、共用レンタルサーバーを使うのが一般的です。静的サイトジェネレーターでビルドしたコンテンツを共用レンタルサーバーにデプロイすることも技術的に可能ではあります。しかし、多くの静的サイトジェネレーターはCDNを前提に作られており、共用レンタルサーバーに対応している製品は少ないです。

CDNを使ったJamstack構成に比べて共用レンタルサーバーを使った構成に特にメリットがあるわけでもないので、特別の理由が無ければJamstackCDNの導入を前提に考えましょう。

 

JamstackのサイトをCDNで配信するメリット

JamstackのサイトをCDNで配信するのはさまざまなメリットがあります。

 

高速なパフォーマンス

最大のメリットはサイトの表示速度でしょう。WordPressなどのCMSで管理されているサイトはユーザーがアクセスするたびにデータベースへアクセスし、データを読み込んでHTMLを生成するので遅いのです。Jamstackならば、ユーザーには静的なコンテンツを配信するだけになるので高速に表示が可能となります。昨今のSEOなどではサイトの表示速度が重視される傾向があり、JamstackSEOにも有効と考えられます。

 

フロントエンドとバックエンドの分離

ここまで解説してきたように、Jamstack構成ではバックエンドでサイトをビルドして、フロントエンドでは静的サイトを配信するだけになります。これは、フロントエンドとバックエンドが分離されている状態になります。

これはセキュリティやメンテナンス性、拡張性の面においてメリットがあります。なぜなら悪意あるユーザーのフロントエンドからの侵入をブロックしやすく、フロントエンドを配信したままバックエンドのメンテナンスが行えるからです。

 

低い運用コスト

Jamstack構成では運用コストが安価になる傾向にあります。なぜなら静的サイトを配信するだけなので、アクセスのたびに複雑な処理をする高スペックのサーバーは必要無いからです。HTMLはすでに生成されているのでデータベースも必要ありません。そのためほとんどのCDNには無料プランがあります。無料といっても世界中に分散されているエッジサーバーなので、負荷がかかってもそう簡単にダウンしません。企業のオウンドメディアなどビジネス用途のコンテンツ配信でも無料で運用しているケースが多くあります。

 

まとめ

JamstackCDNは組み合わせて使う前提の技術です。お互いに相乗効果があり、高速で安全なコンテンツ配信が可能となります。まだWordPressなどCMSで管理されているWebサイトに比べて普及率は低いですが、SEOなどで高速なコンテンツ配信の需要が高まるにつれて普及してくるでしょう。今後のJamstackCDNの技術に要注目です。