🐝

Webサイトがブンブン🐝速くなるCDNの基礎知識

2023/04/11に公開2

はじめに

普段何気なく使っているCDNですが、どんな仕組みで、CDNを使うと具体的に何が嬉しいか、どんなことに気をつけるべきかなど自分の中であいまいののままだったので整理整頓してみることにしました。

そもそもCDNとは??

CDNとは、コンテンツデリバリーネットワークの略で、大容量のデジタルコンテンツをインターネット上で大量配信するためのネットワークのことです。

引用:
https://www.idcf.jp/words/cdn.html

CDNとは、Content Delivery Networkの略称で、画像や動画などといった様々なリソース(データ)を世界中の複数のサーバー(キャッシュサーバーまたはエッジサーバーと呼ばれることが多い)にコンテンツを分散させることで、ユーザーがアクセスした際に最も近いサーバーからコンテンツを取得できるようにするといういわゆる分散型のネットワークシステムのことです。

エンドユーザーから最も近いサーバからコンテンツを取得できるため、リソースの配信をスピードアップすることができます。

CDNの構成要素

CDNの仕組みを知る上で、必ず事前に以下の三つの構成要素を押さえておく必要があります。

  1. CNAME(DNS)
  2. オリジンサーバ
  3. キャッシュサーバ

CNAME

CDNのように自分のサーバではないところにデータを置いて自分のサイトと同じURLからデータを配信するには、DNSの仕組みについて知っておく必要があります。

DNSにはレコードと呼ばれる概念があります。
DNSレコードとは、ドメイン名に関連付けられたIPアドレスや、ドメインに対するリクエストを処理する方法など、ドメインに関する情報の提供を指示するものです。
このDNSレコードは9種類あり、AレコードやMXレコード、SOAレコードなどがあります。
そして、そのうちの一つがこのCNAMEレコードです。

CNAMEレコードとは、Canonical NAMEの略称で、あるドメインまたはサブドメインを別のドメインに転送するものです。
例えば、example.comのCNAMEをtest_page.jpに設定するとexample.com へアクセスしたユーザは example.com のURL表示のまま、test_page.jpへアクセスすることができます。

なんとなくURLのリダイレクトをイメージされるかもしれませんが、リダイレクトと大きく異なるポイントは、リクエストしたURLのまま別のサイトの内容を表示できるところです。

このCNAMEを利用すると、URLは自サイトのまま、別のサーバからデータを取得・配信することができます。

オリジンサーバとキャッシュサーバ

CDNにおいてオリジンサーバとは「元のデータを保持しているサーバ」を指します。
そして反対に、オリジンサーバの代わりにデータを配信してくれるのがキャッシュサーバ(厳密には異なりますが、役割が重複するという意味合いでエッジサーバと呼ぶケースもあります)です。

キャッシュサーバとエッジサーバの違い

【キャッシュサーバ】
キャッシュサーバは、主にDNSリゾルバやコンテンツ配信ネットワーク(CDN)内で使用されるサーバです。

キャッシュサーバの主な目的は、過去にアクセスされたデータやコンテンツ(DNSの問い合わせ結果やウェブページ、画像、動画など)を一時的に保存(キャッシュ)し、次回そのデータにアクセスする際に高速に応答できるようにすることです。キャッシュサーバを使用することで、オリジンサーバへの負荷を軽減し、ユーザーがデータに迅速にアクセスできるようになります。

【エッジサーバ】
エッジサーバは、インターネットの「エッジ」、つまりユーザーに近い場所に配置されるサーバです。

エッジサーバは、キャッシュサーバやアプリケーションサーバの役割を兼ねることが多く、コンテンツ配信ネットワーク(CDN)やエッジコンピューティングの一部として機能します。
エッジサーバの主な目的は、ユーザーに近い場所でコンテンツやサービスを提供することで、遅延を減らし、パフォーマンスを向上させることです。

キャッシュサーバがキャッシュする仕組み

キャッシュサーバというのは先述したとおり、あくまで「オリジンサーバの代わりにエンドユーザーにデータをお届けするサーバ」でしかないので、一番最初は中身が空っぽになっています。なので初回はオリジンサーバにデータヘアクセスしてデータを取得する必要があります。

