Images Resizing From S3 Using Lambda Function and CloudFront

Change the image size on the fly from S3 Object, also using CDN for serving the image.

Story: Images are store in S3. The recruitment is view any image any size on the fly and send to the response using recommend size. The resizing image will serve at CDN using CloudFront.

Lambda Function Deployment

For lambda function i use Serverless Apps. 1st need to create a node package.

npm init

Output

{
  "name": "image-resizer-function",
  "version": "1.0.0",
  "description": "Image Resizer Function",
  "main": "index.js",
  "keywords": [],
  "author": "",
  "license": "ISC",
}

Now install serverless

npm install serverless -g

After install the serverless. Create a Serverless app, At terminal

serverless

Select HTTP API.

Project created.

Now adding the code to that index.js

At Lambda Function Preview

Here added 2 packages. So need to add 2 layer at Lambda Function.

If you deploy this project that project will get Internal Server Error. Now we can deploy this function. Then add the layer to that function.

Lambda Function Deployment

Here the Serverless yaml config

service: aws-node-http-api-project
frameworkVersion: '3'
provider:
  name: aws
  runtime: nodejs18.x
  region: us-east-1
functions:
  api:
    handler: index.handler
    events:
      - httpApi:
          path: /{pathA}
          method: get
      - httpApi:
          path: /{pathA}/{pathB}
          method: get
      - httpApi:
          path: /{pathA}/{pathB}/{pathC}
          method: get

Need to run this at terminal

serverless deploy 

Output

The AWS Lambda Console

Here a Serverless add a API Gateway. Now adding a S3 Bucket with Lambda Function.

S3 Bucket Creating and Manage

Here the bucket name is img-resizer-v1

The Object Ownership ACLs Enabled*.*

Allow Public Access.

Creating Done.

Now edit the bucket policy

Bucket > img-resizer-v1 > Edit Bucket Policy

{
    "Version": "2012-10-17",
    "Statement": [        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:*",
            "Resource": "arn:aws:s3:::img-resizer-v1/*"
        }
    ]
}

Now uploading some images at Buckets.

Connecting Lambda function with S3

Click Add Trigger

Select S3

Select the Selected bucket. Then Click Add

Add Layer

Now Add Layer at the function. At the bottom get the layer section.

Click Add Layer. At Choose a layer select Custom Layers.

Note: Now you add the layer i will share later.

Add aws-sdk and sharp with this layer.

At Function 2 Layer added.

Testing

Now test the Lambda Function. At the Configuration Tab. Select Triggers. You will see the API Gateway. There you will find a API Endpoint

For testing view the image from API Gateway link.

For testing the image resizing. Given the image size width is 500px

https://u4kqo8jrjd.execute-api.us-east-1.amazonaws.com/image.png?w=500

Working 😁. I think it will return some error 😅.

Now Applying CloudFront with Lambda Function

Applying Cloudfront CDN

Creating a Distributions.

Select Origin Domain, which is given URL by API Gateway

u4kqo8jrjd.execute-api.us-east-1.amazonaws.com

Protocol is HTTPS only.

At Default cache behavior, Viewer protocol policy is HTTPS Only.

At Cache key and origin requests, Cache policy is Caching Optimized

For creating image resizing parameter need to create a cache policy and origin request policy.

Goto Policy Tab, Creating cache policy and origin request policy

Then click Origin Request Tab. Create origin request policy

Click Create Button.

At CloudFront page click refresh button, newly created policy will show there,

At Web Application Firewall (WAF) Select Do Not Enable Security Protections

At Settings, if you wanted to add domain, you need to create a Certificate, then add the sub-domain with CloudFront.

Goto AWS Certificate Manager > Certificates

Give the Domain Name

image-resizer.arn-ob.xyz

Click Request.

Click Certificate ID

Add the DNS to CNAME name and value to Cloudflare

Click Save. It will take some time to validate the Domain. Now it status is Pending Validation.

After 2–3 min. It will issued.

Now add the sub-domain to CloudFront

All Done. Click Create Distribution. Now it will take 5–10 min for deploying CDN.

Now connect the sub-domain with CloudFront.

Domain mapping done with CloudFront CDN.

Tesitng

Original Image

Resizing Image

Image Resizing Done. 😁

So here we use CloudFront CDN, Now testing the image return response time.

Here CloudFront CDN working Good. 😁

The project repository:
https://github.com/arn-ob/aws-img-resizer-s3-lambda-cdn

Thank you for Reading…