Lambda@Edge Cache-Control header 不存在 Cloudfront
Lambda@Edge Cache-Control header not present Cloudfront
我将图像存储在 S3 上,并使用 lambda 函数动态调整它们的大小。在这样做的同时,我将 CacheControl: 'max-age=31536000'
添加到调整大小的图像中,还添加了 Cache-Control header:
.then(buffer => {
// save the resized object to S3 bucket with appropriate object key.
S3.putObject({
Body: buffer,
Bucket: BUCKET,
ContentType: 'image/jpg',
CacheControl: 'max-age=31536000',
Key: `uploads/${key}`,
})
// generate a binary response with resized image
response.status = 200
response.body = buffer.toString('base64')
response.bodyEncoding = 'base64'
response.headers['content-type'] = [{ key: 'Content-Type', value: 'image/jpg' }]
response.headers['cache-control'] = [{ key: 'Cache-Control', value: 'public, max-age=31536000' }]
callback(null, response)
})
如果缩略图已经生成,我就这样做:
if (!response.headers['cache-control']) {
response.headers['cache-control'] = [{ key: 'Cache-Control', value: 'public, max-age=31536000' }]
}
callback(null, response)
在我的 Cloudfront 发行版中,我有以下设置:
- 基于所选请求的缓存 Headers:None
- Object 缓存:使用 Origin Cache Headers
lambda 工作正常,但当我查看开发工具时,似乎 Chrome 从不缓存图像。这是我得到的信息:
General
Request URL: https://aws.mydomain.com/478/dd123cd5-1636-47d0-b756-e6c6e9cb28c0/normal/pic.jpg
Request Method: GET
Status Code: 200
Remote Address: 52.84.31.149:443
Referrer Policy: no-referrer-when-downgrade
age: 382
Response Headers
content-length: 49192
content-type: image/jpg
date: Thu, 09 May 2019 20:41:42 GMT
server: AmazonS3
status: 200
via: 1.1 261e801dca9c54ff576f39f96d80ede5.cloudfront.net (CloudFront)
x-amz-cf-id: ZlheiBoNDuYDeuvZo0jBP6Zjpge5AonPGlCo_N2pHhHdGwV7DorKtA==
x-amz-id-2: xkDxIB0qDJt5KMeHINq7/gaRII6EDBOsL3SlMuhMwJ84M/lak9E/tcRChv7vvYurD+2hYOT8kSI=
x-amz-request-id: CAD9AE1E905BB13A
x-cache: Hit from cloudfront
Request Headers
:authority: aws.mydomain.com
:method: GET
:path: /478/dd123cd5-1636-47d0-b756-e6c6e9cb28c0/normal/pic.jpg
:scheme: https
accept: */*
accept-encoding: gzip, deflate, br
accept-language: en-US,en;q=0.9
user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.108 Safari/537.36
Control-Cache 不存在,我无法弄清楚...
当我使分发中的所有图像无效时,唯一的变化是 x-cache 的值:'Error from cloudfront' 在第一次加载时(状态 200,图像加载正常)
好吧,显然不可能在 origin-response lambda 中添加 cache-control headers。您必须在 viewer-response lambda 中执行此操作。类似的东西:
exports.handler = (event, context, callback) => {
const response = event.Records[0].cf.response;
if (!response.headers['cache-control']) {
response.headers['cache-control'] = [{
key: 'Cache-Control',
value: 'max-age=31536000'
}];
}
callback(null, response);
};
我将图像存储在 S3 上,并使用 lambda 函数动态调整它们的大小。在这样做的同时,我将 CacheControl: 'max-age=31536000'
添加到调整大小的图像中,还添加了 Cache-Control header:
.then(buffer => {
// save the resized object to S3 bucket with appropriate object key.
S3.putObject({
Body: buffer,
Bucket: BUCKET,
ContentType: 'image/jpg',
CacheControl: 'max-age=31536000',
Key: `uploads/${key}`,
})
// generate a binary response with resized image
response.status = 200
response.body = buffer.toString('base64')
response.bodyEncoding = 'base64'
response.headers['content-type'] = [{ key: 'Content-Type', value: 'image/jpg' }]
response.headers['cache-control'] = [{ key: 'Cache-Control', value: 'public, max-age=31536000' }]
callback(null, response)
})
如果缩略图已经生成,我就这样做:
if (!response.headers['cache-control']) {
response.headers['cache-control'] = [{ key: 'Cache-Control', value: 'public, max-age=31536000' }]
}
callback(null, response)
在我的 Cloudfront 发行版中,我有以下设置:
- 基于所选请求的缓存 Headers:None
- Object 缓存:使用 Origin Cache Headers
lambda 工作正常,但当我查看开发工具时,似乎 Chrome 从不缓存图像。这是我得到的信息:
General
Request URL: https://aws.mydomain.com/478/dd123cd5-1636-47d0-b756-e6c6e9cb28c0/normal/pic.jpg
Request Method: GET
Status Code: 200
Remote Address: 52.84.31.149:443
Referrer Policy: no-referrer-when-downgrade
age: 382
Response Headers
content-length: 49192
content-type: image/jpg
date: Thu, 09 May 2019 20:41:42 GMT
server: AmazonS3
status: 200
via: 1.1 261e801dca9c54ff576f39f96d80ede5.cloudfront.net (CloudFront)
x-amz-cf-id: ZlheiBoNDuYDeuvZo0jBP6Zjpge5AonPGlCo_N2pHhHdGwV7DorKtA==
x-amz-id-2: xkDxIB0qDJt5KMeHINq7/gaRII6EDBOsL3SlMuhMwJ84M/lak9E/tcRChv7vvYurD+2hYOT8kSI=
x-amz-request-id: CAD9AE1E905BB13A
x-cache: Hit from cloudfront
Request Headers
:authority: aws.mydomain.com
:method: GET
:path: /478/dd123cd5-1636-47d0-b756-e6c6e9cb28c0/normal/pic.jpg
:scheme: https
accept: */*
accept-encoding: gzip, deflate, br
accept-language: en-US,en;q=0.9
user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.108 Safari/537.36
Control-Cache 不存在,我无法弄清楚...
当我使分发中的所有图像无效时,唯一的变化是 x-cache 的值:'Error from cloudfront' 在第一次加载时(状态 200,图像加载正常)
好吧,显然不可能在 origin-response lambda 中添加 cache-control headers。您必须在 viewer-response lambda 中执行此操作。类似的东西:
exports.handler = (event, context, callback) => {
const response = event.Records[0].cf.response;
if (!response.headers['cache-control']) {
response.headers['cache-control'] = [{
key: 'Cache-Control',
value: 'max-age=31536000'
}];
}
callback(null, response);
};