CDN キャッシュとは何か? エッジからアセットを配信する

CDN キャッシュは、静的アセットのコピーを世界中のエッジサーバーに保存し、ユーザーがオリジンではなく近くのロケーションからダウンロードできるようにします。

すべてのアセットを 1 台のオリジンサーバーから配信すると、遠くのユーザーには遅く、負荷がかかると高コストです。CDN はビルド出力をユーザーに近いエッジロケーションにキャッシュします。そこから最大限の効果を得られるかどうかは、ビルドがファイルにどう名前を付けラベルを付けるかにかかっており、キャッシュの挙動は CI ビルドの直接的な帰結になります。

エッジキャッシュの仕組み

ユーザーがアセットを要求すると、最も近いエッジは、キャッシュにあればそこから配信し、なければオリジンから一度だけ取得して次のユーザーのためにキャッシュします。最初の要求のあとは、ほとんどのユーザーが近くから高速な応答を得られます。

キャッシュヘッダーが挙動を制御する

Cache-Control のような応答ヘッダーが、アセットをどれだけキャッシュするかを CDN とブラウザに伝えます。ハッシュ付きアセットは事実上永久にキャッシュでき、その場で変わるファイルは短時間だけキャッシュするか再検証する必要があります。

不変アセットと HTML

content-hash 付きの JS と CSS は、長期かつ不変にキャッシュできます。
HTML エントリはデプロイごとに更新されるため、短時間だけキャッシュされます。
HTML はデプロイ後、新しいハッシュ付きアセットを参照します。

デプロイ時の無効化

ハッシュ付きファイル名はコンテンツが変わると変わるため、デプロイは古いファイルを上書きするのではなく新しいファイルを追加し、キャッシュは自然に正しいバージョンを配信します。HTML のように名前を保つファイルは、明示的な無効化が必要になることがあります。

CI/CD における CDN キャッシュ

pipeline はビルド出力を CDN にアップロードし、ファイルタイプごとにキャッシュヘッダーを設定します。ハッシュ付きアセットには長く不変な設定、HTML には短い設定です。deploy ステップでこれを正しく行うことこそが、再訪ユーザーにダウンロードをスキップさせつつ最新のデプロイを届けられる理由です。

重要なポイント

CDN キャッシュは、ユーザーに近いエッジロケーションからアセットを配信します。
ハッシュ付きアセットは長期キャッシュされ、HTML は短時間だけキャッシュされて新しいハッシュを指します。
CI のデプロイがキャッシュヘッダーを正しく設定し、ユーザーが高速かつ正確なコンテンツを得られるようにします。