CDNとは？コンテンツ配信ネットワークをわかりやすく解説

CDN（コンテンツ配信ネットワーク）は、多くの都市に分散したサーバーのネットワークで、ウェブサイトのファイル（画像、スクリプト、スタイルシート、場合によってはページ全体）のコピーを保持しています。誰かがサイトを訪れると、遠くにある1台のサーバーではなく、近くの場所から配信を受けます。そのためページが速く表示され、自分のサーバーの負荷も減り、アクセスが急増したときにも耐えやすくなります。

AIで作るときにCDNが重要な理由

CDNを自分で設定することはないかもしれません。多くのホスティングサービスが、サイトの前にCDNを自動で配置しているからです。ただ、その影響は実感することになります。

• 速度。 ページの表示が速いと、訪問者が離れにくくなり、検索エンジンが評価する要素の一つにもなります。詳しくはサイトを速くする方法をご覧ください。
• 「変更が反映されないのはなぜ？」 更新を公開した後も、古いバージョンのキャッシュがしばらく残ることがあります。その理由を知っておくと、混乱を大きく減らせます。
• プライバシーと正確性。 CDNが誤ったものをキャッシュすると、たとえば特定の利用者の情報が入ったページが、次の訪問者に表示されてしまうことがあります。何をキャッシュしてよく、何をしてはいけないかを知っておくと、適切な質問ができます。

身近なたとえ

1軒の店からパンを全国に届けているパン屋を想像してください。どれほど遠くに住んでいる客も、その1店舗からの配送を待たなければなりません。繁忙日には行列が非常に長くなります。

CDNは、同じパンを全国の町の小さな店に置いておくようなものです。客は近くの店で素早く受け取れ、本店は時々その小さな店に補充するだけで済みます。ただし注意点があります。本店がレシピを変えても、古いパンは店が入れ替えを指示されるか、期限が切れるまで売られ続けてしまいます。

CDNの仕組み

1. オリジン。 サイトの本体は、メインのサーバーやホスティングプラットフォームに置かれています。これをオリジンと呼びます。
2. エッジの拠点。 CDNは多くの場所にサーバーを置いており、それをエッジの拠点または*PoP（Point of Presence）*と呼びます。
3. 経路の決定。 訪問者がサイトにアクセスすると、DNSやネットワークの経路制御によって、近くのエッジに振り分けられます。詳しくはドメインとDNSの仕組みをご覧ください。
4. キャッシュヒット。 そのエッジに新しいコピーがあれば、すぐに返します。
5. キャッシュミス。 なければ、エッジはオリジンからファイルを取得して訪問者に送り、次の人のために手元にコピーを保存します。
6. 期限切れ。 各コピーは、サーバーが送るキャッシュヘッダーで決められた時間、または削除されるまで保持されます。

具体例：写真の多いポートフォリオサイト

ある写真家のポートフォリオには、トップページ、60枚の大きな画像があるギャラリー、そして問い合わせフォームがあります。オリジンはヨーロッパにあります。シンガポールの訪問者がギャラリーを開きます。

• CDNがない場合： すべての画像がヨーロッパから届きます。リクエストごとに地球の反対側との往復が発生するため、ギャラリーの表示に時間がかかります。
• CDNがある場合： シンガポール近くで最初に訪れた人がきっかけとなり、その地域のエッジが画像を取得して保存します。以降の同じ地域の訪問者は、近くから、はるかに速く画像を受け取れます。

ここで写真家がトップページのメイン写真を差し替えて公開したとします。訪問者に新しい写真が見えるかどうかは、次の要素で決まります。

/index.html                    → キャッシュ時間は短く、頻繁に確認される
/assets/index-3f9a2c.js        → 長期間キャッシュされる
/assets/hero-8b41d0.jpg        → 長期間キャッシュされる

Viteを含む最近のビルドツールは、ファイルにhero-8b41d0.jpgのようなハッシュ付きの名前を付けます。ファイルが変わると名前も変わるため、ページは、どのキャッシュもまだ見たことのない新しいファイルを要求します。HTMLページ自体は短時間しかキャッシュされないため、すぐに訪問者を新しいファイルへ案内します。これが、長期キャッシュと最新の更新の両方を実現する標準的な方法です。

問い合わせフォームは別物です。送信内容は毎回サーバーに送られ、キャッシュされてはいけません。

キャッシュすべきものと、すべきでないもの

主な用語

ブラウザ、サーバー、データベースを含むキャッシュ全般については、キャッシュとはをご覧ください。

よくある誤解

• 「CDNを使えば、すべてが速くなる。」 速くなるのはファイルの配信だけです。サーバー上の遅いデータベースクエリや、遅いAIの呼び出しは、依然として遅いままです。
• 「CDNはホスティングの代わりになる。」 CDNはホスティングの前に置かれるものです。実体を置くオリジンは、依然として必要です。
• 「更新したのだから、全員にすぐ反映される。」 古いコピーは、CDNやブラウザに短時間残ることがあります。確認するには強制再読み込みをし、ハッシュ付きのファイル名を使ってください。
• 「キャッシュは常に安全。」 個人向けのページを共有キャッシュに保存するのは、現実的なプライバシーのリスクです。個人向けのレスポンスは、キャッシュ不可としてマークすべきです。
• 「CDNは大企業だけのもの。」 多くのホスティングサービスは、小規模サイトにも特別な手間なしでCDNを含めています。

AIビルダーに依頼すること

• 「このサイトの前にCDNはありますか？どのファイルをどれだけの期間キャッシュしますか？」
• 「ビルドされたJavaScript、CSS、画像にハッシュ付きのファイル名と長いキャッシュ時間を設定し、HTMLには短いキャッシュ時間を設定してください。」
• 「ログイン後のページや、個人情報を含むAPIのレスポンスは、共有キャッシュにしないでください。」
• 「ギャラリーが速く読み込まれるように、画像を圧縮してサイズを調整してください。」
• 「更新を公開しましたが、まだ古いバージョンが表示されます。ブラウザのキャッシュが原因ですか、それともCDNが原因ですか？」

CDNとMythex

Mythexで公開すると、フロントエンドの静的なサイトは静的サイトとしてデプロイされ、ドキュメントにあるとおり、CDNのキャッシュは更新後にしばらく遅れることがあります。再公開後も古いバージョンが表示される場合は、公開URLを強制再読み込みしてください。これについて設定すべきことはありません。Cloudflareで管理しているDNSのカスタムドメインを接続する場合は、ドキュメントでは、Mythexが正しくHTTPSを発行できるように、レコードを「プロキシ済み」ではなく「DNSのみ」に設定するよう案内しています。詳しくは、ドキュメントの公開方法とカスタムドメインをご覧ください。また、当社のウェブホスティングのガイドもご覧ください。

よくある質問