Cloud Resume Challenge
Tags: aws, html, javascript, api
Published: 2022-07-25 02:36:00

I recently completed the Cloud Resume Challenge by Forrest Brazeal. I thought the challenge was well-thought-out and had the right amount of difficulty. Although I already had some cloud experience prior to this project, the project put my skills to the test and I learned some stuff along the way. This was my first time deploying a full-stack web application using an infrastructure as code tool (CloudFormation). I was also exposed to GitHub Actions which I used to create a deployment pipeline. All in all this challenge was rewarding and I am happy with the end result.

**Phase 1. Front End**

The resume website was written in HTML. I used the following example to help me: [A simple HTML Resume](https://codepen.io/emzarts/pen/OXzmym). I also used Adobe Dreamweaver to fix some issues I had with spacing. Next, I styled the website with CSS. The code was then uploaded to an S3 bucket which had static web hosting enabled. I experienced a strange error with Route 53, so I decided to use Cloudflare as a DNS provider.

![HTML Resume](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/emz1sjjv1luyblnaxvs3.png) 

**Phase 2. API**

To start this phase, I first created a DynamoDB table to store the visitor counter. I then created a REST API using AWS API Gateway. The API had one simple GET method. I then integrated the API method with a Lambda function. I wrote the Lambda function using Python and Boto3. The function updates the database's primary key by incrementing the visitor counter by 1 and then retrieves the visitor count and returns the number. The back end is represented by the following diagram:

![Infrastructure Diagram](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/igz7i7dqen0hu2yfji8i.png)

**Phase 3. Integration**

It was finally time to integrate my front end to my back end. To make this happen, I wrote some JavaScript. The script I wrote uses the fetch() method to make an API call; in this case to update and return the visitor counter. 

`fetch('')
        .then(response => response.json()) 
        .then((response) => {
          console.log(response)
            document.getElementById('replaceme').innerText = response
        })`

I used Open Up The Cloud's video series Cloud Resume Challenge to help me with this part.

**Phase 4. Automation**

This was by far the most challenging part of the Cloud Resume Challenge. I now needed to represent my cloud resources as configuration. To complete the Infrastructure as Code step, I used AWS CloudFormation. The template defines all the back end resources: DynamoDB table, API Gateway (method, stage, deployment), and the Lambda function. This step took a lot of troubleshooting. I used different examples I could find on the internet to help me construct the template. Here are some things I noted:

- When defining a method, even if the HttpMethod is GET, the IntegrationHttpMethod is POST
- A GatewayResponse can be defined to create ResponseParameters to avoid CORS issues. I defined the following ResponseParameters: `gatewayresponse.header.Access-Control-Allow-Headers: "'*'"
        gatewayresponse.header.Access-Control-Allow-Methods: "'*'"
        gatewayresponse.header.Access-Control-Allow-Origin: "'*'"`

I then used GitHub Actions to deploy my application. If I were to complete this challenge again, I would set this up earlier since it saves a lot of time. I set up an action to deploy the CloudFormation template if there is a change to the template. I set up a different workflow to push any code change to the Lambda function. Lastly, I set up a workflow to push any HTML/CSS/Javascript changes to the S3 bucket where the website code is stored. I can now make many changes to either my front end or back end code and the changes will be pushed to the cloud. CI/CD is awesome.

**Phase 5. Blog**

As soon as I hit the Publish button, I will have completed the Cloud Resume Challenge. I enjoyed doing this challenge because it helped me to understand how full-stack web applications are deployed to AWS. Although I had written Lambda functions and CloudFormation templates prior to partaking this challenge, I had never used API Gateway and CloudFormation together. The challenge helped me to realize just how powerful and important infrastructure as code is. Additionally, prior to this challenge, I had no experience with GitHub Actions. I now see how useful it is and how it can save you a lot of time when you are working on a full-stack web application in the cloud. Overall, I thought this challenge was great and I recommend it to anyone who is new or has some cloud experience. 

Link to resume website: https://raffaelle-resume.com/