Setting Up a Static Website on AWS S3 for Newbies
Hiroko Nishimura
Posted on February 25, 2019
Originally published at AWS Newbies.
Here, we’ll set up a static website (think HTML and CSS and no moving parts) hosted on Amazon Web Services (AWS) S3, which can be accessed by your own domain, at domain.com, protected with SSL (think https:// instead of http://).
Anyone who types in domain.com on their browser will be forwarded to https://www.domain.com so that you can have that fancy “Your connection is secure” lock!
If you are completely new to AWS, I recommend you take a look at the Intro to AWS for Newbies eBook before you embark on this. If you just want to figure out how to create that static website, read on!
We will go over setting up the website where the domain name is registered through Route 53, AWS's Domain Name Registrar.
Setting up Website with domain registered at Route 53
Purchase domain in question using Route 53
- Go to Route 53 and purchase a new domain for $12 by following the prompts
Request SSL certificate from AWS Certificate Manager (ACM)
- Go to AWS Certificate Manager (ACM) and request a certificate for www.domain.com
- Include domain.com as another domain to protect with the same certification
- Select DNS Validation and validate via “Create record in Route 53“
- Confirm after 30 minutes or so that validation was completed
Create the website in S3
I went over how you can upload a static website on S3 here: How to host a Static Website with S3
- Go into S3 and create 2 buckets: domain.com and www.domain.com
- Set domain.com S3 bucket to redirect to www.domain.com
- Protocol should be set to https
- The website will be hosted in the www.domain.com S3 bucket
- In the www.domain.com bucket, set Bucket Policy to THIS:
{
"Version":"2012-10-17",
"Statement":[
{
"Sid":"PublicReadGetObject",
"Effect":"Allow",
"Principal": "*",
"Action":["s3:GetObject"],
"Resource":["arn:aws:s3:::www.domain.com/*"]
}
]
}
Here’s AWS’s documentation on how this would work: Setting up a Static Website using Custom Domain.
Create new CloudFront Distributions
Create CloudFront Distribution for domain.com
- Go to CloudFront and create a new distribution
- Choose “Web” for delivery method
- Get the Endpoint URL for domain.com S3 bucket to set as Origin Domain Name instead of the bucket from the dropdown menu
- Go to… S3 -> Bucket Name -> Properties -> Static website hosting
- Looks something like: http://xyzwxyz-12rdklfj3e-us-east-1.s3-website-us-east-1.amazonaws.com
- Set the SSL cert to the certificate just verified with ACM
- Make all HTTP redirect to HTTPS
- Enter domain.com as CNAME
- Leave everything else as default
- This will also take a while to go through
Create another CloudFront distribution for www.domain.com with same settings
- Enter www.domain.com as CNAME
Here’s AWS’s documentation on how to create this distribution: Speed Up Your Website with Amazon CloudFront.
Create A records in Route 53
Go back to Route 53 and create A Records to point to the new CloudFront distributions.
- Create A record for domain.com and point it to the CloudFront distribution for domain.com
- Create A record for www.domain.com and point it to the CloudFront distribution for www.domain.com
- Both can be found in the dropdown under “alias”
Here’s AWS’s documentation on how this works: Using Route 53 for DNS.
What Does the Architecture Look Like?
I was streaming this setup on Twitch, and I realized it’ll be nice to have a diagram of the architecture of what we’re building!
We’ve set up 2 sets of CloudFront distributions and S3 buckets to route all different kinds of traffic to all eventually end up at https://www.domain.com.
Below, you can see how the redirects are working for all different ways someone might try to access your website using different combinations of www., http:// and https://.
That's It!
And that's it! The whole process should take 30 minutes to 1 hour (mostly because it takes time for these things to load. This was originally published on my Introduction to AWS website, AWS Newbies. You can read the original HERE.
If you are interested in other introductory Cloud Computing and AWS documentations and resources, here are some of my other projects:
- Introduction to AWS for Non-Engineers: 1 Cloud Concepts | Video Course on Lynda.com
- Intro to AWS for Newbies | eBook on awsnewbies.com
- Intro to AWS for Newbies | Free Newsletter Course on awsnewbies.com
Posted on February 25, 2019
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.