Nginxでwebpの出し分けをしている場合のCloudfront設定
はじめに
下記のような設定でwebpとpng(jpg)の出し分けをしているサービス・サイトがある。
その場合Cloudfrontのキャッシュビヘイビアを適切に設定しなければwebp非対応・部分対応のブラウザで画像が読み込めないまたはwebpが配信されない事象が発生する。（具体的にはIEやmacOSのsafari：参考）
ここではそれらの事象を起こさないための適切な設定を記載する。
map $http_accept $webp_suffix {
default "";
"~*webp" ".webp";
}
server {
# ~~中略~~
location ~* ^.+\.(png|jpe?g)$ {
add_header Vary Accept;
try_files $uri$webp_suffix $uri =404;
}
}結論
対象キャッシュビヘイビアのキャッシュポリシーに指定するキャッシュキーのヘッダーにAcceptを設定する。
これで理解・対応できたら以降読む必要なし。
手順
マネジメントコンソールでの手順を記載する。コードに落とし込みたい場合は自前で書くかFormer2でリバース。
ディストリビューションの詳細画面から説明する。
- タブからビヘイビアを選択
- ビヘイビアの作成を選択
- パスパターンは画像の保存先またはリクエストパスを入力。/images配下に保存しているなら/images/*でOK。
- 画面下部のキャッシュキーとオリジンリクエストまで移動。キャッシュポリシー部分のポリシーを作成を選択。
- ポリシー名は適当に。画面下部のキャッシュキー設定まで移動し次のヘッダーを含める選択後、
ヘッダーを選択からAcceptを選ぶ。他の設定項目は特に要件が無ければCachingOptimizedを真似するで良い。
その後、作成ボタン押下で作成およびビヘイビアに設定。
- オリジンリクエストポリシーは特に要件が無ければAllViewerで良い。他の設定項目はデフォルトでもOK。
その後、ビヘイビアを作成ボタンで作成完了。
おわりに
キャッシュキーを指定しているのでシステム構成やサービス・サイトの利用状況によるがキャッシュヒット率は当然下がる。
キャッシュキーはキャッシュヒット率を高めるために最小限の指定にとどめることが基本。
とはいえアプリでキャッシュをコントロールする場合や今回のケースではキャッシュキーとしてクエリ文字列やヘッダーを指定しなければならない。
IEはともかくmacのsafariはさっさと完全サポートにしてくれ。
Share
