CDNとは何か、わかりやすく解説
CDNの役割
CDNとは：コンテンツデリバリーネットワークの役割を解説 | We.Inc
CDNが訪問者の近くのエッジサーバーにファイルを複製する仕組み、キャッシュヒットとキャッシュミスの意味、エッジが保存できる内容を決めるCache-Controlヘッダーを解説します。
コンテンツデリバリーネットワーク（CDN）とは、世界中に分散し、サイトのファイルのコピーを保持するサーバー群です。訪問者にはオリジンではなく近くのエッジサーバーが応答するため、待ち時間が減ってページが速く表示され、自分のサーバーが処理するリクエストも大幅に減ります。エッジが何を保存できるかはCache-Controlヘッダーで決まります。
CDN用語を一言で
- オリジン
- 実際のファイルが置かれている自分のサーバーやストレージ
- エッジ
- 訪問者の近くにあり、オリジンの代わりに応答するCDNサーバー
- キャッシュヒット
- エッジが新しいコピーをすでに持っていて、オリジンに問い合わせずに応答したこと
- キャッシュミス
- エッジに使えるものがなく、オリジンから取得し、場合によっては保存したこと
- パージ
- 保存されたコピーを破棄するようCDNに指示し、次のリクエストで新しいものを取得させること
インターネットでは距離が時間のコストになります。新しい接続ではいずれも、最初のバイトが届くまでに何度も往復が必要です。CDNは読者の近くから応答することで、その往復を短くします。このガイドでは、その仕組み、CDNにできないこと、ヘッダーによる制御方法を、試せるシミュレーター付きで解説します。
- シミュレーターでCache-Controlのディレクティブを選び、ブラウザーとCDNエッジがレスポンスを保存できるか、どのくらいの期間保存できるかを確認します。
- 生成されたヘッダー行をコピーし、サーバーやホスティングの設定に使います。
- リファレンス表を読み、HTML、ハッシュ付きアセット、非公開ページに適した値を選びます。
- デプロイ後はCDNをパージするか新しいファイル名に頼り、訪問者に更新が届くようにします。
- app.3f9a1c.jsのようにファイル名にコンテンツハッシュを付け、immutableで1年間キャッシュしましょう。新しいビルドでは新しい名前になるので、古いものが配信されることはありません。
- HTMLはリリース間でURLが変わらないため、共有キャッシュの有効期間を短くするか、再検証するようにしましょう。
- 1人のアカウント情報を表示するページは、決してCDNに保存させないでください。privateまたはno-storeを指定しましょう。
- 公開CDNからライブラリを読み込んでも、再ダウンロードの節約にはもうなりません。現在のブラウザーはプライバシー保護のため、サイトごとにキャッシュを分離しています。
よくある質問
CDNを使えばどのサイトでも速くなりますか？
サーバーから遠い訪問者にとっては、往復が短くなり接続も近くで確立されるため、たいていは速くなります。ただし、名前解決と接続が必要なドメインが1つ増える場合はかえってコストになることがあります。そのため、ホストを混在させるより、すべてを自分のドメインからCDN経由で配信するほうが良いのです。
s-maxageとは何ですか？
CDNのような共有キャッシュにだけ有効期間を設定するCache-Controlのディレクティブです。エッジではmax-ageより優先され、ブラウザーは引き続きmax-ageを使うので、エッジにはページを1時間、ブラウザーには1分間保持させるといった設定ができます。
CDNは動的なページをキャッシュできますか？
はい、レスポンスが全員に同じであれば可能です。数秒のキャッシュでも、アクセスの急増を吸収できます。ログインしたユーザーごとに異なるレスポンスは、共有キャッシュに保存してはいけません。
CDNはセキュリティ上のリスクになりますか？
コンテンツの経路に入る第三者がもう1つ増えることになります。サードパーティのCDNからスクリプトを読み込む場合は、Subresource Integrityのハッシュを追加し、改ざんされたファイルをブラウザーが拒否するようにしましょう。
CDNを自分で追加する必要がありますか？
多くのホスティングプラットフォームは、公開したサイトをすでにCDN経由で配信しています。キャッシュが2層になるとパージやデバッグが難しくなるので、2つ目を重ねる前にホストのドキュメントを読んでください。
リクエスト時に起きること
- 訪問者のリゾルバーが近くのエッジのアドレスを返します。エッジはそのURLが保存されているかを確認します。ヒットならすぐに応答し、ミスならオリジンに問い合わせて応答を中継し、ヘッダーが許可していればコピーを保存します。
- エッジはオリジンへの接続も確立したまま保っているので、ミスの場合でも、地球の反対側から訪問者が直接サーバーに接続するより速いことがよくあります。
CDNでは解決できないこと
- 遅いデータベースクエリ、重いJavaScript、大きすぎる画像は、エッジから配信しても遅いままです。CDNがなくすのは距離であって、処理ではありません。
- また、障害が起きうる要素が1つ増えます。CDNに障害が起きると、その背後にあるすべてのサイトが影響を受けるため、ステータスページとその場合の対策を用意しておく価値があります。
エッジで重要なCache-Controlディレクティブ
各ディレクティブがブラウザーとCDNに伝える内容
- max-age=N
- N秒間は新しいとみなす
- s-maxageがなければN秒間は新しいとみなす
- s-maxage=N
- 無視
- max-ageより優先し、N秒間は新しいとみなす
- 保存できる
- Authorizationヘッダーがあっても保存できる
- stale-while-revalidate=N
- 更新中のN秒間は古いものを返してよい
- CDNが対応していれば同じ
ファイルの種類別ヘッダー設定例
よく使う3つのポリシー
ハッシュ付きアセットは1年間保持し、HTMLはエッジで1分ごとに更新し、アカウントページは共有キャッシュに一切触れさせません。
Cache-Controlシミュレーター
ディレクティブを選んで、誰がレスポンスを保持できるかを確認します。
max-age（秒）
s-maxage（秒、なしの場合は空欄）
共有
public、private、no-store
immutableを追加
ブラウザー
CDNエッジ
保存可能、{n}秒間は新しいとみなす
保存してはいけない
保存できるが、再利用前にサーバーへの確認が必要
ヘッダーをコピー
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る