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

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

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

建立 S3 储存贮体

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

https://ithelp.ithome.com.tw/upload/images/20211005/20129510WR88uXiyuA.png
图 1、Amazon S3 管理控制台

储存贮体的配置如下:

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

https://ithelp.ithome.com.tw/upload/images/20211005/20129510ue45oZJtL8.png
图 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/*"]
    }
  ]
}

https://ithelp.ithome.com.tw/upload/images/20211005/20129510lkInz2hOTY.png
图 3、建立储存贮体的配置

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

https://ithelp.ithome.com.tw/upload/images/20211005/20129510uVbTq9jCs0.png
图 4、建立 upload 资料夹

建立 IAM 的角色

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

https://ithelp.ithome.com.tw/upload/images/20211005/20129510us4ceIbtKB.png
图 5、建立 IAM 角色

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

https://ithelp.ithome.com.tw/upload/images/20211005/20129510REUTmlCNhn.png
图 6、替角色选择信任的实体类型

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

https://ithelp.ithome.com.tw/upload/images/20211005/20129510jRrZAZInAx.png
图 7、连接 CloudWatch Logs 的许可

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

https://ithelp.ithome.com.tw/upload/images/20211005/20129510fguzkiTYUo.png
图 8、新增角色 APIGateway2S3Role

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

https://ithelp.ithome.com.tw/upload/images/20211005/20129510uJJg5S4bBS.png
图 9、新增角色连接政策

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

https://ithelp.ithome.com.tw/upload/images/20211005/20129510G1oiCoLeIZ.png
图 10、建立自制的政策

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

https://ithelp.ithome.com.tw/upload/images/20211005/20129510xBrQF6hOt2.png
图 11、政策指定包含服务、操作、资源和请求条件

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

https://ithelp.ithome.com.tw/upload/images/20211005/20129510GILDIEI41u.png
图 12、指定 S3 资源的 ARN

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

https://ithelp.ithome.com.tw/upload/images/20211005/20129510gkMkoVovzp.png
图 13、以 JSON 形式来显示政策规范

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

https://ithelp.ithome.com.tw/upload/images/20211005/20129510y3v88bX7h1.png
图 14、新增政策

https://ithelp.ithome.com.tw/upload/images/20211005/20129510G3yI4cde90.png
图 15、连接政策许可

https://ithelp.ithome.com.tw/upload/images/20211005/20129510riUg8rbfQZ.png
图 16、确认角色连接政策的设定

建立 Amazon API Gateway

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

https://ithelp.ithome.com.tw/upload/images/20211005/201295101YUxJw2YqZ.png
图 17、Amazon API Gateway 管理控制台介面

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

https://ithelp.ithome.com.tw/upload/images/20211005/20129510cM167yupwk.png
图 18、选择 API 类型

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

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

https://ithelp.ithome.com.tw/upload/images/20211005/201295109Bp6guuM7V.png
图 19、选择通讯协定画面

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

  • 资源名称* : folder
  • 资源路径* :/ {folder}

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

https://ithelp.ithome.com.tw/upload/images/20211005/20129510NKPGriEp33.png
图 20、建立 folder 资源

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

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

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

https://ithelp.ithome.com.tw/upload/images/20211005/20129510T99HdZEtuY.png
图 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
  • 内容处理: 传递

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

https://ithelp.ithome.com.tw/upload/images/20211005/20129510xlWX2O34YK.png
图 22、在 object 资源下建立 PUT 方法

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

https://ithelp.ithome.com.tw/upload/images/20211005/20129510g6uQ9GONkt.png
图 23、确认角色连接政策的设定

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

  • bucket: method.request.path.folder
  • key: method.request.path.object

https://ithelp.ithome.com.tw/upload/images/20211005/201295105dMZnHd8kU.png
图 24、整合请求进行 URL 路径参数设定

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

https://ithelp.ithome.com.tw/upload/images/20211005/2012951032sjfT40Zc.png
图 25、二进位媒体类型的设定

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

  • 部署阶段: 新阶段
  • 阶段名称: v1 # 自定

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

https://ithelp.ithome.com.tw/upload/images/20211005/20129510O8kkPIVe4H.png
图 26、部署 API

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

https://ithelp.ithome.com.tw/upload/images/20211005/20129510vzGnXWioFR.png
图 27、部署成功後的呼叫 URL

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

https://ithelp.ithome.com.tw/upload/images/20211005/20129510V1n7oBgY9d.png
图 28、确认角色连接政策的设定

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

https://ithelp.ithome.com.tw/upload/images/20211005/20129510cYCEOT6odF.png
图 29、确认角色连接政策的设定

参考资料


<<:  Day26条件运算式if... else(JavaScript)

>>:  网路资源

Day 26 - styled-components 笔记1

Q_Q .. styled.div 产生一个 div,写 css style,放进变数里变成 co...

DAY18聚类演算法(kmeans)

昨天介绍完kmeans演算法,今天就要实际写程序: 首先先创建一笔资料并绘图: 程序如下: impo...

[使用者提问的问题]请问一下, 用VPN连入,\\电脑名称 找不到 \\ip 可以用 请问是什麽原因?

答: 查对方电脑名称的条例有 DNS WINS NetBIOS over vpn tcp/ip LM...

[10] 撰写自己的 console.log

现在开始建立介面前有一个重要的事情要做 就是单纯的 console.log 到画面上少了很多科技感 ...

D28: 工程师太师了: 第14.5话

工程师太师了: 第14.5话 杂记: 伫列(queue)是一种利用FIFO(First In Fir...