Skip to content

Lambda function to generate a source set of images with different sizes to improve responsive performance and speed up page loading time

License

Notifications You must be signed in to change notification settings

kbardi/srcSet-generator

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

To use this Lambda function you need to do first:

Create execution role

  1. Open roles page in AWS IAM console.
  2. Choose Create Role.
  3. Create a role with the following properties:

Trusted entity – AWS Lambda. Permissions – AWSLambdaExecute. Role name – lambda-s3-role.

Create a bucket on S3, or use a bucker you've already created.

Please consider to use 2 buckets, one for original src images, and another one for generated images. If you use the same bucket for both things, you have to add a validation to not consider new images as a trigger for your function, or you could have an infinite loop. (it happened to me)

The function is the one you can see in index.js file

  • We use sharp to generate images with different formats and sizes.
  • We use aws-sdk to get original uploaded image (getObject), and to upload (putObject) the image in the new bucket.
  • Before we start, we need to install sharp as an external library. If you are using Linux you can run directly npm install sharp but if you are on macOS you need to run npm install --arch=x64 --platform=linux sharp as it recommends ins Sharp docs
  • The first thing we need to do is get bucket name and file name from the file which triggered the function. It comes on event property.
  • After that we have to check it has a type, and that type is an image type (jpg or png)
  • As I said before, we get the object buffer (originImage) using aws-sdk.
  • We specify a list of widths we want to convert the image. In this case we convert to mobile, tablet, small laptop and widescreen sizes.
  • Using sharp we convert the image to all those sizes, and one more for webp format.
  • Once we have all the images generated, we need to upload them to a different bucket, or the same, it depends on your requirements.

Upload function to Lambda function in AWS

Now we have the function as we want to use it, so it is time to upload it to AWS and test it...

  1. We need to generate a zip with our project (including node_modules). The easiest way is running zip -r function.zip . if you are positioned inside the project. It will generate a function.zip file
  2. Now you need to configure aws cli in your computer if you didn't do it before. Follow AWS instructions for it.
  3. Now you can create your Lambda function running this command
aws lambda create-function --function-name srcSet-Generator \
--zip-file fileb://function.zip --handler index.handler --runtime nodejs12.x \
--timeout 300 --memory-size 1024 \
--role arn:aws:iam::GENERATED_ROLE_ID:role/lambda-s3-role --region REGION_STRING

where we use:

  • srcSet-Generator: Name of our new Lambda function, use the name that you want.
  • fileb://function.zip: It is the name we use in the first step for our zip file. In some cases you need to use absolute path, and if you use a different name for your zip, please update this also in here.
  • index.handler: It is our index.js file, we need to specify index is the default file to be loaded.
  • nodejs12.x: We use node version 12.x, you can change that if you want, but I'm not sure if it is compatible with other versions.
  • --timeout 300: We specify the function could be running for 30 seconds...of course it should take less than that, so you can use 10 if you want to give the function only 1 second to run.
  • --memory-size 1024: I think it is a good default, and it is more than enough for our process.
  • --role arn:aws:iam::GENERATED_ROLE_ID:role/lambda-s3-role: BE CAREFUL WITH THIS...here we use at the end the name of the role we created at the beginning of the process. After we created, the role has an automatic id generated by AWS, and we need to replace GENERATED_ROLE_ID by the one you can see inside roles section.
  • --region REGION_STRING: Region for Lambda function (e.g. us-east-1, ap-southeast-2, eu-west-2)

Adds permissions to your Lambda function

aws lambda add-permission --function-name srcSet-Generator --principal s3.amazonaws.com \
--statement-id s3invoke --action "lambda:InvokeFunction" \
--source-arn arn:aws:s3:::BUCKET_NAME \
--source-account ACCOUNT_ID --region REGION_STRING
  • --source-arn arn:aws:s3:::BUCKET_NAME: Bucket name is just the name of the bucket you will use to trigger the function.
  • --region REGION_STRING: Region for Lambda function (e.g. us-east-1, ap-southeast-2, eu-west-2)

To get account id you can search in the console UI, or run this command aws sts get-caller-identity

Configure trigger for our Lambda function

In our AWS console, we can specify the trigger for our function.

  1. First we click on + Add trigger
  2. Then choose S3 (AWS Storage)
  3. Select the bucket you want to get the changes.
  4. Event type should be All object create events, so every element is created in the bucket will trigger our function.
  5. Click on Add button.

image

Test Lambda Function

You can upload a file in your bucket, and the function will run...so how do you know the process run correctly?

  • First, you can check in your second bucket the images have been generated.
  • Second, you can check in CloudWatch in AWS the logs of your function.
  • You can open CloudWatch directly from

Considerations

  • You cannot create 2 lambda functions triggered from the same bucket, so if you configured before a Lambda function, it is not enough to delete the trigger or the Lambda, you need to open the bucket, open properties, and check that Events has no active notifications, and if it has, delete them from there.

image

Based on AWS Documentation

About

Lambda function to generate a source set of images with different sizes to improve responsive performance and speed up page loading time

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published