MENU

AWS S3 配合 Lambda搭配 CloudFront支持图片裁剪

• 2021 年 12 月 01 日 • 默认分类

描述

这个解决方案可以即时调整你的图片大小,这是它的工作原理

  1. 用户在 url 中指定尺寸(宽度和高度),例如https://www.example.com/images/200x300/demo.png
  2. 如果该对象存在于 S3 存储桶中,则什么都不做并返回它
  3. 如果对象不存在于 S3 存储桶中,则 404 Not Found 响应将返回到 CloudFront 边缘站点,Lambda@Edge 将从 S3 存储桶中获取源图像(例如 images/demo.png)到缓冲区中,调整其大小并存储调整后的大小图像到 S3 存储桶中的相对文件夹(例如图像/200x300)
  4. 图片调整大小存储后,更新状态码为200,返回调整大小的图片
  5. 图像缓存在 CloudFront 边缘位置,所以下次当您调用具有相同维度的相同 url 时,它将从 CloudFront 缓存中返回图像,并且不再访问源

架构图

img

此 Lambda@Edge 的 CloudFront 事件类型:源响应

部署

s3桶的权限里 多加一条,sid 2那条,是cloudfront oai给加的。复制一下,新增一个,把action改成s3:listbucket,resource是桶

image-20211201102130134

进入sar服务搜索resize-picture(都是Lambda的镜像)进入Lambda

image-20211201101353675

在Lambda中创建resize-picture函数部署在us-east-1

image-20211201101113037

sar有两个函数,nodejs或python的选择nodejs

image-20211201101143276

然后发布一个版本

image-20211201101600747

进入cloudfront服务,创建一个cloudfront分配,源站指定为刚才部署sar时填写的s3桶,打开oai并且选择“是请帮我更新策略”

image-20211201101854705

在下面的函数关联里,选择源响应-lambda@edge,arn填写发布过后的lambda函数arn

image-20211201101956848

函数在us-east-1,但不影响桶在us-east-2

访问cloudfront的域名,这样子比较安全,让别人不能绕过cdn去访问s3,还能加个缓存,减少s3的流量费

——————————————

补充

上述方案不支持同比例缩放,我找aws研发团队也已经迭代好了,现在从sar启动的时候,多了一个fittype参数,输入inside就好

之后从cloudfront的url直接输入几百x几百就好了。这个不用输入几百x0

image-20211203140432027

fill改成inside就ok了