Day 31 - 使用 Amazon API Gateway 上传图片到 S3

2024-04-02 23:28:19

Day 31 - 使用 Amazon API Gateway 上传图片到 S3

建立 S3 存储桶 (bucket)，关闭*所有公开存取权，并设定一个资料夹允许对外公开读取。
建立 IAM 的角色：具备执行 Amazon API Gateway 的许可，而且拥有存取 CloudWatch Logs 许可以及读写 S3 存取桶的许可。
建立 Amazon API Gateway 设定使用 PUT 方法上传。

建立 S3 存储桶

进入 Amazon S3 管理控制台，单击左手边的 存储桶，接着单击 建立存储桶 按钮来新增储存桶，注意一下最上方的显示，存储桶的管理是全域的，但是建立时还是需要指定所在地域。

图 1、Amazon S3 管理控制台

存储桶的配置如下：

存储桶名称： yehfishbucket # 存储桶名称必须是全域唯一的而且不得跟他人重复。
AWS 区域： ap-southeast-1 # 根据用户的所在地域来挑选
*所有公开存取权： 不勾选
我确认目前的设定可能导致此存储桶和其内的物件变成公开状态：勾选

图 2、建立存储桶的配置

建立完 yehfishbucket 这个存储桶后，记得修改它的存储桶政策，因为如果打算上传的图片是要提供给一般使用者浏览的，那必须设定成对外公开，所以我们设定存储桶其中一个资料夹具有这样的读取政策，如下图所示，进如 yehfishbucket 存储桶的组态画面中，单击许可页签，找到最下方的存储桶政策，单击编辑，并将底下政策复制上去，就可以让以后每个放在 upload 这个资料夹的档案都具有公开读取的许可了。

{
  "Version":"2012-10-17",
  "Statement":[
    {
      "Sid":"PublicRead",
      "Effect":"Allow",
      "Principal": "*",
      "Action":["s3:GetObject","s3:GetObjectVersion"],
      "Resource":["arn:aws:s3:::yehfishbucket/upload/*"]
    }
  ]
}

图 3、建立存储桶的配置

记得要建立 upload 资料夹，如下图所示。

图 4、建立 upload 资料夹

建立 IAM 的角色

建立一个新角色，作为存取 S3 的许可，进入 IAM 管理控制台，在左手边的功能导览列中选择角色，接着在右手边的主画面中单击 建立角色，如下图所示。

图 5、建立 IAM 角色

首先是选择信任的实体类型，选择 API Gateway ，这是指允许这一个 AWS 服务来担任这个角色，如下图所示。

图 6、替角色选择信任的实体类型

接着是这个角色得到什么许可 (permission)，也就是说，它可以存取哪些 AWS 的资源，这个角色至少需要两个许可，一个是除错用，所以要能够存取 CloudWatch Logs 的许可；另一个则是执行任务用，需要能存取 S3 ，而且需要指定是哪一个存储桶，且能被许可的操作。在新增角色时，只会连接基本的许可，那就是存取 CloudWatch Logs 的许可，如下图所示。

图 7、连接 CloudWatch Logs 的许可

最后再检阅画面中输入角色名称 APIGateway2S3Role ，在单击 建立角色 即可，如下图所示。

图 8、新增角色 APIGateway2S3Role

新增完角色后，在角色列表中，找出 APIGateway2S3Role 这个角色，单击这个角色以进入配置画面，选择许可页签，单击 连接政策 按钮，好进行政策的编修，如下图所示。

图 9、新增角色连接政策

单击上方的 建立政策 按钮，如下图所示。会开启新的标签页，该标签页是作为建立政策之用，并非连接政策许可，所以记得保留此标签页。

图 10、建立自制的政策

在建立政策时需要配置服务、操作、资源和请求条件等四项内容，如下图所示。这次的目标是将图片放置到 S3 中，所以服务选择 S3 ；需要的操作其实只有将图片档案放入 S3 中，但因为考量到可能需要检查是否有重复上传以及需要修改上传后的权限 (access control list, ACL)，所以设定三个操作权限，分别是 GetObject, PutObject, PutObjectAcl ；而我们操作的资源就是先前建立的 yehfishbucket 存储桶，可以透过 新增 ARN 开启设定画面，ARN 是 Amazon Resource Name 的缩写，这是用来存取 Amazon 资源的一个指标，很常会用到。

图 11、政策指定包含服务、操作、资源和请求条件

下图是点击 新增 ARN 后出来的画面，只要输入 Bucket name : yehfishbucket，并在 Object name 后方的勾选方块中进行勾选，系统会自动填入 指定 object 的 ARN 的文字方框。

图 12、指定 S3 资源的 ARN

下图是系统实际上接收到的 JSON 格式的政策规范。

图 13、以 JSON 形式来显示政策规范

设定无误后，只要输入政策名称即可 APIGateway2yehfishbucket_Policy，如下图所示。

图 14、新增政策

图 15、连接政策许可

