圧縮されたファイルと圧縮されていないファイルに異なるContent-Typeを使用するCloudfront

Question

私はS3とCloudfront経由で静的サイト生成プログラムによって生成されたWebサイトを提供しています。ファイルは正しいContent-TypesでS3にアップロードされています。 DNSはS3バケットを起点とするCloudfrontを指しています。 Cloudfrontは暗号化と圧縮に注意します。私はCloudfrontにオブジェクトを自動的に圧縮するように指示しました。使用した画像の一部をPNGからSVGに変更するまでは、うまくいきました。

ファイルが圧縮されていないと要求されるたびに、Content-Type（image/svg + xml）の設定でそのまま配信され、サイトは正しくレンダリングされます。ただし、ファイルが圧縮されていると要求された場合、デフォルトのContent-Type（アプリケーション/オクテットストリーム）で配信され、レンダリングでイメージが欠落します。画像を右クリックして新しいタブで画像を開くと、ページの残りの部分は表示されません。

結果は、使用されているブラウザとは独立しています。 Firefoxでは、圧縮されたページまたは圧縮されていないページを強制的に要求するように設定する方法を知っています。私はまた、ヘッダーをチェックするためにカールを試みました。

λ curl --compressed -v -o /dev/null http://dev.example.com/img/logo-6998bdf68c.svg 
* STATE: INIT => CONNECT handle 0x20049798; line 1090 (connection #-5000) 
* Added connection 0. The cache now contains 1 members 
* Trying 52.222.157.200... 
* STATE: CONNECT => WAITCONNECT handle 0x20049798; line 1143 (connection #0) 
    % Total % Received % Xferd Average Speed Time Time  Time Current 
           Dload Upload Total Spent Left Speed 
    0  0 0  0 0  0  0  0 --:--:-- --:--:-- --:--:--  0* Connected to dev.example.com (52.222.157.200) port 80 (#0) 
* STATE: WAITCONNECT => SENDPROTOCONNECT handle 0x20049798; line 1240 (connection #0) 
* STATE: SENDPROTOCONNECT => DO handle 0x20049798; line 1258 (connection #0) 
> GET /img/logo-6998bdf68c.svg HTTP/1.1 
> Host: dev.example.com 
> User-Agent: curl/7.44.0 
> Accept: */* 
> Accept-Encoding: deflate, gzip 
> 
* STATE: DO => DO_DONE handle 0x20049798; line 1337 (connection #0) 
* STATE: DO_DONE => WAITPERFORM handle 0x20049798; line 1464 (connection #0) 
* STATE: WAITPERFORM => PERFORM handle 0x20049798; line 1474 (connection #0) 
* HTTP 1.1 or later with persistent connection, pipelining supported 
< HTTP/1.1 200 OK 
< Content-Type: application/octet-stream 
< Content-Length: 7468 
< Connection: keep-alive 
< Date: Wed, 01 Mar 2017 13:31:33 GMT 
< x-amz-meta-cb-modifiedtime: Wed, 01 Mar 2017 13:28:26 GMT 
< Last-Modified: Wed, 01 Mar 2017 13:30:24 GMT 
< ETag: "6998bdf68c8812d193dd799c644abfb6" 
* Server AmazonS3 is not blacklisted 
< Server: AmazonS3 
< X-Cache: RefreshHit from cloudfront 
< Via: 1.1 36c13eeffcddf77ad33d7874b28e6168.cloudfront.net (CloudFront) 
< X-Amz-Cf-Id: jT86EeNn2vFYAU2Jagj_aDx6qQUBXFqiDhlcdfxLKrj5bCdAKBIbXQ== 
< 
{ [7468 bytes data] 
* STATE: PERFORM => DONE handle 0x20049798; line 1632 (connection #0) 
* Curl_done 
100 7468 100 7468 0  0 44526  0 --:--:-- --:--:-- --:--:-- 48493 
* Connection #0 to host dev.example.com left intact 
* Expire cleared 

と非圧縮のためにそれが良く見える：これらは結果である

λ curl -v -o /dev/null http://dev.example.com/img/logo-6998bdf68c.svg 
* STATE: INIT => CONNECT handle 0x20049798; line 1090 (connection #-5000) 
* Added connection 0. The cache now contains 1 members 
* Trying 52.222.157.203... 
* STATE: CONNECT => WAITCONNECT handle 0x20049798; line 1143 (connection #0) 
    % Total % Received % Xferd Average Speed Time Time  Time Current 
           Dload Upload Total Spent Left Speed 
    0  0 0  0 0  0  0  0 --:--:-- --:--:-- --:--:--  0* Connected to dev.example.com (52.222.157.203) port 80 (#0) 
* STATE: WAITCONNECT => SENDPROTOCONNECT handle 0x20049798; line 1240 (connection #0) 
* STATE: SENDPROTOCONNECT => DO handle 0x20049798; line 1258 (connection #0) 
> GET /img/logo-6998bdf68c.svg HTTP/1.1 
> Host: dev.example.com 
> User-Agent: curl/7.44.0 
> Accept: */* 
> 
* STATE: DO => DO_DONE handle 0x20049798; line 1337 (connection #0) 
* STATE: DO_DONE => WAITPERFORM handle 0x20049798; line 1464 (connection #0) 
* STATE: WAITPERFORM => PERFORM handle 0x20049798; line 1474 (connection #0) 
* HTTP 1.1 or later with persistent connection, pipelining supported 
< HTTP/1.1 200 OK 
< Content-Type: image/svg+xml 
< Content-Length: 7468 
< Connection: keep-alive 
< Date: Wed, 01 Mar 2017 20:56:11 GMT 
< x-amz-meta-cb-modifiedtime: Wed, 01 Mar 2017 20:39:17 GMT 
< Last-Modified: Wed, 01 Mar 2017 20:41:13 GMT 
< ETag: "6998bdf68c8812d193dd799c644abfb6" 
* Server AmazonS3 is not blacklisted 
< Server: AmazonS3 
< Vary: Accept-Encoding 
< X-Cache: RefreshHit from cloudfront 
< Via: 1.1 ac27d939fa02703c4b28926f53f95083.cloudfront.net (CloudFront) 
< X-Amz-Cf-Id: AlodMvGOKIoNb8zm5OuS7x_8TquQXzAAXg05efSMdIKgrPhwEPv4kA== 
< 
{ [2422 bytes data] 
* STATE: PERFORM => DONE handle 0x20049798; line 1632 (connection #0) 
* Curl_done 
100 7468 100 7468 0  0 27667  0 --:--:-- --:--:-- --:--:-- 33639 
* Connection #0 to host dev.example.com left intact 

私は、パフォーマンス上の理由から、圧縮をオフにする必要はありません。そして、これはSVGファイルタイプに対してのみ起こると思われます。他のすべてのタイプには正しいものがあります。同じContent-Typeを返します。キャッシュを無効にしようとしましたが、キャッシュ時間を0秒に設定することで完全に無効にしました。アップロードプロセスは自動化されており、1つのファイルに対して簡単に変更できないため、S3にアップロードするときに圧縮バージョンをアップロードすることはできません。

私は何かが間違っていたことを願っています。これは修正するのが最も簡単だからです。しかし、私は何が設定に間違っている可能性があるか分からない。私はすでに似たような問題を抱えている人を見つけるためにGoogleを使いましたが、それは私だけのようです。誰でも、アイデアがありますか？

Answer 1

あなたはこの問題を誤診しています。 CloudFrontはContent-Typeを変更しません。

しかし、CloudFrontは、要求のバリエーションに基づいて同じオブジェクトの異なるバージョンをキャッシュします。

通知された場合、これらのオブジェクトのLast-Modified時間が異なります。もともと、S3でコンテンツタイプの設定が間違っていました。続いて修正しましたが、CloudFrontはメタデータが変更されたことを認識しません。なぜなら、ETagは変更されていないため、RefreshHitの応答が間違っているからです。 gzipエンコーディングのサポートを宣伝しているリクエストで古いバージョンを提供しています。オブジェクトの実際のペイロードが変更された場合、CloudFrontはすでにキャッシュを更新している可能性があります。

キャッシュを消去するにはinvalidationを実行してください。数分以内にこの問題は解決されます。