How to host a Secure Static Website on Amazon Cloud using Cloudfront, S3, Route53 & ACM for SSL.

In this post, you will learn how to:

1. Create an S3 bucket and set it up for static website hosting
2. Create a record set in Route 53
3. Set up a CloudFront distribution and link it with a custom domain
4. Secure the connection via SSL and AWS Certificate Manager

The diagram above is a graphical representation of the architecture we will be setting up. We will be hosting our static website content on Amazon S3 bucket. Then, we will setup a custom domain name with AWS Route53 as our DNS, create SSL certificate to secure our content and finally, configure Cloudfront CDN for content caching and distribution.
We are going to create the static website in two ways -

1. Serve the website publicly via HTTP protocol using S3 website endpoint.
2. Serve the website publicly via HTTPS protocol using SSL from ACM and Cloudfront.

Prerequisite

• A domain name (You can get a free domain from Freenom )

• An Amazon account (Register for a AWS Free Tier Account )

• A static website

Let's get started!

Static Website Setup with HTTP protocol using S3 website endpoint.

Setup S3 bucket
Amazon S3 or Amazon Simple Storage Service is a service offered by Amazon Web Services that provides object storage through a web service interface.

Login into your AWS account, select your region at top right of your dashboard and search for S3 in the top search bar.

1. Click on create bucket.
   We are going to create two buckets. (Note: This must be the name of your domain and or your subdomain, for example yourdomainname.com and www.yourdomainname.com)

2. Enter your bucket name. AWS S3 is a global resource hence, your bucket name must be globally unique.

3. Verify and select the region nearest to you or where you would like to serve your content from.

1. Uncheck the box under Block Public Access settings for this bucket and click on the checkbox to acknowledge your content will be visible to the public

1. To upload the website content, Click on the bucket and click upload. Navigate to the your files and folders of website from your computer and drag and drop. Then, click upload.

1. To configure the bucket, click on the bucket and then properties tab.

1. On the properties tab scroll down to the Static website hosting section, click on edit and select Enable , under Index document, enter index.html and click on save changes.

Finally, we are going to add permission for our content to be viewable to the public.

1. On the permissions tab of the bucket, scroll down to Bucket policy and click on edit

Enter the code snippet below and click on save changes. Make sure to replace oayanda.com with your domain name

{
  "Id": "Policy1669914787641",
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "Stmt1669914786145",
      "Action": [
        "s3:GetObject"
      ],
      "Effect": "Allow",
      "Resource": "arn:aws:s3:::oayanda.com/*",
      "Principal": "*"
    }
  ]
}

Notice the red notification under your bucket name - Publicly accessible, now your website is publicly accessible.

At this point, the public can view your website content via S3 object URL which look something like this https://s3.eu-west-2.amazonaws.com/oayanda.com/index.html.
You can see your S3 object URL by navigating to
Amazon S3 > bucket name > index.html

This is fine but not memorable nor user friendly, hence we are going to setup route 53. Before we go further, let's create the second bucket _**www.yourdomainname.com**_ for our subdomain. We create this because it's one of the two ways of accessing a domain. For example - google.com or www.google.com.

Don't worry this step is shorter than the first.

Create second Bucket

1. Navigate to Amazon S3 > Buckets > Create bucket
2. Enter your bucket name www.yourdomainname.com
3. Select and verify the region
4. Click on create bucket
5. Finally, navigate to the properties tab of the bucket, scroll down to the Static website hosting section, click on edit, select Enable , under Hosting type, select Redirect requests for an object, under Host name enter your domain name without the www (yourdomainname.com), under Protocol select HTTP and click on save changes.

The AWS S3 dashboard should look like this.

Configure S3 website Endpoint with Route 53
On your AWS dashboard, search for Route 53 in the search bar.

Create a Hosted zone

1. Navigate to Route 53 > Hosted zones > Create hosted zone
2. Under Domain name, enter your domain name (yourdomainname.com)
3. Ensure under Type, Public hosted zone is selected and click Create hosted zone. At this point, two records are created NS (Name Servers) and CNAME(Canonical Name record).

Note: Replace or ensure that the four NS values are the same with your registered domain DNS.

Finally, We will add two records, _**yourdomain.com**_ and _**www.yourdomian.com**_

Add Two A Records
For the first record

