Building a scalable frontend doesn't require managing heavy EC2 instances. In this case study, we document exactly how we deployed www.nlgtheatersonlinebook.in using a serverless approach that costs less than $1.00/month.

Diagram showing User -> Route53 -> CloudFront -> S3 Bucket

Figure 1: The Request Flow from DNS to Edge Location to Origin Storage

1. The Origin: S3 Static Website Hosting 💾

Amazon S3 acts as our origin server. While the setup is straightforward, the permissions are where most developers fail.

Critical Configuration Steps
  1. Create a bucket matching your exact domain name (e.g., www.nlgtheatersonlinebook.in).
  2. Uncheck "Block all public access".
  3. Enable Static Website Hosting in the properties tab.
The Bucket Policy (Copy/Paste)

To make the site readable, you must apply this JSON policy. Replace YOUR-BUCKET-NAME with your actual bucket name.

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

2. Performance: Global Caching with CloudFront 🚀

Hosting directly from S3 is slow for international users. We implemented CloudFront to cache content at over 400+ Edge Locations.

Security Enhancement: OAC

We utilized Origin Access Control (OAC) instead of the older OAI. This ensures that users cannot bypass the CDN to access the S3 bucket directly, protecting your bandwidth costs and enforcing security headers.

Configuration Highlights:
  • Viewer Protocol Policy: Redirect HTTP to HTTPS.
  • Alternate Domain Names (CNAMEs): Added www.nlgtheatersonlinebook.in.
  • Custom SSL: Linked to AWS Certificate Manager (ACM) in us-east-1.

3. DNS Routing & SSL Validation 🌐

AWS Route 53 manages our DNS. Crucially, we used an Alias Record rather than a CNAME. Alias records are specific to AWS resources and resolve faster at the zone apex.

4. Cost Analysis: Is it worth it? 💰

One of the main reasons for this migration was cost reduction. Here is the breakdown of our monthly bill for 10,000 visitors.

Service Usage Metric Est. Monthly Cost
Amazon S3 Storage (1GB) & GET Requests $0.05
CloudFront Data Transfer Out (5GB) $0.45 (Free tier eligible)
Route 53 Hosted Zone $0.50
Total Monthly Cost ~$1.00

5. Troubleshooting Common Errors 🔧

This usually happens if the Bucket Policy is missing or if "Block Public Access" is still turned on. Double-check the JSON policy provided in Step 1.

CloudFront caches files by default for 24 hours. You need to create an Invalidation for /* to force a refresh of your content immediately.