The goal of this article is to guide you through the process of deploying a resilient static website to AWS. The web is and has been for a while the one place where you can make your software available to millions of users in an instant. It's because of this incredible ease of distribution that the web ecosystem is so vibrant. If you've been around the web for a while you've seen the rise and fall of a myriad of frameworks, technologies, transpiled languages, build systems, package managers, language proposals, and honestly, it's tough to keep track of everything that goes on. I'm here to tell you that, it doesn't matter what client side technology, tool or framework you use; React Hooks won't be there to save you when your website blows up on Hacker News or Reddit. You will want your site to stay speedy, and accessible for users all around the world. Likewise, if you want users to trust you, you want to ensure that the connection to your site is secure and encrypted, this is where SSL comes in. Speed, Availability and Security is what we'll focus on. Consider the following scenario:
You have a great new website idea, and you want it to be accessible across the world. You rent a digital ocean server, deploy NGINX, and drop some HTML files on the server. Not long after your first deploy, your site blows up on Hacker News, and after the first hour of being on the front page your server falls over. You've got the exposure, but you couldn't keep up with the demand. User's are unhappy and you wish you could have given them a better experience. You scale up, even though you know another surge is possible... still you carry on. After the initial performance issues, your users request to be able to post their own content, so you develop a login form. You know that you should support SSL for secure logins, so you set up SSL Support. Everything is good for a year or so, until your certificate expires, and your website traffic is downgraded to HTTP, users are upset, You renew the cert, apologize and carry on. And so the story goes, it's an endless cycle of managing servers and certs and unhappy users. This scenario doesn't have to be your reality, this is where AWS and cloudflare can help out.
This post assumes a passing familiarity with Cloudflare, AWS and underlying web infrastructure concepts, if you're familiar with DNS, and AWS then you'll likely have no problem following this guide.
First, you're going to want a domain, if you don't have one and don't have your favorite domain broker, you can try any of these (there are more just a google away):
- https://www.godaddy.com/offers/domains
- https://domains.google.com/offers/domains
- https://www.godaddy.com/offers/domains
Now that you have a domain, we'll sign up for cloudflare, which is where we'll manage DNS. Navigate to https://dash.cloudflare.com/sign-up, and create an account.
Once you have your Cloudflare account and your domain, add your domain to Cloudflare. Cloudflare will walk you through how to manae your domain via Cloudflare; in general this means pointing the nameservers your domain uses to the Cloudflares nameservers. Cloudflare will also walk you through some common settings; feel free to choose the options here that make the most sense for you. It may take a couple hours for your domain to oficially use cloudflares name servers, I know it's exciting but it's a waiting game.
After a bit, if you've set your nameservers up correctly, your Cloudflare overview dashboard should tell you "Great News! Cloudflare is now protecting your site!", once you see that message, it's on to the wonderful world of AWS
Once you have both your Domain and Cloudflare DNS, it's time for some AWS Action!
Navigate to https://portal.aws.amazon.com/billing/signup and go through the set up process.
AWS is where you'll actually deploy your site, but instead of managing a brittle server, we'll use a series of their managed services. We'll be using:
- AWS S3
- For storing your .html, .css, .js files
- AWS Cloudfront
- For a Highly Available CDN
- AWS ACM
- For managing SSL Certificates
First, we'll start with security,
- Navigate to https://console.aws.amazon.com/acm/home?region=us-east-1#/, and click
Request A Certificate. - Choose "public certificate" and when you're prompted for your domain name, enter your domain. If you purchased super-cool-domain.com, that's what you'll enter here.
- Choose DNS validation and finally click "Confirm Request". This will trigger a Certificate Request to AWS. If you open up the context menu for the new Certificate Domain you requested, you'll see a CNAME.
- Copy and paste the CNAME / Value into a Cloudflare DNS record. Once you do so, wait a bit and eventually your Certificate Request will go from "Pending Validation State", to "Issued". This step can take a while, so again, be patient! Once the certificate is issued, we can move on to S3.
With a valid certificate in hand, navigate to https://s3.console.aws.amazon.com/s3/home?region=us-west-2:
- Click the
create bucketbutton, naming the S3 bucket anything you wish. Do remember S3 bucket names must be globally unique, so if your name is taken, try a more unique name. - Once you create the bucket, open your bucket up, click Properties, scroll all the way to the bottom, and enable static website hosting, you can leave the defaults as long as you name your file
index.html. - Next navigate to the permissions tab of your bucket, and add the following bucket policy (make sure to replace $bucket_name with your bucket name, if you mispell the bucket name, the UI won't let you save the policy)
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "",
"Effect": "Allow",
"Principal": {
"AWS": "*"
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::$bucket_name/*"
}
]
}- Next, upload an
index.htmlfile into your freshly created bucket.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello!</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is a simple paragraph.</p>
</body>
</html>- Now, go back to the property tab, and find the link to your static site at the bottom of the page, you should be able to go to a domain that looks similar to
http://$yourbucketname.s3-website-us-east-1.amazonaws.com/. Navigating to that link should show you your Hello World HTML Page.
Cool! you're on the internet, but you haven't connected your domain to the bucket, you don't have a CDN in front of it and you also don't have SSL set up, that's where Cloudfront comes in!
- Navigate to https://console.aws.amazon.com/cloudfront/v3/home,
- Click the "Create Distribution Button" and choose your s3 static website from the drop down.
- Under the "Alternate Domain Name" section, make sure you enter your domain (For Example, super-cool-domain.com). Cloudfront has a lot of functionality, feel free to look through the options, and choose the ones that make the most sense for you.
- Choose, the Custom SSL Certificate that you created in ACM
- For the cost concious folks, make sure not to enable the extra caching layer, and you may want to only use the edge locations that are geographically closest to your intended audience.
- Once you've selected all of your options, click Create Distribution.
- Once the distribution is created, take the domain name given, which will look like "some-random-characters.cloudfront.net", and create a CNAME.
- The CNAME should look like
super-cool-domain.comsome-random-characters.cloudfront.net
Once your distribution is created, and you've pointed DNS at your cloudfront distribution, you may navigate to https://super-cool-domain.com. At this point, you should be ready to withstand the inevitable barrage your newest blog post will generate once it hits front page on Hacker News!