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…