Static Website Hosting With Amazon S3, Route 53, ACM, And CloudFront

Photo by Markus Spiske on Unsplash
AWS Services for Secure Static Website Hosting
  1. Transfer your existing domain to Route 53
  2. Setup your website on S3
  3. Generate your HTTPS certificate with ACM
  4. Distribute your website using Amazon CloudFront

1. Transfer Your Existing Domain To Route 53

Route 53, Amazon’s DNS service, lets you register a new domain or transfer an existing domain you own from your previous provider to AWS. The following lines are describing the necessary steps to transfer an existing domain to AWS. To transfer an existing domain first check the transfer requirements for top-level domains from the Route 53 documentation. If you do not find any blocking points transferring a domain to AWS is easy. Two mandatory steps are needed which you have to perform with your current domain provider (not with AWS).

  1. Unlock your domain so that the transfer can be started
  2. Get the Authorization code from your current provider for the domain you want to transfer.
You can either register a new domain or transfer an existing one via Route 53
The domain was correctly unlocked
Warning message shows that the domain was not (yet) correctly unlocked and cannot be transferred to AWS
Using the Route 53 DNS servers needs a Hosted Zone for your domain name
The hosted zone with the name server was successfully created
The previously created hosted zone can now be selected. For the transferred domain the Route 53 DNS servers will now be used. This is the recommended option to select

2. Setup Your Website On S3

Let’s assume that you want to reach your static website content via the domain my-domain.com and requests to www.my-domain.com should be automatically redirected to my-domain.com.

Name the bucket according to your domain name
Allow read access with a bucket policy — for copy and paste use the below snippet
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::my-domain.com/*"
}
]
}
Enable Static website hosting for your bucket my-domain.com
A second bucket will serve www.my-domain.com via a redirect to the first bucket my-domain.com

3. Generate Your HTTPS Certificate With ACM

Due to the fact that HTTPS is a MUST for serving secure website content, we have to generate a public certificate using the AWS Certificate Manager (ACM).

Amazon AWS Certificate Manager
Request a free public certificate
Use a wildcard to include all subdomains
If you host your domain with Route 53, AWS can automatically create a CNAME record to prove that the request is from the domain owner
Validation successfully passed and certificate finally issued

4. Distribute Your Website Using Amazon CloudFront

Due to the fact that Amazon S3 uses an SSL wildcard certificate which cannot be used for custom domains you cannot have a static website hosted on S3 reachable via HTTPS without using CloudFront. In the previous step, we have created our own certificate for the domain *.my-domain.com which we now use within Amazon CloudFront to make our domain reachable via HTTPS. We put Amazon CloudFront in front of our website to finally have a securely hosted website on the one hand. With the CDN (Cloud Delivery Network) you will have a website that is close to your users and which will load fast — i.e. users from the US will get the data from US-based servers and users in Europe from a server somewhere in Europe.

Click Get Started to create a Web Distribution
Forcing HTTPS via the Viewer Protocol Policy
Specify the CNAMES and choose your own SSL certificate
  1. CNAME-A for my-domain.com
  2. CNAME-AAAA for my-domain.com
  3. CNAME-A for www.my-domain.com
  4. CNAME-AAAA for www.my-domain.com
CNAME-A for my-domain.com pointing to our created CloudFront Distribution

You’ve Reached Your Destination

That’s it. You now have a static website that you can access securely via HTTPS on a low-cost footprint of S3 within a highly scalable cloud environment of Amazon AWS.

Photo by Kolleen Gladden on Unsplash

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Frank Haubenschild

Frank Haubenschild

53 Followers

Dad, Software Engineer, Photographer, Reef- & Bee-Keeper, Founder, Drone Pilot — 🤓 💻 📷 🐝 🐠 💡👨‍✈️