Deploy a Static Website using AWS S3 and CloudFront
Simple walkthrough on how to add AWS CloudFront CDN to a Static Website hosted on S3 and connect it to your personal Domain via Route53
If you are here, you probably know that CloudFront enables you to serve your website much more efficiently to people around the world by leveraging caching on edge nodes and enabling HTTPS for website visitors. Hence, we’ll dive right in and show you how you can deploy a simple Static Website on S3, connect it to your own Domain (example.com — purchased on GoDaddy) and finally add the awesome CloudFront to it. Please note that I’ll be using Vue, but the process is the same for React as well as other frameworks.
The diagram above can be somewhat confusing because it presents the final state and only what service points to what. The process to construct this is somewhat backwards.
We first start by creating and packaging our App, then hosting it on S3. Afterwards we create a Route53 Hosted Zone which routes traffic from our domain to the S3, and finally add CloudFront in between Route53 and S3. Although this might sound confusing, it’s actually pretty simple.
👉 Game Plan
- Create and package your App (Skip this section if you have your own)
- Host the App on S3
