Hi, I’m Even Zhang and welcome to ‘Back to Basics’.
Today we are going to talk about hosting static websites on AWS.
Before the Cloud, hosting a website often meant setting up a
web server and serving content out of a network connected storage.
This was the case even if you just wanted to serve static web assets
such as CSS, HTML, and JavaScript files.
Not only did you have to provision a server, but you had to patch the server,
scale resources to meet demand, managing complex deployment processes,
and making sure SSL certificates are renewed and valid.
What if I told you that you don't have to do any of that today?
Simply leverage some AWS services to have a highly performant and scalable
way of hosting a static website, all without having to manage a single server.
Let’s dive into the most common architecture pattern to do this with.
To start, you can store all your web assets such as your CSS, HTML and Javascript files on
Amazon Simple Storage Service or otherwise known as S3.
By storing your web assets on Amazon S3,
you have immediate access to four nines of availability and eleven nines of durability.
S3 will also scale automatically to help you to meet the fluctuating demands of requests.
And since there are no servers, you won’t have to worry about patching or scaling anything.
Although you can configure S3 to use its out of the box functionality
to host a static website, it does come with two limitations:
One, you must grant public read access to the S3 bucket that is hosting your website,
which may be challenging in situations where you have blocked public access to all of your S3 buckets.
Two, S3’s out of box hosting does not support HTTPS for custom domains
So instead, it is best to use Amazon CloudFront, a cloud CDN service
that allows you serve content out of S3 without having to enable any public access.
By fronting your S3 bucket with a CloudFront distribution
you will also be able to distribute your website to over 225 points of presence globally,
so that your users can access your website with ultra-low latency.
Furthermore, through CloudFront you’ll also have access to CloudFront functions,
a lightweight serverless compute option that runs at edge locations for CDN customizations.
For example, you can append HTTP headers to your responses
such as content security policies to enhance the security posture of your website.
Or you can route different user sessions to different builds of your website for A/B testing.
Once you have the storage and CDN sorted,
the next thing you will need is a custom domain name and a SSL certificate to go with it.
You can create a custom domain name through Amazon Route 53,
a cloud DNS service and a SSL certificate through Amazon Certificate Manager or ACM.
Both of these services integrate seamlessly with CloudFront,
making it extremely simple to map a custom domain to a CloudFront distribution.
To make it even easier, you no longer have to worry about renewing your SSL certificates anymore,
because when used with CloudFront, ACM will do the hard-work
and automatically renew the SSL certificates for you.
And with just these few components you already have a functional website,
but we mustn’t forget about the deployment process.
With access to S3’s rich APIs, deployment process is also simplified.
The best way to securely upload your web assets is using the S3 sync command
of the AWS CLI which will upload any new and updated files to a S3.
One thing to keep in mind though, if you are deploying a single page application
such as a React application, make sure you upload the index.html file last after syncing all the other assets.
This can be easily done via excluding the index.html file
initially and then running a subsequent sync commit including the index.html file.
That way, your users won’t be loading a broken website during mid-deployment.
Your whole deployment process can be as simple as two CLI commands
and this can be easily incorporated into your CICD pipeline.
Lastly, observability is key to running any software applications
and a static website is no exception.
CloudFront publishes a number of operational metrics to CloudWatch
such as the rate of 500 errors and the number of requests received.
Using these metrics you can create a CloudWatch Alarm
to alert yourself when something has gone wrong,
for example alerting you when there is an unusually high rate of 500 errors.
But what if you just want some insights on your CloudFront activity?
Well, you are in luck,
because CloudFront also publishes a variety of reports such as top referrer reports and popular object reports.
Using these reports can gain some insights into how your users are interacting with your website,
without the need to install or manage any extra software.
To conclude, using S3, CloudFront, Route53 and ACM
will allow you to host highly performant and scalable static websites on AWS
while removing the need to manage any servers.
You can also leverage additional functionalities
to improve your security and observability posture, or even run AB tests.
This architecture pattern has been a game-changer for many of my customers,
and I hope it will be for you as well.
Click the links in the description below for more details,
and see you next time.