Architecting a Production-Ready Static Website on AWS

Introduction

The primary task is to deploy a new public-facing website for our marketing department. The site, while containing only static content (HTML, CSS, JavaScript), needed to meet stringent production-grade requirements: global low-latency performance, robust security with HTTPS, high availability, and minimal operational cost.

A traditional approach using a dedicated server, such as an EC2 instance, was considered but ultimately dismissed. For a site with no server-side processing, this would introduce unnecessary management overhead, patching responsibilities, and higher costs.

Instead, a modern serverless architecture was designed to meet all requirements in a more efficient and scalable manner. This design, detailed in the diagram above, leverages a combination of managed AWS services to deliver a world-class user experience without the need to manage a single server. This document serves as the end-to-end technical implementation guide for that architecture.

Project Architect Overview

The flow of a user request to the website follows the architecture shown above

1. Client: The user’s web browser initiates a request by typing in your domain name (e.g., webdemoapp.com).

2. Route 53: Acts as the internet's phonebook. It translates the human-readable domain name into the address of our CloudFront distribution.

3. CloudFront: A global Content Delivery Network (CDN) that serves as the front door to our website. It caches the site's content at edge locations around the world, ensuring fast delivery to users. It also handles the SSL/TLS termination, providing a secure HTTPS connection.

4. AWS Certificate Manager (ACM): Provides the free SSL/TLS certificate that CloudFront uses to enable HTTPS.

5. S3 Bucket: The origin and storage for all our static website files (HTML, CSS, JavaScript, images). CloudFront retrieves the files from this bucket.

Prerequisites

• An active AWS account.

• Your static website files (index.html, etc.) are ready on your local computer.

Step 1: Register a Domain & Create a Hosted Zone

If you don't already own a domain, you can register one directly through AWS. If you own one elsewhere, you can create a hosted zone and point your domain's nameservers to Route 53. This guide assumes the domain is managed in Route 53.

1. Navigate to the Route 53 service. Go to Registered domains and click Register domain.

2. Search for your desired domain, add it to the cart, and complete the purchase.

3. Upon registration, AWS automatically creates a Public Hosted Zone for your domain. This is where we will manage its DNS records. Initially, it will only contain NS and SOA records.

Step 2: Create and Configure S3 Buckets

We will create two S3 buckets: one to hold the website content and another to handle redirects.

2a. Create the Main Content Bucket

1. Navigate to the S3 service and click Create bucket.

2. Bucket name: Enter your exact root domain name (e.g., webdemoapp.com).

3. Scroll down to Block Public Access settings. Uncheck "Block all public access" and tick the acknowledgment checkbox. This is necessary to apply a read-only bucket policy later.4

4. Click Create bucket.

2b. Enable Static Website Hosting on the Main Bucket

1. Open the new bucket (webdemoapp.com), go to the Properties tab, and find the Static website hosting section. Click Edit.

2. Enable hosting, choose Host a static website, and set the Index document to index.html. Click Save changes.

   

3. After saving changes, all you need to do is check that the site is accessible from a public address. Go back to the Static website hosting section to get the temporary URL of the S3 Bucket

   

2c. Create and Configure the 'www' Redirect Bucket

1. Create a second bucket named with the www prefix (e.g., www.webdemoapp.com). Also uncheck "Block all public access" for this bucket.

2. Go to its Properties -> Static website hosting.

3. Enable hosting, but choose Redirect requests for an object.

4. For Host name, enter your root domain (webdemoapp.com) and set the Protocol to https. Save changes.

   

   

Step 3: Upload Website Files & Set Bucket Policy

1. Navigate to your main content bucket (webdemoapp.com). It will be empty. Click Upload to add your website's files and folders.

   

   

2. Go to the Permissions tab of the main bucket. In the Bucket policy section, click Edit.

3. Paste the following JSON policy to grant public read access to the objects. Remember to use your actual bucket name in the Resource line.

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

4. Click Save changes.

Test Buckets with Route 53 (HTTP Only)

Before configuring the global CDN and SSL, we will perform an interim test to confirm our S3 buckets are correctly configured. We will temporarily point our domain and subdomain directly to the S3 website endpoints.

Important Note: This setup will only work over http://. The primary purpose is to verify that the main bucket serves content and the www bucket redirects correctly. These DNS records will be deleted and replaced in a later step when we point the domain to CloudFront.

1. Navigate to your Hosted zone in Route 53 and click Create record.

2. Create a record for the root domain (webdemoapp.com):

   • Leave the Record name blank.

   • For Record type, select A - Routes traffic to an IPv4 address...

   • Enable the Alias toggle.

   • For Route traffic to, choose "Alias to S3 website endpoint".

   • Select the region your bucket is in (e.g., us-east-1).

   • Select your S3 website endpoint from the list (it will be named s3-website.us-east-1.amazonaws.com).

   • Click Create records.

3. Create a record for the www subdomain (www.webdemoapp.com):

   • Click Create record again.

   • Set the Record name to www.

   • Configure this record as an Alias A record pointing to the S3 website endpoint for your www.webdemoapp.com bucket.

   • Click Create records.

4. Test the Configuration:

   • Wait a few minutes for DNS to propagate.

   • Open your browser and navigate to http://webdemoapp.com. You should see your website's index.html page.

   • Navigate to http://www.webdemoapp.com. Your browser should automatically redirect to http://webdemoapp.com.

     

Step 4: Provision an SSL/TLS Certificate with ACM

1. Navigate to AWS Certificate Manager (ACM). Important: You must be in the US East (N. Virginia) us-east-1 region.

2. Click Request a certificate, choose Request a public certificate.

3. Enter both your root domain (webdemoapp.com) and www domain (www.webdemoapp.com).

4. Select DNS validation and click Request.

   

   

   

Step 5: Validate Domain Ownership

1. After requesting, the certificate status will be "Pending validation".

   

2. To validate, click the "Create records in Route 53" button. This will automatically add the required CNAME validation records to your hosted zone.

   

3. Confirm by clicking Create records. After a few minutes, the certificate status will change to "Issued".

   

Step 6: Create a CloudFront Distribution

1. Navigate to CloudFront and click Create distribution.

2. Origin domain: Manually enter the S3 bucket's website endpoint (e.g., http://webdemoapp.com.s3-website-us-east-1.amazonaws.com). Do not select the bucket from the dropdown.

   

3. Viewer protocol policy: Select Redirect HTTP to HTTPS.

   

4. Alternate domain name (CNAME): Add both webdemoapp.com and www.webdemoapp.com.

5. Custom SSL certificate: Select the certificate you created in ACM from the dropdown.

   

6. Click Create distribution. The deployment will take 5-15 minutes.

Step 7: Configure DNS to Point to CloudFront

1. Navigate back to your Hosted zone in Route 53 and click Create record.

2. Leave Record name blank, select A type, and enable the Alias toggle.

3. For Route traffic to, choose "Alias to CloudFront distribution" and select your new distribution from the list. Click Create records.

   

4. Create another A record, this time with www as the Record name, and point it to the same CloudFront distribution.

Step 8: Final Verification

1. Your Route 53 hosted zone should now contain A records for the root and www domains pointing to CloudFront, along with the CNAME validation records.

   

2. Once CloudFront has finished deploying, open a browser and navigate to https://webdemoapp.com. Your site should load securely. Test that http:// and www versions all redirect correctly to your main, secure URL.

Congratulations! You have successfully architected and deployed a secure, scalable, and production-ready static website on AWS.