Amazon CloudFront での Gzip 圧縮に関する問題

Amazon CloudFront での Gzip 圧縮に関する問題

S3 をオリジンとして設定した CloudFront ディストリビューションがありました。

Amazon のガイドに従って、「オブジェクトを自動的に圧縮」を有効にしました。配布ステータスが「オンライン」と表示されるまで待ってから、すべてのファイルを無効にしました。

私の応答ヘッダーは次のとおりです:

Age:5
Connection:keep-alive
Content-Length:232359
Content-Type:application/javascript
Date:Sat, 03 Mar 2018 15:39:10 GMT
Last-Modified:Sat, 03 Mar 2018 15:37:32 GMT
Server:AmazonS3
Vary:Accept-Encoding
Via:1.1 4dbdc57755819d1a0ec1defc2630d677.cloudfront.net (CloudFront)
X-Amz-Cf-Id:6eHPWzOXv2J6kIvzuieoI9chtPBBvEvJFH9fb3yMwHvvcMZ4xsigCA==
X-Cache:Hit from cloudfront

リクエストヘッダー:

Accept:*/*
Accept-Encoding:gzip, deflate, br
Accept-Language:en-GB,en;q=0.9,en-US;q=0.8,pl;q=0.7,zh;q=0.6
Cache-Control:no-cache
Connection:keep-alive
Host:d2h5tcpn9r8alm.cloudfront.net
Pragma:no-cache
Referer:https://noru.co.uk/
User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.186 Safari/537.36

「Content-length」と「Content-Type」がサポートされていますが、何が足りないのでしょうか? 気が狂いそうです...

それ以来、上記の手順を実行して新しい s3 バケットと新しいディストリビューションを作成しましたが、別のバケットの場所を選択しました (これが何らかの影響を与える場合に備えて)。ディストリビューションの一般設定は次のとおりです。

Delivery Method Web
Cookie Logging  Off
Distribution Status Deployed
Comment -
Price Class Use All Edge Locations (Best Performance)
AWS WAF Web ACL -
State   Enabled
Alternate Domain Names (CNAMEs) -
SSL Certificate Default CloudFront Certificate (*.cloudfront.net)
Domain Name d189ud9v76clu1.cloudfront.net
Custom SSL Client Support   -
Security Policy TLSv1
Supported HTTP Versions HTTP/2, HTTP/1.1, HTTP/1.0
IPv6    Enabled
Default Root Object -
Last Modified   2018-03-03 15:46 UTC
Log Bucket

そして行動: 流通行動

まだ gzip が動作しません。新しいファイルは次のとおりです: http://d189ud9v76clu1.cloudfront.net/app.min.js

答え1

リクエストに必要なAccept-Encoding: gzipヘッダーが含まれていますか?

ヘッダーは curl 出力のように見えますが、デフォルトではそのヘッダーは送信されません。

次のように curl で gzip エンコーディングをテストできます。curl -H "Accept-Encoding: gzip" https://example.com/asset.js"

答え2

私に何が起こったのかを要約して、誰かの役に立つかどうか考えてみましょう。

S3 の初期設定を行いました。CORS を設定しましたが、Content-Length が追加されていませんでした。CloudFront の初期設定を行いました。Compress をチェックしていませんでした。

すべてが展開されます。

ドメインで GTMetrix テストを実行すると、gzip で F が返されます。

戻って、これを機能させるにはどうすればよいかを Google で検索します。Content-Length ヘッダーが必要であることに気づき<AllowedHeader>Content-Length</AllowedHeader>、CloudFront に戻って Distribution の圧縮を確認する必要があることに気付きました。

しかし... キャッシュを無効にする必要もあります。 基本的に、すべてのアセットは 304 (変更なし) で返されます。 そのため、gzip 圧縮されたアセットは取得されません。

配布、編集、無効化、作成し*て実行。

それが役に立てば幸い。

答え3

その後、私はこの問題を解決するために AWS ヘルプデスクに料金を支払いました。彼らの返答は次のとおりです。

開発者ツールを使用して構成に加えられた変更を表示できないのはイライラするかもしれません。

オンラインのドキュメントから、少しわかりにくい可能性があることが確認できました。そのため、ドキュメントにいくつかの変更を加えるようフィードバック リクエストを送信します。あなたの場合は、パフォーマンスの変更の方が多く、Chrome ブラウザの下部にある [開発者ツール] の [ネットワーク] オプションを見ると、gzip 圧縮によってページのパフォーマンスがどのように影響を受けたかがわかります。

ブラウザ経由で構成を表示するには、任意のブラウザから開発者ツールの応答ヘッダーを表示することで、「curl」コマンドの出力で取得するのと同じ別のオプションを使用します。

これは、開発者ツール -> ネットワークの選択に移動すると見つかります。 * リソースへのリンクがすべて表示されたら、一番上のリンクのドメイン名「noru.co.uk」をクリックします。 * これにより、ヘッダーが開き、curl コマンドの例と同じ出力が表示されます。

受け入れ範囲: バイト

代替サービス: quic=":443"; ma=2592000; v="35,37,38,39"

キャッシュ制御: no-store、no-cache、must-revalidate、post-check=0、pre-check=0

コンテンツエンコーディング: gzip

コンテンツの長さ: 3152

コンテンツタイプ: text/html; 文字セット=utf-8

日付: 2018年3月20日火曜日 06:37:04 GMT

ETag: "7073226-1521527798;gz"

有効期限: 1981 年 11 月 19 日 (木) 08:52:00 GMT

プラグマ: キャッシュなし

サーバー: LiteSpeed

変化: Accept-Encoding

X-Firefox-Spdy: h2

文字セット: utf-8

x-litespeed-cache: ヒット、プライベート

x-powered-by: Craft CMS

これにより、そのドメインの Web ページの構成に関するほとんどの情報が提供されます。

これがお役に立てば幸いです。他にご不明な点がございましたら、遠慮なくお問い合わせください。喜んでお手伝いさせていただきます。

関連情報