Aです。今回はCloudFront経由でgzip圧縮したデータを送る際の設定と注意点について紹介させていただきます。
Content-Encoding: gzip とは
ブラウザの開発者ツールリクエストヘッダーにある Content-Encoding: gzip は レスポンスとして返されたデータをgzip圧縮してコンテンツのデータ量を減らしてページの表示速度を上げることを表しています。
Nginxでgzip圧縮の設定
gzip on; gzip_types text/html;
上記のように設定することで、サーバー側でhtmlをgzip圧縮するように指定できます。 cssやjs、xmlなど複数圧縮するファイル形式を指定することもできます。
CloudFrontの圧縮設定について
ビヘイビアの設定で「オブジェクトを自動的に圧縮」にはいを選択し、キャッシュポリシーでgzipとBrotliを設定することで圧縮の設定ができます。
しかし、下記のようにサーバー側で圧縮の設定をされていた場合、CloudFrontは圧縮を行いません。
オリジンからのレスポンスに Content-Encoding ヘッダーが含まれる場合、ヘッダーの値に関係なく CloudFront ではオブジェクトを圧縮しません。
実際にNginxで圧縮したデータをCloudFront経由で確認する
CloudFrontを経由しない場合レスポンスヘッダーにContent-Encoding: gzipが存在し、圧縮できることを確認できたのですが 今回CloudFrontを経由すると圧縮ができていませんでした。
オリジンで圧縮設定をいれた場合CloudFront自体の圧縮はされないのですが、サーバー側で設定した場合はサーバー側の圧縮を使います。 今回、CloudFront経由で圧縮ができていなかったのは、CloudFrontを経由する場合Via ヘッダがついてるためデータがproxy扱いになります。 そのため、サーバー側のnginxでgzip_proxiedの値をanyにする必要がありました。
そのためサーバー側のnginxで gzip_proxied : any; のように設定することで、ブラウザ上で Content-Encoding: gzip が確認でき、 ファイルサイズも4分の1程に減っていたため、圧縮されていることが確認できました。
このようにサーバー側でgzip圧縮を設定する場合、CloudFrontではproxy扱いになるためそれに適した設定をする必要があります。
