02 : How This Site Works

After I archived my AWS Cloud Architect - Associate Certification, I decided to build a serverless web app to test my "serverless skills." After some time researching, I found a cloud resume challenge from Forrest Brazeal and as a result, this website was born :)

During the challenge, you get a deep dive into various AWS technologies like S3, DynamoDB, Lambda, Cloudfront, Route 53, and AWS SAM. You work with serverless infrastructure as code, apply multiple programming languages, and build CI/CD pipelines.

FrontEnd

To focus on the AWS part of a project, I used the "Univers" template from Mashup-Template I want to say thank you to the creator; he did a great job.

The first step was initiating the AWS SAM project that I found to be an excellent tool for serverless development. It saves you a ton of time spinning up starting resources for you.

Since we work with AWS SAM, and one of the challenge requirements is serverless infrastructure as code, most of the resources were added as code to the AWS SAM template. Later describing and deploying my S3 bucket in the template, I uploaded my static website resources to GitHub. I created a CI/CD pipeline for my front end with this bucket as a destination. The essential part is Bucket Policy that also added to SAM Template.

After that, I start working on CloudFront distribution for my website. I describe it in SAM Template and add Cloud Front Access Identity that helps me restrict access to my origin S3 bucket.

To make CloudFront DNS Name look pretty, I used Route 53. And again describing everything in the AWS SAM template and deploying changes. Additionally, don't forget to issue an SSL certificate and add it to your Cloud Front Distribution.

BackEnd

The next step is Dynamo DB and back-end logic. I add Dynamo DB Table in the SAM template, and after deployment, create a record that will keep a record of website visitors. Following this, I updated a HelloWorld function that AWS SAM creates during the initialization of the project to make Get Requests from my DynamoDB and create a new function that will perform Put Requests to the database.

At this stage, I came back to the front end of the website and worked on Javascript that fetch data from ApiGateway. Here is my GitRepo with AWS SAM Template.