Best Practices for using Lambda@Edge to process images on AWS

Sun, 30 Aug 2020 00:07:46 +0800

Github

Provides docker environment and code which process image. Welcome to star, fork or PR to improve the practice. Repo：Click The Link

What’s this

For the same image link, we may response different sizes of thumbnails according to different pages. Unfortunately, AWS does not directly provide such services. But it provides lambda@edge with CloudFront to handle this kind of demand. Therefore, I designed a set of solutions to achieve the requirements of image processing. This article contains instructions, design solutions and practical steps.

在AWS使用Lambda@Edge处理图片的最佳实践

Sun, 30 Aug 2020 00:07:14 +0800

Github

提供了docker环境和简单的图片处理代码；欢迎star、fork或提交pr以改善该实践。仓库：点我

这是什么

类似阿里云OSS的图片处理服务、腾讯云的数据万象。

因为AWS并没有单独将图片处理单独发布服务，只提供了lambda配合CloudFront用于处理这类需求。因此我设计了一套方案用于实现图片处理的需求，本文档包含使用说明、设计方案。

有了本方案，前端可以在原有的cdn图片链接后面拼接参数，获取对应的缩略图、加水印等图片处理需求。

本方案涉及到的几个角色

CloudFront

Amazon的CDN服务，在本方案用于缓存缩略图。下面简称CF

Lambda@edge

Lambda是Amazon的云函数，就是serverless那一套。

Lambda@edge则是可以运行在CloudFront边缘的函数，比Lambda支持的能力要弱一些。例如runtime只支持Node.js和Python；不支持Layer，导致使用的图片库无法部署在layer，只能全部打包到源码。

对图片的处理逻辑在这一层运行，是本方案的重点对象。下面简称Lambda

S3

Amazon的对象存储服务，类似阿里的OSS。在本方案扮演存储原图、缩略图；cdn回源的角色

工作流程

Image Generate WOrkflow

注意：只有在CF行为规则配置了规则（例如 .jpg@ ），才会触发lambda。直接访问原图的不经过lambda，不必担心过度计费问题。

请参考上图，流程为：

步骤0：用户请求图片链接：链接形如：http://cdn.com/image/abc.jpg@250w_60q.webp。其中 http://cdn.com/image/abc.jpg 是原图链接，@后面是处理参数，具体含义请参看使用手册
步骤1：请求先到达CF，检查CF有缓存则直接返回给用户，并且etag与客户端一致时响应304 Not Modified
步骤2：若CF未命中，则回源到S3获取图片。
步骤3：S3响应后，CF事件会触发给lambda，函数逻辑会对response进行判断：
- 如果http code为正常值，说明缩略图在S3已存在，那么不进行其它处理，直接将response返回
- 步骤5：如果http code为异常值，说明S3没有该图，我们需要做以下处理：
  - 将URI从@开始剥离，前面的为原图KEY，后面的为处理参数。我们使用原图KEY从S3桶（CF事件的request链接可以提取到桶名）获取原图，然后使用处理参数对图片进行处理。这里使用sharp图片处理库(底层使用libvips，比ImageMagic性能要好)。
  - 将处理好的图片存储到S3，以便下次CF失效时，直接回源到S3获取。这里存储到S3时，给图片打了标签（createByLambda:1），方便在S3根据标签制定淘汰规则，避免过多缩略图长期存在S3造成浪费。
  - 将图片以base64编码返回到CF，content-encoding为base64。这里之所以使用base64是因为lambda只支持接收json
步骤4：CF将源头的图片存储起来并响应给用户

前端使用说明

url构成：https://cdn域名/文件名@<参数值1><参数名1>_<参数值2><参数名2>.期望转换的文件格式

例子：https://d1xxxxxxxx.cloudfront.net/foamzou/image/4951f0e35a37e5190e78798dcfcad984.jpg@1020w_160h_0e_1l_70q.webp

参数

w: 指定目标缩略图的宽度。1-4096

h: 指定目标缩略图的高度。1-4096

e: 缩放优先边。0：长边优先，1：短边优先，2：强制按指定宽高缩放。默认为0

l: 目标缩略图大于原图是否处理。如果值是1, 即不处理；是0，表示处理。默认为0

p: 比例百分比。小于100，即是缩小，大于100即是放大。1-1000。如果参数p跟w、h合用时，p将直接作用于w、h （乘以p%）得到新的w、h，例如100w_100h_200p的作用跟200w_200h的效果是一样的。默认为100

q: 质量百分比。1-100。默认为80

r: 是否使用渐进式jpeg。0：不使用，1使用。默认为0。只有在输出格式为jpg时，该参数才会生效。注意：1. 小尺寸图片不建议使用，因为渐进式jpeg会比原图大；2. 能够使用webp尽量使用webp；3. 渐进式展示图片的最佳方案应当是前端同时渲染小图和大图，动画过度到大图

.format 格式转换。目前支持jpg, png, webp。若保留原文件格式，那么 .format 可以不添加

Lambda on Foam 的博客

Best Practices for using Lambda@Edge to process images on AWS

Github

What’s this

在AWS使用Lambda@Edge处理图片的最佳实践

Github

这是什么

本方案涉及到的几个角色

CloudFront

Lambda@edge

S3

工作流程

前端使用说明

参数