Host your Static website in S3 and serve through Cloudfront
To all those newbies, I will give a brief introduction on S3 and Cloudfront. Others, please skip the introduction and head towards implementation steps 🙂
Big ‘n Economical – S3
S3 is serverless. Amazon Web Services’s (AWS) highly-scalable object storage provides a platform to host static websites to deliver HTML, JavaScript, images, video and other files to your website visitors. Hosting static websites in S3 provides you with a very low cost, high-levels of reliability, and scale to handle enterprise-level traffic
Small ‘n Fast – Cloudfront
Amazon CloudFront is a fast content delivery network provided by AWS. It is a service that speeds up distribution of your static and dynamic web content. CloudFront delivers your content through a network of data centers called edge locations. User requests are delivered from the AWS edge location that provides the lowest latency. This allows the website content to be delivered with the best possible performance. CloudFront operates on a pay-as-you-go basis.
Match made in Cloud – S3 & Cloudfront
Amazon S3 + Amazon CloudFront is often referred to as Match Made in the Cloud.
By caching your content in Edge Locations, CloudFront reduces the traffic between user and S3 buckets and delivers from cached servers.
To make setting up S3 and CloudFront as turnkey as possible, you may use readily available CloudFormation templates to automate the build.
The Cloudformation template will perform the following to implement S3 with Cloudfront.
- Create a new S3 bucket that will hold the HTML of our website.
- A new ACM certificate for our domain name. ACM certificate is used to configure HTTPS for our domain name.
- A CloudFront distribution with Origin Access Identity (OAI) will restrict access to the S3 bucket only through CloudFront.
- Template associates a subdomain of your domain name to the CloudFront distribution.
Prerequisites:
- You must have a registered domain name. I would suggest setup that domain in Route53.
Now let’s get started:
- Access the Cloudfront resource in AWS console and click create.
- Use the cloudfront template -> https://s3.amazonaws.com/solution-builders-us-east-1/amazon-cloudfront-secure-static-site/latest/main.yaml
- Provide your domain name and the subdomain in the parameters section and choose the Create button. The Cloudformation Stack typically takes about 15 mins to finish and the stack creates a private S3 bucket with access only allowed from CloudFront distribution.
