A solution to dynamically handle images on the fly, utilising Sharp. To deploy a version without any customisation there is a ready to use version, additional details and documentation are available here.
The original repo can be found here. The documentation and readme of the original repos is really minimal so I've attempted a restructure below.
The Amazon CloudFormation template has been heavily modified as well to remove a bunch of unused services that were being installed. At the moment this template will set up: CloudFront, API Gateway, and a single Lambda function.
To deploy the script you need two Amazon S3 buckets. One bucket will contain the code distributable and the CloudFormation template. The other will contain the images that will be served.
-
Configure the bucket name of your target Amazon S3 distribution bucket. Note: This requires two buckets, one named 'my-bucket-name' from which the images will be served and another 'my-deploy-bucket' for the code distributable. Also, the assets in the buckets should be publicly accessible.
-
Navigate to the deployment folder and build the distributable
cd serverless-image-handler/deployment
sudo ./build-s3-dist.sh MY_DEPLOY_BUCKET VERSION
- The build script will automatically upload the distributable to the 'my-deploy-bucket'. Note: you can also auto-deploy the stack to CloudFormation with this script or auto-update an lambda that has already been deployed, check the comments in
deployment/build-s3-dist.sh
. - If you've chosen to have the script automatically deploy the CloudFormation stack you are done! Wait a couple of minutes for all the components to be prepared and go to the CloudFormation console to fetch your API endpoint under the
Outputs
tab.
If you choose to do the deployment manually follow these steps:
- Get the link of the serverless-image-handler.template uploaded to your Amazon S3 bucket (ie. 'my-deploy-bucket').
https://my-deploy-bucket.s3.amazonaws.com/my-version/serverless-image-handler.template
- Deploy the Serverless Image Handler solution by launching a new AWS CloudFormation stack. This may take a couple of minutes.
- Done!
If you've already deployed the template and just want to update the Lambda function code do the following:
- Go to the Lambda Management Console
- Under
Function code
, selectupload a file from Amazon S3
asCode entry type
- Enter the link of the image-handler.zip distribution
https://my-deploy-bucket.s3.amazonaws.com/my-version/image-handler.zip
- Hit
Save
up top and then underActions
selectPublish new version
- Done!
After creating the CloudFormation stack the image handler has an endpoint that accepts base64 encoded JSON objects describing Sharp functions.
- Build the url by defining a JSON object of the required edits
const request = {
"bucket": "my-bucket",
"key": "some-img.jpg",
"edits": {
"resize": {
"width": 200,
"height": 200
}
}
}
- Encode the object in base64
const jsonString = JSON.stringify(request)
const request = btoa(jsonString)
console.log(request)
// Result: eyJidWNrZXQiOiJteS1idWNrZXQiLCAia2V5Ijoic29tZS1pbWcuanBnIiwgImVkaXRzIjogeyJyZXNpemUiOiB7IndpZHRoIjogMzAwLCAiaGVpZ2h0IjogMzAwIH19fQ==
- Now use the base64 encoded string to access the image!
https://my-cloud-front.cloudfront.net/eyJidWNrZXQiOiJteS1idWNrZXQiLCAia2V5Ijoic29tZS1pbWcuanBnIiwgImVkaXRzIjogeyJyZXNpemUiOiB7IndpZHRoIjogMzAwLCAiaGVpZ2h0IjogMzAwIH19fQ==
- Clone this repo
- Copy the example setting files and fill out the placeholders
- Install the vagrant box, it pre-installs all the necessary libraries
vagrant up
vagrant ssh
- Make the desired code changes
- Run unit tests to make sure added customisation passes the tests
cd ./source
npm test
- Test your code by running
sudo serverless offline
, serverless will create an endpoint at localhost:8080 on your host machine, see basic usage on how to interact with the image handler - Deploy the CloudFormation stack! see installation notes