

当方はフロントエンジニアでサーバー周りの知識は浅いです。  
AWSのEC2でWordpressを使用しS3に保存した画像ファイルをにおいて、CloudFrontからキャッシュさせてたいのですが、ブラウザキャッシュについてExpiresが設定できずに困っています。

解決策もしくは、他のベストプラクティスなどがありましたらご教示ください。

■構成  
Route53→CloudFront→S3(画像のみ)  
Route53→CloudFront→EC2 nginx1.8.1(その他)

S3のメタデータからExpiresとCache-
Controlを追加、Route53のAレコードのエイリアスで"cdn.test.com"を指定し、CloudFrontからS3へ画像を取得に行っています。  
しかし"cdn.test.com"だとExpiresが追加されておらず、直接S3リンクへ接続するとExpiresが追加されている状態です。

■症状

[code]

    $curl --head https://cdn.test.com/wp-content/uploads/2017/03/test.jpg
    HTTP/1.1 200 OK
    Content-Type: image/jpeg
    Content-Length: 394513
    Connection: keep-alive
    Date: Tue, 14 Mar 2017 02:47:04 GMT
    Last-Modified: Sun, 12 Mar 2017 17:29:54 GMT
    ETag: "52a8ee6dfdfaf5e603da9bb8b3f56fd5"
    Accept-Ranges: bytes
    Server: AmazonS3
    Age: 2
    X-Cache: Hit from cloudfront
    Via: 1.1 c1f0e44a53c3128a4cc0e658159f64e0.cloudfront.net (CloudFront)
    X-Amz-Cf-Id: Rc8zI-O2PGgAaDL84eiv3BF4l2bWsMbWEhXkdXopKQuVpxcly4JElg==
    
    $curl --head  http://s3-ap-northeast-1.amazonaws.com/testbucket/wp-content/uploads/2017/03/test.jpg
    HTTP/1.1 200 OK
    x-amz-id-2: PAflQhja0j1wdU/8iBZBPjZd8c0hCPYWxH1Gk7hYybDTl+iaf7NfO0+SYuN5dNckJpSWgSbPT44=
    x-amz-request-id: AB629EFFA150675B
    Date: Tue, 14 Mar 2017 02:47:53 GMT
    Last-Modified: Tue, 14 Mar 2017 01:24:28 GMT
    ETag: "a83f5aa4cd37eb92e41d41bc2406fa8e"
    Cache-Control: max-age=0
    Expires: Mon, 20 Mar 2017 20:18:54 GMT
    Accept-Ranges: bytes
    Content-Type: image/jpeg
    Content-Length: 116462
    Server: AmazonS3
    
[/code]


CC BY-SA 3.0
2017-03-14T03:14:28.623
33301
2018-01-18T06:04:05.537
21046
question
aws http amazon-s3
CloudFrontとS3の構成でExpiresが追加できません。


CloudFrontでキャッシュさせつつ、ブラウザでもキャッシュ時間の制御を行う場合、以下の2つの方法があります。(ただしどちらもCloudFront側のTTLを適切に設定する必要あり)

  1. `Cache-Control: s-maxage=xx,max-age=yy` と指定することで、`s-maxage`がCloudFront側、`max-age` がブラウザ側と使い分けることができる
  2. `Expires` のみ指定する。CloudFront、ブラウザ双方がExpiresまでキャッシュを行う

詳細は以下ドキュメントにあります。

  * [CloudFront エッジキャッシュにオブジェクトを保持する時間の指定（有効期限切れ） - Amazon CloudFront](http://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/Expiration.html#ExpirationDownloadDist)

「Cache-Control または Expires ヘッダー」とあるように、両方書いた場合の動作については定義されていないようです。


CC BY-SA 3.0
2017-06-05T15:11:45.640
35313
2017-06-05T15:11:45.640
4759
33301
answer