Hosting A Static Website on AWS using Amazon S3, CloudFront, Route53 and ACM.

Hello Cloud Enthusiasts, In my previous article, I explained in detail how to host a static website on AWS using S3. The static website had a bucket website endpoint which is long and is difficult for users to remember, also it is not secured. In this article, I will explain how to host static websites using S3, CloudFront, Route53 and ACM, these will make the website secured, have a custom domain name, fast and globally available with ultra minimal latency. So, Lets dive in …….

OVERVIEW OF AWS SERVICES USED

1. Amazon S3: Amazon S3 (Simple Storage Service) is a cloud-based object storage service provided by Amazon Web Services (AWS). It is designed to store and retrieve any amount of data over the internet. S3 is highly scalable, durable, and secure, making it one of the most popular storage solutions for various types of data, including images, videos, documents, backups, and application data. It offers 99.999999999% (11 nines) durability for stored objects.
2. CloudFront: Amazon CloudFront is a content delivery network (CDN) service designed to deliver content, including web pages, images, videos, applications, and other static and dynamic assets, to users with low latency and high data transfer speeds. CloudFront accelerates the delivery of content by caching it in a network of globally distributed edge locations, which are geographically distributed data centers around the world.
   It integrates with other AWS services like AWS Identity and Access Management (IAM) and AWS Certificate Manager (ACM) for secure access and SSL/TLS encryption.
3. Route53: Route 53 is a highly scalable and reliable Domain Name System (DNS) web service provided by Amazon Web Services (AWS). It is named after the UDP port 53, which is used for DNS requests. Route 53 helps businesses and developers manage and route internet traffic for domain names and web applications with high availability, low latency, and robust DNS management capabilities.
4. Amazon Certificate Manager (ACM): AWS Certificate ManagerACM allows you to request public SSL/TLS (Secure Sockets Layer/Transport Layer Security) certificates for domain names used with AWS services, such as Amazon CloudFront, Elastic Load Balancing, Amazon API Gateway, and more.

Lets Host our website in a secured, reliable and fast way in the following steps!!!

1. Create an S3 Bucket for static website hosting
   Search for the S3 service on the AWS console.

On the S3 dashboard, click “create bucket”

Enter a unique name for your bucket, this is important because S3 bucket names are globally unique, then select the region you want the bucket to be hosted in.

Scroll down and click on ACLs (Access Control Lists) enabled, this will allow you to specify access to the bucket using Access Control Lists.

For now, uncheck “Block all Public access”. This allows your bucket contents to be publicly accessible.

Please note that I unchecked the option as a temporary measure to test if our website can be accessed while hosted on S3. However, we will promptly turn it back on once we confirm its functionality because leaving the option “Block all public access” unchecked exposes our website content and data to the public internet, including potential hackers and malicious entities, making it insecure.

Keep all other contents at their default settings and proceed by clicking on the “create bucket” option.

Now, click on the bucket name from the list of buckets and click upload.

Next, click add files or add folders to add the html, css and javascript files of your website.

When you are done adding your website files and folders, click on upload.

Configure S3 Bucket Permissions for Website Access. Click on the permissions tab in your S3 bucket, click on edit permission, and paste the JSON configuration below:

