DEV Community

Amran-Lab
Amran-Lab

Posted on

Serverless Website: How I did it

My Start
I was interested in this challenge because I have wanted to make a serverless website, one with dynamic features using AWS lambda for a while.

For the cloud resume challenge I split it up into 3 parts. The first part would be getting a website onto the internet, the next being the serverless functions: lambda, API Gateway, DynamoDb. For the final part would be infastructure as code and a CI/CD pipeline using AWS SAM and Github Actions.

Static Website
To get my feet off the ground I quickly picked up a CV template on the internet just so I had something to put on the internet. I found this to be more important in this stage as I am not testing my HTML skill right now and I can fix this later in the project.

I hosted my website on an S3 bucket and connected it cloudfront however doing so I made my S3 bucket publicly readable and not very secure. To combat this I used cloudfront Origin Access Identity to only allow access to the bucket via the cloudfront website. Later I hooked up my cloudfront domain to my website I have registered on route 53 and got the SSl certificate using Amazon certificate Manager. To finish off I added a subdomain using a secondary S3 bucket used to route traffic the apex domain.

Serverless
I would say this part is where I learnt the most. I had to do extensive research on API Gateway and it's functionality such as CORS. I had to recap my knowledge on lambda and experiment with it on dynamodb. Finally I needed to learn javascript-jquery to connect my static website to make a get request to the gateway. As I was unfamiliar with javascript it was uncharted territory and slightly exciting.

Infastructure As Code and CI/CD
The biggest problem with this would be I could not enable CORS using the SAM template for the API Gateway. This is because of the lambada Integration. It could be fixed manually by changing the settings and adding an empty model but I chose another method. I decided to modify my return statement on my lambda, to include the CORS information necessary for CORS to be enabled.
As for Github Actions it is very similar to AWS codepipeline rather than jenkins. My only gripe with Github Actions is testing is very slow unlike using Jenkins machine however it makes up for it in the fact that the logs are more easily readable for Github Actions.

Github Action Serverless
Alt Text
This is my logs for github actions. Whenever there is a new push pytest is ran and if that passes the SAM template will be built and deployed.

Alt Text
This is my logs for github actions. Whenever there is a new push the S3 bucket will be updated with a new index and the old one will be invalidated in cloudfront, so you see the most recent page.

Conclusion
In conclusion I am happy with the project and the amount I have learnt. One thing I plan to do in the future is update the html and css file to better suit me and my style.

Link to my website - amran-website.com

Top comments (0)