CDNとは？配信の仕組みとキャッシュ・オリジンの違い

漫画：本館まで、行かなくていい？ 全4ページ

ユイは青い紙飛行機の画像を受け取る模型で、毎回本館まで取りに行くと思っている。マコトと元と控えを比べ、近くの配信拠点から返せる場面を追う。最後にユイは複数の拠点全体へCDNの札を添え、元が残ることも確かめる。

先に本文の解説を読む ↓

画像を押すと拡大できます。＋／−で大きさを変え、拡大中はドラッグして読めます。

1 / 4毎回、本館まで？

同じラボの床に作ったCDNの模型。ユイとマコトは本館と二つの分室、青い紙飛行機の画像カードを見る。

1ページ目のセリフ

• ユイ「毎回、本館まで？」

2 / 4元と控えがある

上段でオリジンの元とエッジの控えを比べ、中段で拠点から返す道、下段で模型の全体を見る。端末の外側は無地。

2ページ目のセリフ

• 模型の役割「オリジン」・「元」
• 模型の役割「エッジ」・「控え」

3 / 4近い拠点の控えから返す

模型の一つのエッジを大きく見て、利用できる控えを端末の画面へ返す道を追う。元一つと拠点二つの数は変わらない。

3ページ目のセリフ

• 模型の役割「エッジ」→「端末」
• 控えの役割「キャッシュ」

4 / 4本館も、拠点も使う仕組み

本館の元は残り、二つの配信拠点がそれぞれつながる。ユイは複数拠点全体へCDNの札を添える。

4ページ目のセリフ

• 模型全体の札「CDN」
• ユイ「元も、残っているんですね。」

横にスワイプして次のページへ。画像を押すと拡大できます。

本館と分室、床の道は配信の役割を分ける模型です。近い拠点は地図上の直線距離が最短の場所とは限らず、ネットワークの経路や負荷、設定も関係します。描くのは利用可能なキャッシュがある例で、ない場合や再確認が必要な場合は動きが異なります。CDNなら必ず速い、必ず最新、すべてを共有キャッシュできるとは示していません。

本文の解説へ ↓

閉じる ×

← 前

−

100%

＋元の大きさ

次 →

拡大中はマウスや指でドラッグできます。100%では左右スワイプ・左右キーでページ送り。

本館と分室を訪ねよう

ユイ

ポート番号のドアを抜けたら、CDN分室が見えました

イト

本館じゃなくて近くの分室から画像が届くことがあるの？

ピコ

あるよ。CDNは、コンテンツを近い配信拠点から届けやすくする仕組みなんだ

毎回オリジンサーバーまで取りに行くのではなく、近くの配信拠点にあるキャッシュから返せる場合があります。そのため、表示が速くなったり、元のサーバーへの負荷が減ったりすることがあります。

第57話では、サーバー図書館の外にあるCDN分室を訪ねます。たとえでは本館と分室ですが、実際の画面のむこう側では、DNS、エッジサーバー、キャッシュ、オリジンサーバーが組み合わさります。

CDNの役割を先にいうと

CDNは、Content Delivery Networkの略です。

近い拠点の役割は エッジサーバーとは、本館側は オリジンサーバーとは と分けると整理しやすくなります。

コンテンツを一つの本館だけに置くのではなく、複数の配信拠点に置き、利用者に近い場所から返しやすくします。ここでいうコンテンツには、画像、CSS、JavaScript、フォント、動画の一部などが含まれます。

ラボのたとえでは、オリジンサーバーが本館、CDNの配信拠点が分室です。本館にある材料のコピーを分室にも置いておけば、近くの利用者は分室から受け取れる場合があります。

CDN・オリジン・キャッシュ・パージの役割

CDNは配信拠点を分けて届ける仕組み、キャッシュは内容を保存して再利用する仕組みです。キャッシュはブラウザの中でも使うため、CDNだけの別名ではありません。

CDNでは、いくつかの言葉が一緒に出てきます。

利用者が画像を開いたとき、近くのエッジサーバーにその画像のキャッシュがあれば、そこから返せます。なければ、オリジンサーバーへ取りに行き、その後エッジサーバーに控えを置く場合があります。

マコト

CDNは本館をなくす仕組みではなく、近くの分室も使う仕組みなんだね

ユイ

どこに元があり、どこに控えがあるかを分けると見えやすいです

CDNで速さを助ける流れ

CDNが速さを助ける理由は、一つだけではありません。

• 利用者に近い配信拠点から返せる場合がある
• オリジンサーバーまで取りに行く回数を減らせる
• 画像や動画など大きなファイルの配信を分散できる
• アクセス集中時に元のサーバーの負担を減らせる
• 海外や遠い地域からのアクセスを安定させやすい

