女性向けエンジニアスクール
3秒でわかる
世界中に置いた代理サーバーから利用者に近い拠点で配信する仕組み。距離による遅延を縮め、元のサーバーへの負荷も肩代わりして表示を速くします。
30秒図解
もう少し詳しく
どういうものか
CDN は Content Delivery Network の略で、画像や CSS、動画といったコンテンツを世界各地の拠点（エッジサーバー）に複製し、利用者から最も近い拠点が応答する仕組みです。
利用者が最初にアクセスすると、エッジは元のサーバー（オリジン）から中身を取得して手元に保存します。2 回目以降、同じファイルの要求はエッジがそのまま返し、オリジンまで届きません。この保存をキャッシュと呼びます。
なぜ必要か
理由は 2 つあります。1 つは距離です。東京のサーバーにロンドンから接続すると、光の速さでも往復で 200 ミリ秒以上かかります。ページを開くまでに何十本もの要求が飛ぶことを考えると、この積み重ねは体感できる遅さになります。エッジが同じ都市にあれば、この時間が一桁減ります。
もう 1 つは負荷です。アクセスが集中しても、キャッシュされたファイルの要求はエッジで止まります。オリジンに届くのは一部だけなので、サーバーの増強なしで急な流入に耐えられます。加えて、大量アクセスによる攻撃の吸収や、TLS 終端の肩代わりも CDN の役割です。
具体例
キャッシュの挙動は HTTP のヘッダーで指示します。
Cache-Control: public, max-age=31536000, immutableこれは「1 年間キャッシュしてよい、途中で変わることはない」という意味です。中身が変わるファイルにこれを付けると、更新が届かなくなります。そこで、ビルド時にファイル名へハッシュを混ぜます。
/assets/app.9f2c1a.js -> 内容が変われば名前も変わるので長期キャッシュできる
/index.html -> 名前が固定なので短い max-age か no-cache にする<a href="/glossary/curl" class="text-primary font-medium underline underline-offset-2 hover:text-primary-dark">curl</a> -I https://example.com/assets/app.9f2c1a.js
# age や x-cache の値でエッジから返ったかどうかを確認するつまずきやすいところ
private か no-store にします覚え方
全国に置いた「取次店」です。本社まで注文を回さず、近所の店の在庫で渡す。だから速く、本社も混みません。