初回にオリジンサーバからデータを取得したあと、2回目以降のアクセスはキャッシュサーバから直接配信され、オリジンサーバへのアクセスは発生しなくなります。

CDNにおいては、このキャッシュサーバがデータを保持している状態こそが、いわゆる「キャッシュしてる」状態ということです。

キャッシュ時間について

CDNにはキャッシュ時間というものがあります。
これはデータ(リソース)ごとにキャッシュを有効にできる時間のことです。

例えば、オリジンサーバ上に存在するデータに対して、60秒というキャッシュ時間を設定したとします。
そうするとキャッシュサーバがオリジンサーバからデータを取得してから60秒間の間は、エンドユーザーに対してキャッシュサーバからデータを配信します。その間にオリジンサーバにアクセスすることはありません。
(※ただしキャッシュクリアになったり、キャッシュサーバでデータがヒットしないケースなどを除く)

そして61秒後以降にアクセスがあった場合はオリジンサーバからデータの取得を試みます。

このキャッシュ時間で最も注意しなければならないのは、キャッシュ時間中はファイルの更新が反映されないということです。

例えばキャッシュ時間が3600秒に設定されていた場合、何もしなければアップロードしてキャッシュされてから1時間は修正しても反映されない時間ができてしまいます。

キャッシュ対象ファイルの選定

CDNにおいてキャッシュ時間と同じくらいキャッシュ対象ファイルの選定が重要になります。
基本的なWebサイトでのCDNキャッシュの使われ方としては、以下の二つが挙げられます。

  1. 一部のファイル(画像や動画などの静的アセット)をサブドメイン配下に置いて、そのサブドメイン配下全体をキャッシュするやり方
  2. サイトのURLを丸ごとCDN経由にしてしまい、ファイル単位でキャッシュする/しないを決めるやり方

1の場合は主に画像や動画など、データ量の多いファイルだけをキャッシュする場合に用いたりします。
ファイル転送量自体は削減できますが、根本的なサーバへの負荷を完全に解決することはできません。

2の場合は理論的には全てのファイルをキャッシュできますが、適切にキャッシュ対象ファイルを選定しないとキャッシュ事故が起きてしまいます。

キャッシュ事故

キャッシュ事故とは、マイページなどの動的なデータを取り扱うページなどをキャッシュしてしまった際に起こりえます。

例えばとあるサイトのログイン情報を変更するためにマイページにアクセスしたAさんがいたとします。
このサイトではマイページがキャッシュされる設定になっています。
AさんがマイページにアクセスするとAさんのマイページのHTMLがキャッシュされてしまいます。

ただしAさん自身は自分の正しい情報が見えているだけなので、気がつきません。

次に同サイトでマイページにアクセスしたBさんがいたとします。
キャッシュが設定されたマイページは、Aさんのログイン情報が表示されてしまいます。

以上のことからCDNを利用する際には、どのページ(データ)をキャッシュして、どのページ(データ)をキャッシュしないかを慎重に検討する必要があります。

まとめ

CDNのエッジを活用した技術が最近はどうやら熱いらしいので、CDNの基礎知識があいまいだとキャッチアップがなかなか辛くなるんじゃないかなと勝手に想像しています。
ぜひご参考にしてください

参考情報

https://yusukebe.com/posts/2021/functions-at-edge/
https://www.idcf.jp/words/cdn.html
https://www.cloudflare.com/ja-jp/learning/dns/dns-records/
https://knowledge.sakura.ad.jp/19191/
https://pr.cdnetworks.co.jp/blog-use-cdn-for-edge-computing/

Discussion

SpelldataSpelldata

このキャッシュ時間で最も注意しなければならないのは、キャッシュ時間中はファイルの更新が反映されないということです。

Cache-Control: no-cacheを設定することで、CDNからキャッシュを返す前に、確認が行われます。
https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Cache-Control

実務上は、この設定を使うことが結構あります。

msy.msy.

知識が抜けてました🙇‍♂️
勉強になります!ありがとうございます!