ただし、CDNを使えばいつでも速くなるという意味ではありません。画像が大きすぎる、JavaScriptが重い、HTML生成に時間がかかる、キャッシュ設定が合っていない、利用者の回線が遅いなど、ほかの要因も関係します。

CDNは表示速度を助ける部品の一つです。Webページ全体を見るときは、サーバー、CDN、ブラウザキャッシュ、レンダリング、JavaScriptの処理を分けて確認します。

よくある誤解：CDNなら必ず速く、必ず最新になる？

いいえ。CDNは配信を助ける仕組みですが、入れるだけですべてが速くなるわけではありません。

ここでいう「近い」は、地図上でいちばん近い建物とは限りません。ネットワーク上の場所や混み具合、CDNの設定などを見て、届ける拠点が選ばれます。また、近い拠点にキャッシュがなければ、オリジンサーバーへ取りに行くこともあります。

更新した内容がすぐ見えるかどうかも、キャッシュの保存期間や再確認の設定によって変わります。CDNを使っているから大丈夫、と一つに決めず、速さは配信経路、古い表示はキャッシュの場所に分けて調べるのが近道です。

CDNのキャッシュが古いときの更新とパージ

CDNで大切になるのがキャッシュです。

エッジサーバーが画像やCSSのキャッシュを持っていれば、同じデータを毎回オリジンサーバーへ取りに行かずに済むことがあります。一方で、古いキャッシュが残ると、更新したはずの画像やCSSがすぐ変わらない場合があります。

確認するときは、次を分けます。

1. 自分のブラウザキャッシュが古くないか
2. CDNのエッジサーバーに古いキャッシュが残っていないか
3. オリジンサーバー側のファイルが更新されているか
4. ファイル名やURLが変わっているか
5. キャッシュの保存期間が長すぎないか
6. CDNのパージ操作が必要か

「自分だけ古い」のか、「別の端末や別の地域でも古い」のかで見る場所が変わります。CDNは便利ですが、近くの控えをいつ新しくするかもセットで考えます。

公開画像の控えと、ログインした人だけの画面は、同じ条件で共有できません。何を保存し、誰の要求へ再利用してよいかを、サイトの指定やCDNの設定で分けます。「CDNを使う＝すべてを公開コピーする」ではありません。また、近い配信拠点とは、必ずしも地図上の直線距離が最短の拠点を指すとは限りません。

CDNが使われる場面

CDNは、同じコンテンツを多くの人に届ける場面でよく使われます。

• 画像が多いWebサイト
• CSSやJavaScriptを配信するサイト
• 動画や音声を配信するサービス
• 海外からもアクセスされるサイト
• アクセスが急に増えるキャンペーンページ
• アプリで静的ファイルを安定して配りたい場合

動画配信では、動画を小さなかたまりに分け、利用者に近い配信拠点から届ける考え方が重要になります。Webサイトでも、画像やフォントなど同じ材料を多くの人に届けるときにCDNが助けになります。

運用で確認するポイント

サイト運用でCDNを使うときは、「CDNを入れたかどうか」だけでなく、設定と確認先を見る必要があります。

確認したいポイントは、次のとおりです。

• どのURLやファイルをCDNで配信しているか
• キャッシュしてよい内容か
• 個人情報やログイン後の内容を誤ってキャッシュしていないか
• キャッシュの保存時間は合っているか
• 更新時にパージやファイル名変更が必要か
• 障害時にオリジンサーバーへ戻れるか

CDNは、速さだけでなく運用にも関わります。実際のサービスでは、CDN事業者、CMS、ホスティング、アプリの設定が組み合わさるため、どこで設定しているかをメモしておくと確認しやすくなります。

画像の元と控えを見分けてみる

画像が多いページを一つ思い浮かべて、次の三つを分けてみてください。

1. 元の画像を持つ本館はどこか
2. 近くの分室にキャッシュがありそうか
3. 更新した画像が古く見える場合、どこの控えを見るか

ミニクイズ：本館と控えの役割を確かめる

Q1. CDNを一文でいうと？

CDNは、コンテンツを複数の配信拠点に置き、利用者に近い場所から届けやすくする仕組みです。

Q2. オリジンサーバーとエッジサーバーの違いは？

オリジンサーバーは元のコンテンツを持つ本館、エッジサーバーは利用者に近い配信分室として返すサーバーです。

Q3. CDNを使うと古い表示が残ることはありますか？

あります。エッジサーバーやブラウザなどに古いキャッシュが残っていると、更新前の内容が表示されることがあります。