LightFile Proxy 利用ガイド

キャッシュの最適化 ​

CloudFront Functionsを利用し、キャッシュ効率を最適化する方法を紹介します。

CloudFront Functionsの料金について

CloudFront Functionsはリクエスト単位の課金が発生します。

料金 - Amazon CloudFront | AWS

2024年9月現在、100万リクエストあたり0.10USDです。例えば月間1000万PVで1ページあたりの画像ファイルを100件と仮定すると、100USBの費用がかかります。

この費用が見合わない場合、設定は必要ありません。

CloudFront Functionsを利用する前 ​

導入チュートリアルでは、Acceptヘッダをキャッシュキーに追加することで、WebPのキャッシュとJPEG/PNG/GIFのキャッシュを分けていました。

ところがAcceptヘッダの値はブラウザによって微妙に異なっており、CloudFront上には実質、ブラウザ別のキャッシュが作成されてしまいます。

CloudFront Functionsを利用すると ​

そこでCloudFront Functionsを利用し、ブラウザ(ビューワー)からのリクエストについてWebP対応ブラウザか否かを区別するx-accept-webpヘッダを追加します。

そのx-accept-webpヘッダをキャッシュキーにすることで、すべてのWebP対応ブラウザが共通のWebPキャッシュを持つようになるため、キャッシュヒット率を最大化できます。

CloudFront Functionsでキャッシュを最適化する手順 ​

詳細は動画をご覧ください。(音声が出ます)

CloudFront Functions設定のポイント ​

  1. CloudFront Functionsに関数x-accept-webpを追加する。
    • この関数はAcceptヘッダのWebP対応状況を見てリクエストヘッダにx-accept-webpを追加する。
  2. CloudFrontの画像経路ビヘイビアのキャッシュキーからAcceptを削除し、代わりにx-accept-webpを追加する。
  3. CloudFrontの画像経路ビヘイビアの関数で、ビューワーリクエストに関数x-acceptを指定する。

CloudFront Functionsの関数ソースコード ​

CloudFrontの関数に、次のソースコードでx-accept-webp関数を追加してください。

js
function handler(event) {
    var request = event.request
    var accept = request.headers['accept'] || { value: '*/*' }
    request.headers['x-accept-webp'] = { value: accept.value.match(/image\/webp/) ? '1' : '0' }
    return request
}