Thumbnails generator with AWS Lambda, API Gateway, AppSync, DynamoDB, S3 and SAM 📢

Description

Build a page with a drag and drop area in which you will be able to generate a 200px thumbnail version of your jpg/jpeg/png files.

Frontend part

This project is composed by two repositories: this one which is the api backend and this React frontend is the other. Start with this repository and then continue with frontend.

Requirements:

• AWS account
• AWS CLI
• AWS Serverless Application Model (SAM) CLI

Instructions

1. In this first step we will use the AWS console to setup AppSync, which under the hoods will deploy a DynamoDB table. AppSync is the managed GraphQL service which will handle our database operations, that will contain the urls for the images resized, as well as gives us real-time updates sent to our frontend.
   
   Use your browser to log into your AWS console and create a new AppSync API (check you create it into the AWS region you will be working in this project):
   
   
   
   
   
   Make sure you use ResizedUrl as your model name as this is the name used in the lambda function we will create
   
   
   
   
   
   This will create the DynamoDB table as well as our GraphQL schema and resolvers. Go into your new API created and take note of the API URL endpoint and API KEY
   
   
   
   Inside Schema download the schema.json that we will need in the frontend
   
   
   
   Now we will continue to deploy the rest of our infrastructure with Serverless Application Model (SAM)

2. Clone this repo
   
   git clone https://github.com/s4nt14go/thumbnails-aws

3. Check your are using your AWS credentials and the region you want
   
   aws configure list

4. We will first build the project locally and then deploy it, so cd into the repo root folder and run
   
   sam build

5. Make a S3 bucket which we will use when deploying. For the following parts I will use some names as examples, you may have to choose different ones because they have to be unique (for example you can add a random suffix to make them unique)
   
   aws s3 mb s3://stack-thumbnails-artifacts

6. Running sam deploy we will deploy the resources declared into template.yml

sam deploy --stack-name thumbnails --s3-bucket stack-thumbnails-artifacts --capabilities CAPABILITY_IAM
   
   One of the lambdas deployed is upload that we will use from the React app to get an url to upload the image to be resized, also we are deploying a bucket where we will upload our image to.
   
   Once CloudFormation finishes deploying our template.yml it will output two values we will need for the frontend:

   • uploadApi: the url from where we will get an url to upload our images
   • imageToResize: the bucket name where we will upload the images

7. Go into the resize lambda inside your AWS console and set the environment variables APPSYNC_ENDPOINT_URL and APPSYNC_API_KEY (you don't need to set AWS_REGION as this is automatically injected in lambdas)
   
   
   
   
   
   

8. Let's check the lambda function upload.
   
   curl --request GET --url "<uploadApi output by CloudFormation>=test.txt"
   
   TIP: When you copy the uploadApi output by CloudFormation, check it didn't get break out in two lines by your terminal output, the url should end with amazonaws.com/dev/presigned-url?fileName
   
   If everything went well you should receive a link to upload the fictitious file text.txt.

9. Every time an image is uploaded to bucket imageToResize, lambda function resize will run and resize it, and also will launch a mutation to AppSync, so the React app (that will be subscribed to receive real-time changes) will pick up the change and show the resized image.
   
   So to check that lambda resized works well, we can upload an image to the bucket and we should see the resize logs printing Successfully resized <your image> and uploaded to <your bucket> along with the AppSync response.
   
   So let's copy an image to S3, using the value outputted by CloudFormation when created bucket imageToResize

aws s3 cp resize/test.jpeg s3://<imageToResize bucket name output by CloudFormation>/test.jpeg
   
   Check inside Lambda console the thumbnails-resize... function, click in the "Monitoring" tab and then the "View logs in CloudWatch" button, select the most recent "Log stream" and you should see the successful message. You can also check in your S3 bucket <imageToResize>-resized the thumbnail created
   
   

10. Now that everything works well go ahead with the React client!

Cleanup

After you do the frontend part and you are done with the project do this to delete the created resources

1. Empty both buckets: the one used to upload the original image as well as the one where we stored the image resized.
   
   aws s3 rm s3://<imageToResize bucket name given by CloudFormation> --recursive
aws s3 rm s3://<imageToResize bucket name given by CloudFormation>-resized --recursive
   
   
2. Delete your stack and table
   
   aws cloudformation delete-stack --stack-name thumbnails
aws dynamodb delete-table --table-name ResizedUrlTable
   
   
3. Empty and delete the bucket used by CloudFormation to deploy
   
   aws s3 rm s3://<your stack-thumbnails-artifacts> --recursive
aws s3 rb s3://<your stack-thumbnails-artifacts>
   
   
4. Delete AppSync API
   
   aws appsync delete-graphql-api --api-id <your api id>