DEV Community

wanjiru murira
wanjiru murira

Posted on

The Cloud Resume Challenge

The Cloud Resume Challenge by Forrest Brazeal is for anyone who wants to get hand-on practice on the cloud.One of the key motivations behind taking up this challenge was my desire to gain hands-on experience with AWS cloud technologies. While I had a theoretical understanding of most AWS services, I knew that real-world experience was invaluable.

This challenge involves hosting a static website in an S3 bucket via Amazon CloudFront distribution. The static website is then connected to a Lambda function through AWS API Gateway. Whenever a user accesses the static website hosted on S3, the Lambda function is triggered, and it writes the count of website visits to a DynamoDB table. This project aims to track and record user visits to the website for analytics and monitoring purposes.You can view the challenge here. The source code to this challenge can be found on git.

I've documented how I went about the challange and some of the issues I faced below.

FRONT-END PART OF WEBSITE

Image description

Hosting the website on the s3 bucket was probably the easiest part of this challenge. I did spend quite some time in designing the layout of the website as Frontend is not my strong suite.I tried so many layouts and this was taking longer than expected. I finally decided to settle with Tomas Hrubovcak design, which was one of the cleanest and minimal layouts I have seen so far of The Cloud Resume Challenge.

I did have to learn about Amazon CloudFront cache invalidation since I didn’t understand why any updates I made on my s3 bucket didn’t reflect immediately. This was happening because CloudFront was still serving the content it had cached in the edge locations which takes some time before it expires. Invalidation allows you to force CloudFront to refresh its cache and retrieve the latest version of your content from your origin server. Read more about invalidation here.

As you will make a few changes to the content of your s3 bucket, I decided to put into practice CI/CD (Continuous Integration / Continuous Deployment) to manage any changes to my code.They are several tools you can use for this such as Jenkins, GitHub Actions etc.

BACK-END PART OF WEBSITE

Image description

The backend part on the website took the longest to complete but I thoroughly enjoyed this. While at the start I provisioned all my resources manually which greatly helped me understand AWS services better, I did eventually opt to use Terraform as the IaC. I deliberately choose to use Terraform instead of AWS CloudFormation because it’s one of the most preferred IaC tool by developers and I wanted to familiarize myself with it.

The backend part of this website includes an API Gateway, DynamoDB Table and Lambda Function.
The lambda function is used to increase the count of the number of users who have visited the website and then updates this count in a DynamoDB table. You need to attach a IAM role to the Lambda function, which allows it to write to the DynamoDB table.

Image description

The Lambda function is triggered by a RESTful APIs to execute the code.
The code below is just a snipset of the code I used to deploy my lambda function using terraform.

Image description

However, whenever I tried to run the API Gateway, I kept on getting various errors.Some of the errors I got were CORS errors and how to go about an API with lambda proxy integration enabled.

For the CORS errors, I enabled CORS on my API Gateway and also added the correct headers to my lambda function.
It took some time for me to realize that when provisioning an API Gateway using terraform, lambda proxy integration is enabled automatically. This means that API gateway doesn’t transform the incoming request. The lambda function should send the response and status code in the correct format as shown below (which was the reason I kept on getting errors since my previous lambda response format was different)

Image description

Once I was able to navigate the above errors, my website was up and running.

Top comments (0)