{
    "Version": "2008-10-17",
    "Id": "PolicyForCloudFrontPrivateContent",
    "Statement": [
        {
            "Sid": "AllowCloudFrontServicePrincipal",
            "Effect": "Allow",
            "Principal": {
                "Service": "cloudfront.amazonaws.com"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::YOUR_BUCKET_NAME/*",
            "Condition": {
                "StringEquals": {
                    "AWS:SourceArn": "arn:aws:cloudfront::396529431040:distribution/E2TM1KE84PM7EN"
                }
            }
        }
    ]
}

This policy allows CloudFront to distribute Objects (website contents) from the specified S3 bucket (“Resource”: “arn:aws:s3:::YOUR_BUCKET_NAME/*”) to edge locations.
Replace the “YOUR_BUCKET_NAME” in the configuration with your bucket name and click on save.

Next, click on properties tab, scroll down to static hosting and click on it, by default it is disabled, click on “Enable”. Under index document, type the index document of your website (index.html). If your website has an error page (e.g 404 error page), you can optionally type the error page under “Error document — optional”.

The website has been successfully hosted on S3. To access it, simply scroll down and locate the “Bucket website endpoint.” Copy this endpoint and paste it into your web browser, granting you full access to our website.

If you scroll to the padlock beside the website endpoint url, you will notice that it is not secured. We will use CloudFront to securely serve website contents to users and also ACM to add an extra layer of security using TLS (Transport Layer Security) certificates.

Now, click on propriety tab and check the “block all public access” save, and then continue with the steps below.

2. Configure Route53 for DNS Management

Prior to configuring Route53 for DNS management, We need to purchase a custom domain name from a domain registrar, you can buy a domain name on namecheap, or GoDaddy.

Next, on the AWS Console, search for Route53, click on it then click on hosted zones and create hosted zone.

Next, type the name of the custom domain you purchased on Namecheap or GoDaddy. Scroll down and click on “create hosted zone”.

If you click on your domain name under hosted zone names, and then scroll down and check Records tab, you should see two records (NS and SOA)

Next, copy the NS (Name Servers) records.
Go to your domain registrar (e.g Namecheap or GoDaddy), under Domain List , locate your domain name, click on manage and then paste the NS records copied under “Custom DNS”. Accept changes and move to the next step.

3. Create a SSL/TLS Certificate for CloudFront

On the AWS console search for “AWS Certificate Manager” (ACM), click on Certificate Manager

Once there, select “Request a certificate.” In the provided field, enter your custom domain name (e.g., savvytek.online). Choose DNS validation as the preferred method and proceed by clicking on the “Request”.

Click on “View Certificate”, then click on the certificate ID and click on “create records in route53”, click on “create records” then wait while the status change from “pending validation” to “issued.

Go back to Route53, refresh the page, you should see a new CNAME record and you are done with ACM.

4. Configure CloudFront Distributions for Website Delivery

On the AWS console, search for CloudFront. On the CloudFront dashboard, click on “create CloudFront distribution”, and select your S3 origin domain in the “origin domain” field.

Under origin access, choose, Origin access control settings (recommended). Select the S3 bucket under Origin access control. Click Copy policy, you will have to update the S3 bucket policy using the copied policy

• Scroll down, Ensure viewer protocol policy is “HTTP and HTTPS”. Allowed HTTP methods, GET, HEAD. For Cache Key and origin requets, choose, “Cache policy and origin request policy (recommended)”. Under Origin request policy-optional, Choose AllViewer.

Scroll down and input your domain name into the “Alternate domain name (CNAME)” field. Next, choose your certificate manager in the “Custom SSL certificate” field, and in the “Default root object” field, specify the index html file for your website.

scroll down and click on “save changes”.

• Navigate to your S3 bucket, replace the bucket policy with the policy copied during Cloudfront configuration.
• Now, navigate back to cloudfront. Access your website securely by following these steps: Go to the “General” section of your distribution dashboard and copy the CloudFront “Distribution domain name.” Then, paste it into your web browser.

You will observe that the “Distribution domain name” is too long and will not be easy for clients or users to remember. This brings us to the final step which is “Configuring Route53 for DNS Management”.

5. Configuring Route53 for DNS Management

To set up a record in the Route53 dashboard, click on the hosted zone, locate your domain name, and click “Create record.”

Turn on the alias option, specify the record type, in the “Route traffic to” field, select your CloudFront “Distribution domain name” and chose the simple routing policy, then click on “create records”.

After creating your records, click on “View status” to determine when your domain name is ready for use in accessing your website.

If the status is “INSYNC”, this means you can now access your website using your custom domain.

Type your custom domain on your browser to view your website fully secured, fast and reliable.

Congratulations on successfully hosting your static website on AWS in just 5 steps. Amazon S3, CloudFront, ACM and Route53 together provide a powerful solution for Hosting, Caching, and DNS management, ensuring a reliable and cost-effective hosting experience on AWS. Thank you for following this guide until the end, and here’s to many more successful hosting endeavors! Cheers!