resize hình ảnh với amazon-s3 aws-lambda và amazon api-gateway

1. Vấn đề về resize ảnh trong s3

Để tối ưu image và tăng tốc độ load web, chúng ta cần phải tối ưu lại dung lượng của ảnh và kích thước của nó. Điều này đã được amazon s3 hỗ trợ khá là đầy đủ. Về cơ bản khi ta có link s3 public, nếu có quyền sửa ảnh và muốn chỉnh kích thước, thì chỉ cần thêm width, height trên url. amzon s3 sẽ tự sinh ra một thư mục ảnh với kích thước ảnh như vây. Nhưng việc config s3 về quyền và các bước thì cũng khá là dài và sẽ được nói đến ở dưới đây.

2. Config với S3

step 1: trong S3 console, tạo một S3 bucket name. (url: https://console.aws.amazon.com/s3) 3340_1 step 2: upload image test, điều này để chúng ta test quyền. 3340_2 step 3: Chọn Permissions, Add Bucket Policy. Add a bucket policy to allow anonymous access. 3340_3 -generate policy 3340_4

  • copy phần bucket policy 3340_5

step 4: Chọn Static Website Hosting, Enable website hosting và mục Index Document nhập index.html. 3340_6 step 5: Note lại bucket name chúng ta đã tạo và hostname của phần Endpoint.

3. Tạo Lambda function:

step 1: Trong Lambda console, chọn Create a Lambda function, Blank Function. 3340_2_1 3340_2_2 step 2: Để chọn integration, hãy chọn hình vuông chấm và chọn API Gateway. step 3: Để cho phép tất cả người dùng gọi phương thức API, trong Security, chọn Open và sau đó Next. 3340_2_3 step 4: Ở phần Name, chọn resize. phần Code entry type, chọn Upload a .ZIP file. step 5: Chọn Function package và upload the .ZIP file (file này là code đã được amazon xử lý, có thể custom lại nó để phù hợp với chức năng project) function.zip 3340_2_4 step 6: To configure your function, ở phần Environment variables, thêm 2 giá trị Với Key nhập BUCKET, phần giá trị nhập bucket name đã tạo ở trên phần Key thứ 2, nhập URL, và giá trị là endpoint field mà chúng ta đã note lại ở trên, prefixed with http://. 3340_2_5

step 7: set quyền: mục Role, chọn Create a custom role. chọn View Policy Document, Edit, Ok. 3340_2_6 3340_2_7

step 8: thay thế YOUR_BUCKET_NAME_HERE với tên của bucket name đã tạo và copy code như dưới đây. Phần này không được để trống

{
  "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:::__YOUR_BUCKET_NAME_HERE__/*"    
    }
  ]
}

step 9: mục Memory, chọn 1536. mục Timeout nhập giá trị 10 sec. Next và Create function. step 10: Chọn Triggers và ghi lại hostname trong URL function của bạn. 3340_2_8

4. Cài đặt redirect rule s3

step 1: Trong S3 console, mở bucket đã tạo. step 2: Mở Static Website Hosting, Sửa lại Redirection Rules. step 3: thay thế YOUR_API_HOSTNAME_HERE với hostname mà chúng ta đã note lại ở trên và sửa code như ở dưới để config cho Redirection Rules.

<RoutingRules>
    <RoutingRule>
        <Condition>
            <KeyPrefixEquals/>
            <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
        </Condition>
        <Redirect>
            <Protocol>https</Protocol>
            <HostName>4zfx8xas03.execute-api.us-east-1.amazonaws.com</HostName>
            <ReplaceKeyPrefixWith>prod/fc-pook-resize-image?key=</ReplaceKeyPrefixWith>
            <HttpRedirectCode>307</HttpRedirectCode>
        </Redirect>
    </RoutingRule>
</RoutingRules>

3340_2_9

step 10: ấn vào LambdaMicroservice 3340_2_10 redirect 3340_2_11

step 11: thêm key vào Method Request 3340_2_12

step 12: thêm role của iam service 3340_2_13 step 13: 3340_2_14 3340_2_14_1 kết quả: (link endpoint + image_name) http://pook-resize-image.s3-website-us-east-1.amazonaws.com/100x100/IMG_0563.JPG => s3 sẽ tự động tạo thư mục 100x100 3340_2_17

5. Kết luận

Amazon s3 hỗ trợ chúng ta rất tốt trong việc xử lý ảnh để tối ưu cho project của mình. Cũng chính vì thế mà tài liệu khá dài và phức tạp, hi vọng qua bài viết này thì đối với những người mới bắt đầu, sẽ cài đặt dễ dàng hơn.

6. Tài liệu tham khảo

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


All Rights Reserved