Setting Up a Static Website on AWS S3 for Newbies

hiro

Hiroko Nishimura

Posted on February 25, 2019

Setting Up a Static Website on AWS S3 for Newbies

Setting Up a Static Website on AWS S3 for Newbies

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!

SSL Secured!

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

{
    "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

CloudFront Distribution Setup

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
  • 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

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://.

Architecture of Static Website on AWS

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:

💖 💪 🙅 🚩
hiro
Hiroko Nishimura

Posted on February 25, 2019

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related