The AWS Cloud Resume Challenge

Welcome to my rendition of the “The Cloud Resume Challenge, by Forrest Brazeal. Check it out here: Galazkar.com

You can find the full challenge here: https://cloudresumechallenge.dev/

You can see on the diagram below all the infrastructure we will be deploying first via ClickOps on the AWS Console, then using Terraform to automate the process, in part 2.

This project is a lightweight opportunity to gain a better understanding of:

Full stack development.

Learning how websites interact with python, java & databases.

Networking.

You’ll learn how to register domains, use DNS, CDN & SSL Certificates.

Permissions.

You’re going to need to know how IAM permissions cause AWS Services to interact with one another.

CI/CD.

This will help you create a streamlined process to make changes to your Infrastructure & website. (GitHub & GitHub Actions)

Infrastructure-as-Code.

Converting your infrastructure into code is a key to solving issues. Such as disaster recovery, scalability, repeatability, the list goes on!

The Challenge

1. Certification

It’s a great idea to get the AWS Cloud Practitioner, In my case I obtained the AWS Solution Architect & Developer Associate in addition to the one mentioned earlier.

2. Learning HTML & CSS

To create a basic resume site, you’ll need to learn how to actually produce the content of it. Learning how programmers actually create buttons, links, insert pictures, etc. Into websites or applications was thoroughly fascinating.

I used this course: https://www.youtube.com/watch?v=G3e-cpL7ofc

If you don’t want to learn this, you can search the internet for “free HTML & CSS Resume” or even use ChatGPT to produce a template & help you customize it to your liking.

3. S3 Bucket & CloudFront

Once I had my index.html & styles.css files ready to go, I uploaded them into the S3 Bucket.
I made sure the “Static Website” option was disabled, since the CloudFront Distribution would serve the content.

I created the CloudFront Distribution with the S3 Bucket as it’s origin to serve the index.hml. Once this is made, we need to update our S3 Bucket with a policy allowing the access by the CloudFront Distribution.

4. Domain name & SSL Certificates

I purchased the Domain name Galazkar.com on Route 53.

I pointed the CloudFront Distribution DNS name to the R53 Created registar for my website. www.galazkar.com & galazkar.com

Lastly I created SSL Certificates through Amazon Certificate Manager, *.galazkar.com & galazkar.com, I also used Email Confirmation, because the DNS confirmation wasn’t working.

5. Backend

For the Backend I used DynamoDB to keep track of the amount of views that came to my website. I created a lambda which would be triggered upon visiting my website to retrieve the data from the database & also update the count each time the website is visited. For the lambda I used python & for the function on the website I used JavaScript.

This was the most interesting part of the challenge, seeing how the backend works! It opened my mind to all of the applications I use on a daily basis have programmed their backends.

Here’s the code for my Lambda function:

import json
import boto3

dynamodb = boto3.resource('dynamodb')
table = dynamodb.Table('cloud-resume-view-counter')

def lambda_handler(event, context):
    response = table.get_item(Key={'id': '1'})
    views = response.get('Item', {}).get('views', 0) + 1
    print(views)
    table.put_item(Item={'id': '1', 'views': views})
    return views

The code I used in my index.js to interact with the lambda:

const counter = document.querySelector(".counter-number");
async function updateCounter() {
  try {
    const response = await fetch("<Insert URL for API Gateway or Lambda>");
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    const data = await response.json();
    counter.innerHTML = `You are viewer: ${data}`;
  } catch (error) {
    console.error('Error in updateCounter:', error);
  }
}
updateCounter();

6. CI/CD

Although I’ve created pipelines for my docker images or other terraform projects. Creating a GitHub actions pipeline for this has proven useful. If you don’t you’ll have to do two things, upload your new index.html to the bucket & invalidate the CloudFront Distribution. This saved me time and energy automating this process.

If you haven’t you’ll have to upload your code to your GitHub account.
Then add a folder to your repo ‘.github/workflows’ followed by a file called ‘front-end-cicd.yaml’ with the following code.

name: Upload website to S3 and Invalidate CloudFront Cache

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    
    steps:
    - name: Checkout code
      uses: actions/checkout@master
      
    - name: Deploy to S3
      uses: jakejarvis/s3-sync-action@master
      with:
        args: --follow-symlinks --delete
      env:
        AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}
        AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
        AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        AWS_REGION: 'us-east-1'
        SOURCE_DIR: 'galazkar.com' #Replace with where your index.html file lies
        
    - name: Invalidate CloudFront Cache
      env:
        AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
        AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        AWS_REGION: 'us-east-1'
        DISTRIBUTION_ID: ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID }}
      run: |
        aws cloudfront create-invalidation --distribution-id $DISTRIBUTION_ID --paths /*

Once you place the “secrets” into your repo settings & replace the necessary holders in the code. The moment you push new code into your repository, it’ll be placed in your s3 bucket & an invalidation will be performed on your CloudFront Distribution.

7. Infrastructure as code

Join me in part 2, when I show you how to convert this Infrastructure into Code using Terraform. This proved to be my favorite part of the project, as it required a good amount of troubleshooting.

Conclusion

Overall, this challenge is a great way of learning how to create a full stack software if you will. If you’re new to the cloud or want to brush up your skills I recommend trying this challenge. It’s a lightweight & non-threatening way to begin to flex your muscles & open your mind to other possibilities.

Check out my website HERE