【原創】aws s3 lambda縮略圖生成

參考資料：

https://github.com/sagidm/s3-resizer

https://aws.amazon.com/cn/blogs/compute/resize-images-on-the-fly-with-amazon-s3-aws-lambda-and-amazon-api-gateway/

https://medium.com/swlh/how-to-get-started-with-aws-lambda-9f2ac14d863a

https://www.obytes.com/blog/2019/image-resizing-on-the-fly-with-aws-lambda,-api-gateway,-and-s3-storage/

https://heropy.blog/2019/07/21/resizing-images-cloudfrount-lambda/

and so on...

 

1. 創建S3桶

https://s3.console.aws.amazon.com/s3/home?region=ap-northeast-2

點擊“創建存儲桶”，輸入名稱（假如叫做n-test-2），選擇區域。

設置權限：

• 取消勾選“阻止所有公共訪問”
• 存儲桶策略輸入如下代碼：

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AddPerm",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::n-test-2/*"
        }
    ]
}

 

2. 創建Lambda函數

https://ap-northeast-2.console.aws.amazon.com/lambda/home?region=ap-northeast-2#/functions

點擊“創建函數”，輸入函數名稱（假設叫做resize-func），運行語言選擇“Node.js 8.10”（因為目前可用的demo包就是nodejs8.1的版本）

展開“權限”部分，創建自定義角色，跳轉到IAM控制台：

創建策略，跳轉到新頁面：

JSON里面輸入如下內容：

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "logs:CreateLogGroup",
                "logs:CreateLogStream",
                "logs:PutLogEvents"
            ],
            "Resource": "arn:aws:logs:*:*:*"
        },
        {
            "Effect": "Allow",
            "Action": "s3:PutObject",
            "Resource": "arn:aws:s3:::n-test-2/*"
        }
    ]
}

注意上面的 Resource里面是桶名稱。

下一步，輸入一個名稱，比如resize-policy，然后點擊創建。

 

回到創建角色頁面，搜索剛才創建的策略並選中：

然后再搜索AmazonS3FullAccess，並選中：

點擊下一步，再下一步，輸入角色名稱（假設resize-role），點擊“創建角色”。

 

回到創建函數頁面，選擇“使用現有角色”，選擇剛才創建的角色：

然后點擊右下角 創建函數。

 

 

3. 添加觸發器

選擇 API Gateway:

創建新 API：

安全性：打開

點擊添加。

 

回到主界面，復制API 終端節點：

https://qzdp929f68.execute-api.ap-northeast-2.amazonaws.com/default/resize-func

 

4. 桶靜態網站托管配置：

回到桶設置中，屬性，靜態網站托管：

• 索引文檔：index.html
• 錯誤文檔：error.html
• 重定向規則：

<RoutingRules>
  <RoutingRule>
    <Condition>
      <KeyPrefixEquals/>
      <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
    </Condition>
    <Redirect>
      <Protocol>https</Protocol>
      <HostName>qzdp929f68.execute-api.ap-northeast-2.amazonaws.com</HostName>
      <ReplaceKeyPrefixWith>default/resize-func?path=</ReplaceKeyPrefixWith>
      <HttpRedirectCode>307</HttpRedirectCode>
    </Redirect>
  </RoutingRule>
</RoutingRules>

注意上面的 HostName 和 ReplaceKeyPrefixWith 內容分別為剛才復制的API終端節點的值。

• 復制上面的終端節點：http://n-test-2.s3-website.ap-northeast-2.amazonaws.com

 

 

5. 環境變量配置

BUCKET=桶名稱

URL=剛才復制的終端節點URL

右上角保存。

 

6. 上傳函數代碼.

從這里下載nodejs8.1的函數包：https://github.com/sagidM/s3-resizer/releases

函數代碼部分，選擇“上傳.zip文件”

右上角保存。

 

7. 配置測試事件（可選）

{
  "queryStringParameters": {
    "path": "300x300/pic2.jpg"
  }
}

注意有個細節：300x300，是字母x，不是乘號(×)

此時訪問原圖： http://n-test-2.s3-website.ap-northeast-2.amazonaws.com/pic2.jpg

運行測試，會生成300*300的縮略圖：

http://n-test-2.s3-website.ap-northeast-2.amazonaws.com/300x300/pic2.jpg