CDNの仕組み｜動画や画像が近くから届くまで

画像が近くから届くまでの流れ

Webページの画像を例にすると、流れは次のようになります。

1. ブラウザが画像URLをリクエストする
2. DNSやCDNの制御により、近いエッジサーバーへ向かう
3. エッジサーバーがキャッシュを確認する
4. 控えがあれば、そのままブラウザへ返す
5. 控えがなければ、オリジンサーバーへ取りに行く
6. 取得したデータを返し、必要に応じてエッジ側に保存する

この流れで「近い場所から返す」と「同じデータを再利用する」が両方働きます。どちらか一つではなく、ネットワーク距離とキャッシュの組み合わせとして見ると理解しやすくなります。

オリジンとエッジを二本の矢印で描く

紙の中央にオリジンサーバー、手前にエッジサーバーを描き、「最初は元へ取りに行く／次から近くの控えを返す」と矢印を二本足してみてください。役割名を短く確認したいときは、CDNとは へ戻れます。

元のサーバーと近い配信拠点を描いたら、自分を近い拠点のそばに置いてください。距離を一つ短くできる理由が見えたら、配信の工夫をつかめています。

古いテレビの横で、CDNと書かれた本館と近くの分室を結ぶ貸出票が小さく光りました。マコトとユイとピコはラボの椅子を寄せ、サーバー図書館へ入る前に「まず何が知りたいのか」を確認します。

第57話「CDNはなぜ近くから届く？ 配信の分室を訪ねよう」では、本館と近い分室を行き来する貸出票から、この二つの役割を場面でたどれます。

先にCDNそのものの意味を確認したい場合は、CDNとは を横に置くと、エッジサーバーとオリジンの役割を分けやすくなります。

CDNの役割と仕組みの全体像

一度取得したデータは、設定された時間や条件に応じてエッジ側に保存されます。次に同じ画像や動画を求める利用者が来たとき、オリジンまで戻らずに返せる場合があります。

ユイ

画像を更新したのに古いままなら、オリジンと近い配信拠点のどちらを見るんですか？

マコト

まず元の画像、その次にCDNの控え、最後にブラウザの控えを分けよう。

ピコ

本館から分室へ貸出票を追えば、どの控えが残ったか見えるよ。

キャッシュヒットとキャッシュミス

CDNで重要なのが、キャッシュヒットとキャッシュミスです。

• キャッシュヒット: エッジサーバーに控えがあり、そこから返せる
• キャッシュミス: 控えがなく、オリジンへ取りに行く
• パージ: 古い控えを削除して取り直させる
• TTL: 控えをどれくらい有効にするかの時間

ラボのたとえでは、近くの配達拠点に箱があればすぐ渡せます。箱がなければ中央倉庫へ問い合わせます。実際にはHTTPヘッダーやCDN設定が関わり、どのデータをどれくらい置くかが決まります。

更新した画像が変わらない理由と注意点

CDNを使うと、更新したはずの画像が古いまま見えることがあります。これは、エッジサーバーやブラウザに古い控えが残っている場合があるためです。

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

1. オリジンサーバーの画像は新しいか
2. CDNのキャッシュが残っていないか
3. ブラウザのキャッシュが残っていないか
4. ファイル名やURLを変える設計になっているか
5. キャッシュ削除の操作が反映されたか

この順番にすると、オリジンの問題、CDNの問題、ブラウザ側の問題を混ぜずに見られます。

CDNを説明するミニワーク

次の言葉を、配達のたとえで一言にしてみましょう。

• オリジンサーバー:
• エッジサーバー:
• キャッシュヒット:
• キャッシュミス:

答えの例は、中央倉庫、近くの配達拠点、拠点に控えがある、控えがなく中央へ取りに行く、です。最後に実際の言葉に戻して、サーバーとキャッシュの話だと説明します。

CDNの仕組みの確認クイズ

Q1. エッジサーバーに控えがある状態を何と呼びますか？

キャッシュヒットです。

Q2. CDNはオリジンサーバーを完全に不要にしますか？

不要にするとは限りません。元データや更新元としてオリジンが必要な構成が多くあります。

Q3. 古い画像が残るとき、どこを確認しますか？

オリジン、CDNキャッシュ、ブラウザキャッシュを分けて確認します。

ラボの地図を持ち帰る

ラボの明かりが少し落ちるころ、CDNの地図だけが机の上に残りました。マコトは「最初より怖くなくなった」と言い、ユイは大事な線を一本だけ引き直しました。