DEV Community: Sean Groom

You are visitor number...

Sean Groom — Thu, 13 Jan 2022 18:28:31 +0000

The visitor counter is working! After some time off for the holidays I got back to banging my head against the 403 errors I was getting when my site called the API. The Lambda function worked when I tested it in Lambda and returned the incremented count number. I had the correct CORS headers set up so it wasn't a CORS issue as far as I could tell.

I followed the AWS troubleshooting for 403 errors and I could curl OPTIONS and get a valid preflight response but not GET or POST.

To refresh my memory on the whole process I decided to start from the beginning and set up a new Lambda function and API with the intent to figure out what I did wrong with my existing setup.

The new Lambda function worked just as before since it was the exact same code. My first API was a REST API so for this version I chose an HTTP API. AWS does more of the setup work for you with this version but it eliminates some potential for mistakes on my end.

The new API created a new IAM role which I had to grant access to Lambda and after that it worked! I could call the invoke URL and get the count instead of an error!

I updated the URL in my javascript for the resume site and pushed the changes. Loaded up the site again and there it was: "You are visitor 1".

Tracking Project Status With GitHub Projects

Sean Groom — Sat, 11 Dec 2021 21:52:42 +0000

The Resume Challenge isn't a huge project, but it does involve a fair bit of work in different areas, so to keep track of everything I created a GitHub project for my repo.

I've used Trello before for organizing projects so I set up my project tracker as a kanban board. The GitHub integration is convenient compared to a standalone kanban and if this was a team project with pull requests and issue tracking it would all tie into the code in the repo. I don't need all that for this simple project but it's nice to know it's there.

CI/CD (Front End)

Sean Groom — Sat, 11 Dec 2021 06:48:21 +0000

With steps 2-6 complete, I decided to go out of order and complete step 15 now rather than later. Step 15 is creating a GitHub action to automatically push code changes in the repo to the S3 bucket, thus creating a CI/CD process to automate updating the front end.

I decided to set this up now because I hate manual processes that can (should) be automated. My next task is adding the Javascript counter and DynamoDB table. That could involve a lot of changes and testing with the HTML in the S3 bucket and I'd rather not copy the files to S3 manually after every change.

The setup for this automation wasn't too hard:

Create an IAM policy to allow updating the files in the S3 bucket:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "SyncToS3",
            "Effect": "Allow",
            "Action": [
                "s3:PutObject",
                "s3:GetObject",
                "s3:ListBucket",
                "s3:DeleteObject",
                "s3:GetBucketLocation"
            ],
            "Resource": [
                "arn:aws:s3:::BUCKET-NAME",
                "arn:aws:s3:::BUCKET-NAME/*"
            ]
        }
    ]
}

Create an IAM user with only programmatic access and assign the policy.
Add the IAM user's access key and secret access key to the GitHub repo's secrets.
Create the GitHub Action:

name: Upload to S3

on:
  push:
    branches:
    - master

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
      uses: actions/checkout@v1

    - name: Configure AWS Credentials
      uses: aws-actions/configure-aws-credentials@v1
      with:
        aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
        aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        aws-region: us-west-1

    - name: Deploy static site to S3 bucket
      run: aws s3 sync FOLDER-NAME s3://BUCKET-NAME --delete

Now when a change is pushed to the GitHub repo the file is automatically uploaded to the S3 bucket.

UPDATE
To have the action only run when files are changed in a certain folder, use the paths option. This enables different actions to be run for things like syncing the front_end folder to S3 and the back_end folder to API Gateway.

on:
  push:
    branches:
    - master
    paths:
    - 'FOLDER-NAME/**'

First Hurdle

Sean Groom — Fri, 10 Dec 2021 22:15:33 +0000

I'm off to a good start so far:

I typed up my resume in HTML and used a free template for the layout and CSS. The challenge says keep it simple since it's not a web development challenge.
I created an S3 bucket to host the files
CloudFront distribution for HTTPS access with an ACM cert
Added a CNAME in my personal domain pointing to CloudFront so it can be accessed with resume.seangroom.com instead of https://d16vv58p9r6mg6.cloudfront.net/.

All the pieces are there for the basic setup so why am I getting a 403 error?

Chrome DevTools are your friend!

Mixed content! I didn't catch that the free template I used had a linked to a CSS file hosted by Yahoo over http. The template is from a simpler time (2009) when the web wasn't as secure, and if I wasn't using CloudFront for HTTPS it wouldn't even be an issue.

I uploaded the CSS file to the S3 bucket and changed the path in the HTML and then it was all green lights. That's steps 2-6 completed. Now to tackle the Javascript counter.

Challenge Accepted

Sean Groom — Fri, 10 Dec 2021 21:50:49 +0000

Have you heard of the Cloud Resume Challenge? It's a cloud project spec created by Forrest Brazeal as a way to demonstrate your skills and get a job in cloud computing.

I have over a decade of experience as a System Administrator but I'm ready to transition into more of a cloud native engineering role. My favorite part of working in IT is learning about and building new things. I've learned a lot about things like AWS, CI/CD, IaC, containers, etc and it's time to put it all together by building something that demonstrates my skills and helps me get a job using them. Cloud Resume Challenge accepted!

The tl;dr of the challenge is to create your resume in html and host it on one of the major cloud platforms (AWS, GCP, Azure). Sounds easy right? Yes and no. Here are the 16 steps in the challenge (AWS version):

Pass at least the Amazon Cloud Practitioner exam.
Write your resume in HTML.
Style your resume with CSS.
Host the HTML and CSS with an S3 bucket.
Use HTTPS to server the site with CloudFront.
Point a custom DNS domain at the CloudFront distribution.
Create a page visitor counter using Javascript.
Store the visitor counter data in DynamoDB.
Create an API for the Javascript to talk to DynamoDB.
Use Python for the Lambda function in your API.
Write tests for the Python code.
Define the API, DynamoDB table, API Gateway and Lambda function in the AWS Serverless Application Model.
Create a GitHub repo for the backend API code.
Use GitHub Actions to test your API code and push to AWS.
Create another GitHub repo for the frontend HTML and CSS code and use GitHub Actions to push changes to the S3 bucket.
Create a blog post about your project and what you've learned.

Time to get building!