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.
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.
-
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 useResizedUrl
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 theschema.json
that we will need in the frontend
Now we will continue to deploy the rest of our infrastructure with Serverless Application Model (SAM) -
Clone this repo
git clone https://github.com/s4nt14go/thumbnails-aws
-
Check your are using your AWS credentials and the region you want
aws configure list
-
We will first build the project locally and then deploy it, so
cd
into the repo root folder and run
sam build
-
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
-
Running
sam deploy
we will deploy the resources declared intotemplate.yml
sam deploy --stack-name thumbnails --s3-bucket stack-thumbnails-artifacts --capabilities CAPABILITY_IAM
One of the lambdas deployed isupload
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 ourtemplate.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 imagesimageToResize
: the bucket name where we will upload the images
-
Go into the
resize
lambda inside your AWS console and set the environment variablesAPPSYNC_ENDPOINT_URL
andAPPSYNC_API_KEY
(you don't need to setAWS_REGION
as this is automatically injected in lambdas)
-
Let's check the lambda function
upload
.
curl --request GET --url "<uploadApi output by CloudFormation>=test.txt"
TIP: When you copy theuploadApi
output by CloudFormation, check it didn't get break out in two lines by your terminal output, the url should end withamazonaws.com/dev/presigned-url?fileName
If everything went well you should receive a link to upload the fictitious filetext.txt
. -
Every time an image is uploaded to bucket
imageToResize
, lambda functionresize
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 lambdaresized
works well, we can upload an image to the bucket and we should see theresize
logs printingSuccessfully resized <your image> and uploaded to <your bucket>
along with theAppSync response
.
So let's copy an image to S3, using the value outputted by CloudFormation when created bucketimageToResize
aws s3 cp resize/test.jpeg s3://<imageToResize bucket name output by CloudFormation>/test.jpeg
Check inside Lambda console thethumbnails-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 -
Now that everything works well go ahead with the React client!
After you do the frontend part and you are done with the project do this to delete the created resources
- 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
- Delete your stack and table
aws cloudformation delete-stack --stack-name thumbnails
aws dynamodb delete-table --table-name ResizedUrlTable
- 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>
- Delete AppSync API
aws appsync delete-graphql-api --api-id <your api id>