1. Click on Create record
2. Leave Record name field blank,
3. Toggle the Alias button
4. Under Route traffic to select Alias to S3 website endpoint
5. Choose the region where your bucket was created
6. select the bucket

For the second record

1. On the same page, click on Add another record
2. This time enter www in the Record name field
3. Toggle the Alias button
4. Under Route traffic to select Alias to S3 website endpoint
5. Choose the region where your bucket was created and select the bucket.
6. Create records

It will take few seconds for the records to SYNC.

Test website in the browser
Enter your domain in the browser, enter yourdomain.com and then www.yourdomain.com. Notice, when you entered www.yourdomain.com the browser redirects you to yourdomain.com.

Note: The web content is only in one bucket yourdomain.com, while the empty bucket www.yourdomain.com redirects to yourdomain.com.

If your website is not showing, sometimes you might need to clear your browser's cache.

Well, this is fine but not secure as you can see from the image above.

Let's make our website secure and increase the speed of distribution round the world by configuring a content delivery network - AWS Cloudfront.

Static Website Setup with HTTPS protocol using AWS Cloudfront and AWS Certificate Manager ACM.

Create two certificates using AWS certificate Manager (ACM)

ACM helps to manage, and deploy public and private SSL/TLS certificates for use with AWS services and your internal connected resources. ACM removes the time-consuming manual process of purchasing, uploading, and renewing SSL/TLS certificates.

To make ensure your website is secure, you need a Secure Sockets Layer (SSL) certificate. On the search bar, type certificate manager and click enter.

Note: At the time of this post, you should create your certificates in North Virgin us-east-1.

Click on Request certificate, ensure Request a public certificate is selected and click next

1. Under Fully qualified domain name enter your first domain name and click on Add another name to this certificate to add the second domain name.
2. Ensure DNS validation is selected. (This is usually faster). This is done to ensure you are the owner of the domain name.
3. Click on Request.

Click on View certificate on the top of the page or click on List certificates

Click on Create records in Route 53 and click create records at bottom of the page to confirm.

This will take some minutes but it's usually faster if purchased your domain from Amazon.

Verify certificate is issued.

Create a bucket

Note With Cloudfront, the name of bucket must not necessarily be the same name as your domain name (for example - oayanda.com), it can be any globally acceptable name.

1. Enter a globally unique name - I will use oayanda-website and click create bucket.
2. Finally, upload the website content into the bucket. We will come back here to give permission to cloudfront after setting it up.

Setup AWS Cloudfront

Amazon CloudFront is a content delivery network (CDN) service built for high performance, security, and developer convenience.

Navigate to AWS Cloudfront on your dashboard.

1. Click Create a CloudFront distribution
2. Under Origin domain select the bucket that holds your website content
3. Under Origin access , select Origin access control settings
4. Under Origin access control , click on create control setting this will allow amazon to automatically create an access policy for your S3 bucket.

Accept the name and click create.

Scroll down to Viewer and select Redirect HTTP to HTTPS

Scroll down to Alternate domain name (CNAME), click on Add item and enter two domain names yourdomain.com and www.yourdomain.com

1. Scroll down to Custom SSL certificate and select your certificate.
2. Scroll down to Default root object, enter default page name - in this index.html and click on create distribution

Finally, we need to give permission to cloudfront on S3.

1. Click on the newly created distribution and click on the origins tab
2. Under Origins selected the origin and click on edit

Scroll down to Bucket policy and click on Copy policy

Navigate to your S3 bucket permissions tab, scroll down to Bucket policy, click on edit and paste the policy you copied from the cloudfront distribution and save changes.

Cloudfront will take some minutes to deploy the configuration

The last step is to add the records in Route 53.
Add Cloudfront Distribution to Route 53

1. Navigate to Route 53, click on create record
2. For the first record, leave the _Record name_blank
3. Toggle the Alias button and select Alias Cloudfront Distribution under Route traffic to field.
4. select the cloudfront distribution for yourdomain.com

1. Click on Add another record
2. Enter www in the Record name
3. Repeat step 3 to 4
4. Finally, click on create records. The records will take some seconds to SYNC

Test your secured website with low-latency in the browser

Enter your domain in the browser first try yourdomain.com and then www.yourdomain.com.

Notice the lock icon in the URL, this means your website is secure.

Congratulation!!! You have successfully deployed a static website via HTTP and HTTPS protocols in AWS.

As always, I look forward to getting your thoughts on this post and aws resources. Please feel free to leave a comment!