Skip to content

A solution to dynamically handle images on the fly, utilizing SharpJS

License

Notifications You must be signed in to change notification settings

granodigital/serverless-image-handler

 
 

Serverless Image Handler | 🚧 Feature request | 🐛 Bug Report | ❓ General Question

Note: If you want to use the solution without building from source, navigate to Solution Landing Page.

Table of Contents

Solution Overview

This is Grano's customized implementation of the serverless-image-handler. This fork of the original solution was created so we can implement more aggressive optimizations to get around AWS Lambda's 6 MB limit, which is easily surpassed with our images.

The original code and folder structure has been retained as much as possible, in order to avoid conflicts when updating this repo in the future. Scripts have been added to deploy this stack to Grano's AWS resources.

The Serverless Image Handler solution helps to embed images on websites and mobile applications to drive user engagement. It uses Sharp to provide high-speed image processing without sacrificing image quality. To minimize costs of image optimization, manipulation, and processing, this solution automates version control and provides flexible storage and compute options for file reprocessing.

This solution automatically deploys and configures a serverless architecture optimized for dynamic image manipulation. Images can be rendered and returned spontaneously. For example, an image can be resized based on different screen sizes by adding code on a website that leverages this solution to resize the image before being sent to the screen using the image. It uses Amazon CloudFront for global content delivery and Amazon Simple Storage Service (Amazon S3) for reliable and durable cloud storage.

For more information and a detailed deployment guide, visit the Serverless Image Handler solution page.

Deployment

The solution uses cdk to deploy the stack. The following steps are required to deploy the stack:

  • For new AWS accounts only: npx cdk bootstrap --profile <ADMIN_PROFILE>
  • Authenticate AWS CLI as shared-developer role.
  • Create a change set ./scripts/stack.sh deploy
  • Login to AWS console with admin role and execute the changeset or ask an admin to do it.

Updating

  • git pull upstream main - Pull the latest changes from the upstream repo
  • You can run ./scripts/stack.sh diff to see the changes before deploying.
  • Otherwise the steps are the same as Deployment steps above.

Architecture Diagram

Architecture Diagram

The AWS CloudFormation template deploys an Amazon CloudFront distribution, Amazon API Gateway REST API, and an AWS Lambda function. Amazon CloudFront provides a caching layer to reduce the cost of image processing and the latency of subsequent image delivery. The Amazon API Gateway provides endpoint resources and triggers the AWS Lambda function. The AWS Lambda function retrieves the image from the customer's Amazon Simple Storage Service (Amazon S3) bucket and uses Sharp to return a modified version of the image to the API Gateway. Additionally, the solution generates a CloudFront domain name that provides cached access to the image handler API.

AWS CDK and Solutions Constructs

AWS Cloud Development Kit (AWS CDK) and AWS Solutions Constructs make it easier to consistently create well-architected infrastructure applications. All AWS Solutions Constructs are reviewed by AWS and use best practices established by the AWS Well-Architected Framework. This solution uses the following AWS Solutions Constructs:

In addition to the AWS Solutions Constructs, the solution uses AWS CDK directly to create infrastructure resources.

Customizing the Solution

Prerequisites for Customization

1. Clone the repository

git clone https://github.com/aws-solutions/serverless-image-handler.git
cd serverless-image-handler
export MAIN_DIRECTORY=$PWD

2. Unit Test

After making changes, run unit tests to make sure added customization passes the tests:

cd $MAIN_DIRECTORY/deployment
chmod +x run-unit-tests.sh && ./run-unit-tests.sh

3. Build and Deploy

cd $MAIN_DIRECTORY/source/constructs
npm run clean:install
overrideWarningsEnabled=false npx cdk bootstrap --profile <PROFILE_NAME>
overrideWarningsEnabled=false npx cdk deploy\
 --parameters DeployDemoUIParameter=Yes\
  --parameters SourceBucketsParameter=<MY_BUCKET>\
   --profile <PROFILE_NAME>

Note:

  • MY_BUCKET: name of an existing bucket in your account
  • PROFILE_NAME: name of an AWS CLI profile that has appropriate credentials for deploying in your preferred region

Collection of operational metrics

This solution collects anonymous operational metrics to help AWS improve the quality and features of the solution. For more information, including how to disable this capability, please see the implementation guide.

External Contributors

License

Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. SPDX-License-Identifier: Apache-2.0

About

A solution to dynamically handle images on the fly, utilizing SharpJS

Resources

License

Code of conduct

Security policy

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 95.1%
  • HTML 2.4%
  • JavaScript 1.3%
  • Other 1.2%