图片优化

图像优化

基于 CloudFront、S3 和 Lambda 的客户管理型解决方案

图像优化的最常见使用案例根据用户浏览器功能自动设置格式，并允许前端调整图像大小。诸如 Next.JS 之类的流行 Web 开发框架提供响应式图像组件，这些组件可以根据设备视口自动选择图像大小。下图说明了这种常见使用案例的推荐架构：

1. 用户向采用特定转换（例如，编码和大小）的图像发送 HTTP 请求。转换在 URL 中编码，更确切地说是作为查询参数。示例 URL 如下所示：https://exmaples.com/images/cats/mycat.jpg?format=webp&width=200。
2. 请求由附近的 CloudFront 边缘站点处理，可提供最佳性能。在向上游传递请求之前，对查看器请求事件执行 CloudFront 函数以重写请求 URL。CloudFront Functions 是 CloudFront 的一项功能，它允许您使用 JavaScript 编写轻量级函数，以进行大规模的对延迟敏感的 CDN 自定义。在我们的架构中，我们重写 URL 以验证请求的转换，并通过排列转换顺序对 URL 进行标准化，然后将其转换为小写以提高缓存命中率。当请求自动转换时，该函数还会决定最适合应用哪种转换。例如，如果用户使用 format=auto 指令要求最优化的图像格式（JPEG、WebP 或 AVIF），则 CloudFront 函数将根据请求中存在的 Accept 标头选择最佳格式。
3. 如果请求的图像已经缓存在 CloudFront 中，则缓存将被命中，并且图像将从 CloudFront 缓存中返回。为了提高缓存命中率，我们启用了 Origin Shield，这是 CloudFront 的一项功能，可在源服务器之前充当额外的缓存层，以进一步减轻请求负担。如果图像不在 CloudFront 缓存中，则请求将被转发到 S3 存储桶，创建该存储桶是为了存储转换后的图像。如果请求的图像已经转换并存储在 S3 中，则只需在 CloudFront 中提供和缓存即可。
4. 否则，S3 将使用 403 错误代码进行响应，该错误代码由 CloudFront 的原始故障转移检测到。多亏了这种原生功能，CloudFront 会重试相同的 URL，但这次使用的是基于 Lambda 函数 URL 的辅助来源。调用时，Lambda 函数从存储原始图像的另一个 S3 存储桶中下载原始图像，使用 Sharp 库对其进行转换，将转换后的图像存储在 S3 中，然后通过 CloudFront 提供该图像，在那里缓存该图像以供将来的请求使用。

要部署此解决方案，请按照本博客中的步骤操作。此外，该博客还向您展示了如何在 Next.JS 的图像组件中使用。请注意，该解决方案允许您禁用在 S3 中存储转换后图像的功能，仅依靠 CloudFront 缓存来提供转换后的图像。

Deploy solution using CDK

准备:

# install node
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
$ nvm install 20

# 安装 AWS CDKCLI
$ npm install -g aws-cdk
$ cdk --version

开始部署:

git clone https://github.com/aws-samples/image-optimization.git 
cd image-optimization
npm install
cdk bootstrap
npm run build
cdk deploy -c S3_IMAGE_BUCKET_NAME=’YOUR_S3_BUCKET_NAME’

清理：

要删除为此解决方案创建的云资源，只需执行以下命令：

cdk destroy