Image resizer and change format using AWS Lambda, API Gateway, Serverless, Sharp, NodeJS, CloudFront and S3
Forked from MuhammadReda Image resizer
An AWS Lambda Function to resize S3 images using Node.js on the fly.
A detailed, screenshot-ed, step-by-step guide can be found here.
- User requests an image from the API Gateway.
- API Gateway triggers the Lambda Function.
- Lambda function runs basic validations on user input.
- The function checks if a resized image exists on S3 Bucket.
- If a resized image exists, image returned as a response to the API Gateway.
- If no resized image found, a new resized option is created on the fly and saved to S3 Bucket.
- Resized image is returned as a response to the API Gateway.
- AWS Console root access.
- OR, AWS Console full access to the four AWS Services above.
-
Setup S3 Bucket.
- Open AWS Console and go to S3 Home.
- Click on
Create bucket
button. - Choose a name and a region for your new bucket.
- Keep a note of the bucket name, we will need it later.
- Uncheck
Block all public access
option. - Click on
Create bucket
.
-
Setup CloudFront.
- Open AWS Console and go to CloudFront Home.
- Click on
Create Distribution
button. - Select
Get Started
underWeb
section. - Enter a name for your new distribution.
- Select
Origin Domain Name
from the dropdown. - Enter your S3 bucket name.
- Click on
Create Distribution
. - Wait for the distribution to be created.
-
Configure Domain.
- Open AWS Console and go to Route 53 Home.
- Enter your domain name in the search box.
- Click on
Create Record Set
button. - Enter your domain name in the
Name
field. - Select
CNAME
from theType
dropdown. - Enter your CloudFront URL in the
Value
field. - Click on
Create
.
-
Configure Serverless
- Login Serverless
- Click on
Create new application
. - Enter a name for your new application.
- Click on
Create
.
-
Configure Serverless on your local machine.
- Install Serverless on your local machine.
- Open terminal and run
serverless login
. - Enter your Serverless credentials.
- Run
serverless config credentials --provider aws --key {aws_access_key_id} --secret {aws_secret_access_key}
. - Replace
{aws_access_key_id}
and{aws_secret_access_key}
with your AWS credentials. - Change serverless.yml file.
- Replace
org
value with your Serverless organization name. - Replace
app
value with your Serverless application name. - Replace
CLOUD_FRONT_URL
value with your CloudFront URL. - Replace
CLOUD_FRONT_URL_WITH_DOMAIN
value with your CloudFront URL alias domain. - Replace
BUCKET_NAME
value with your S3 bucket name.
- Replace
-
Deploy Serverless application.
- Run
serverless deploy
. - Wait for the deployment to finish.
- Copy the API Gateway URL from the terminal.
- Open AWS Console and go to API Gateway Home.
- Click on
Stages
under your API Gateway. - Click on
prod
stage. - Click on
Save
. - Click on
Deploy API
. - Click on
Deploy API
. - Click on
Actions
- Run
-
Configure S3 static website hosting.
- Open AWS Console and go to S3 Home.
- Click on your S3 bucket.
- Click on
Properties
tab. - Click on
Static website hosting
section. - Click on
Edit
. - Static website hosting:
Enable
. - Hosting type:
Host a static website
. - Index document:
index.html
. - Error document:
error.html
. - Redirection rules:
[ { "Condition": { "HttpErrorCodeReturnedEquals": "404", "KeyPrefixEquals": "" }, "Redirect": { "HostName": "Your Lambda API Gateway URL", "HttpRedirectCode": "307", "Protocol": "https", "ReplaceKeyPrefixWith": "default/s3-resize?path=" } } ]
- Click on `Save`.
-
Finally, resize images using AWS Lambda!
- Resized image URL structure:
# Resize using Width and Height. {CLOUD_FRONT_URL_WITH_DOMAIN}/{width}x{height}_max_webp/{s3_object_path} # example: https://image.example.com/AUTOxAUTO_max_webp/image.png