图 16、确认角色连接政策的设定

建立 Amazon API Gateway

进入 Amazon API Gateway 管理控制台介面，确认左手边的功能导览选单为 API 后，点击右手边的 建立 API 按钮，如下图所示。

图 17、Amazon API Gateway 管理控制台介面

在建立 API 画面中，选择 REST API 类型，并点击建置按钮，如下图所示。

图 18、选择 API 类型

接着选择通讯协定，组态设定如下所示，设定完毕后，点击 建立 API 按钮，如下图所示。

选取您想要建立 REST API 还是 WebSocket API： REST
建立新的 API： 新 API
API 名称： uploadImg2S3
描述： Upload images to S3 bucket
端点类型： 区域性

图 19、选择通讯协定画面

开始设定 API 的资源，在 / 目录下，点击操作选单中，选择 建立资源，设定如下：

资源名称* ： folder
资源路径* ：/ {folder}

设定完毕后点击 建立资源 按钮，如下图所示。

图 20、建立 folder 资源

在 /{folder} 目录下，点击操作选单中，选择 建立资源，设定如下：

资源名称* ： object
资源路径* ：/{folder}/ {object}

设定完毕后点击 建立资源 按钮，如下图所示。

图 21、建立 object 资源

在 /{object} 目录下，点击操作选单中，选择 建立方法，设定如下：

整合类型： AWS 服务
AWS 区域： ap-southeast-1 # 指的是上面所整合的 AWS 服务的所在区域，因为 API Gateway 本来就是区域性的，不需要在这里重新指定
AWS 服务： Simple Storage Service (S3)
HTTP 方法： PUT
动作类型： 使用路径覆写
路径覆写 (选择性)： {bucket}/{key} # 很重要
执行角色： arn:aws:iam::950646218716:role/APIGateway2S3Role # 这是上一个步骤所建立的角色，必须指定 ARN
内容处理：传递

设定完毕后点击储存按钮，如下图所示。

图 22、在 object 资源下建立 PUT 方法

建立好 PUT 方法后，会出现以下这个画面，Day 30 - 实作 Amazon API GateWay 整合 AWS Lambda 与 Dynamodb 这篇文章有介绍 API Gateway 和 AWS 服务的整合架构，这里需要设定整合请求，将 PUT 请求的参数，转换为 S3 的参数。

图 23、确认角色连接政策的设定

进入整合请求画面后，请在 URL 路径参数中进行设定，S3 存取的方式是要指定存储桶 (bucket) 与要存放的档案名称 (key)，而透过 PUT 方法传进来的参数则分别是 folder 和 object，所以在这个画面中进行设定，如下图所示。

bucket： method.request.path.folder
key： method.request.path.object

图 24、整合请求进行 URL 路径参数设定

接着在左走边的功能选单中，点选设定，进行二进位媒体类型的设定，为了让各种形态的文件都可以上传，所以选择 */* （所有类型），如下图所示。

图 25、二进位媒体类型的设定

所以设定完毕后，要将这个 API Gateway 部署起来，让所有人可以使用，在资源 / 中，点击操作选单，选择 部署 API，在弹出画面中，设定如下：

部署阶段： 新阶段
阶段名称： v1 # 自定

设定完成后，点击部署即可，如下图所示。

图 26、部署 API

部署成功后可以在阶段选单中，找到呼叫的 URL ，如下图所示

图 27、部署成功后的呼叫 URL

接着只要在 Advanced REST Client (ARC)中进行测试就可以，如下图所示，选择 PUT 方法；网址列中除了 API Gateway 的呼叫 URL 外，还要加上 S3 的存储桶的名称 yehfishbucket，以及要存放的档名 123.jpg；在 BODY 页签中，选择 FILE 类型，选择一个档案，注意必须要是 jpg 格式，因为存档的档名已经命名为 123.jpg 了，最后按下送出即可，观察回应 (Response) 讯息是 200，那表示以将成功执行。

图 28、确认角色连接政策的设定

来到 S3 控制台，可以发现档案已经成功上传，如下图所示。

图 29、确认角色连接政策的设定

参考资料

How do I upload an image file to Amazon S3 through API Gateway?, https://aws.amazon.com/tw/premiumsupport/knowledge-center/api-gateway-upload-image-s3/
存储桶政策范例， https://docs.aws.amazon.com/zh_tw/AmazonS3/latest/userguide/example-bucket-policies.html
Uploading to Amazon S3 directly from a web or mobile application, https://aws.amazon.com/tw/blogs/compute/uploading-to-amazon-s3-directly-from-a-web-or-mobile-application/
S3 presigned URLs with SAM, auth and sample frontend, https://github.com/aws-samples/amazon-s3-presigned-urls-aws-sam
Serverless File Uploads using S3 and Lambda, https://www.youtube.com/watch?v=mw_-0iCVpUc

码农公寓

Day 31 - 使用 Amazon API Gateway 上传图片到 S3

参考资料