DEV Community

Cover image for 🌐 AWS 139: Serverless Hosting - Static Websites with Amazon S3
Hritik Raj
Hritik Raj

Posted on

🌐 AWS 139: Serverless Hosting - Static Websites with Amazon S3

#aws #s3 #webhosting #100daysofcloud

AWS

🚀 The Zero-Server Portal: High-Performance Static Hosting on S3

Hey Cloud Builders 👋

Welcome to Day 39 of the #100DaysOfCloud Challenge!
Today, the Nautilus DevOps team is streamlining infrastructure. We are moving away from managing web server software like Nginx for static content and embracing Amazon S3 Static Website Hosting. This allows us to host an internal information portal that is globally accessible, highly durable, and requires zero server maintenance.

This task is part of my hands-on practice on the KodeKloud Engineer platform, which I highly recommend for anyone looking to master real-world DevOps scenarios.

🎯 Objective

  • Create a globally unique S3 bucket named nautilus-web-14837.
  • Enable Static Website Hosting with index.html as the entry point.
  • Configure Public Access by disabling "Block Public Access" settings.
  • Apply a Bucket Policy to allow anonymous read access.
  • Deploy the index.html file from the aws-client host and verify the live URL.

💡 Why S3 Static Hosting is a DevOps Win

Traditional web servers waste money when idle and require patching. S3 is "serverless," meaning it scales automatically to handle any amount of traffic with zero configuration.

🔹 Key Concepts

  • Bucket Website Endpoint  
    A unique URL (e.g., http://bucket-name.s3-website.region.amazonaws.com) that renders HTML files in the browser instead of downloading them.

  • Block Public Access (BPA)  
    A safety feature that prevents accidental data exposure. For a public website, we must explicitly turn this off.

  • Index Document  
    The file S3 looks for when a user visits the root address. If this isn't set, users will see an error or a list of your files.

🛠️ Step-by-Step: The Static Web Workflow

🔹 Phase A: Create and Configure the Bucket

  • Create Bucket: Use the CLI or Console to create nautilus-web-14837.

  • Enable Website Hosting: Under the Properties tab, scroll to "Static website hosting" and click Edit. Enable it and specify index.html as the Index document.

  • Open Public Access: In the Permissions tab, click Edit under "Block public access" and uncheck all the boxes.

🔹 Phase B: Authorize the Public (Bucket Policy)

Disabling the block isn't enough; we must explicitly "Allow" everyone to see the files. Add this JSON to your Bucket Policy:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::nautilus-web-14837/*"
        }
    ]
}
Enter fullscreen mode Exit fullscreen mode

🔹 Phase C: Deploy the Portal

  • Locate File: Ensure index.html is ready at /root/ on your aws-client.
  • Upload: Use the AWS CLI to push the file to the bucket: 
aws s3 cp /root/index.html s3://nautilus-web-14837/
Enter fullscreen mode Exit fullscreen mode

✅ Verify Success

  • Find the Link: Go to the Properties tab and scroll to the bottom to find your Bucket website endpoint.

  • Confirm: 🎉 Click the link. If your "Internal Information Portal" renders correctly in your browser, mission accomplished!

📝 Key Takeaways

  • 🚀 Serverless Scalability: S3 can handle massive traffic spikes without you ever needing to scale a server.
  • 🛡️ Read-Only Security: The policy only grants s3:GetObject. Public users can see the site but cannot delete or change your files.
  • 🕒 Wait for Propagation: Policy changes are usually instant, but give it a few seconds if you see a "403 Forbidden" right after saving.

🚫 Common Mistakes

  • BPA Conflict: Applying a public policy while "Block Public Access" is still turned on. AWS will prioritize the block!
  • Wrong URL: Using the standard S3 ARN or REST URL. Only the Website Endpoint will correctly render the HTML.
  • Missing Policy: Forgetting the /* at the end of the Resource ARN in your policy. Without it, the policy applies to the bucket itself, not the files inside.

🌟 Final Thoughts

You’ve just built a highly durable, low-cost web portal! Hosting static assets on S3 is a core skill for modern frontend deployments (React, Vue, Angular). Next, we could look at adding Amazon CloudFront to enable HTTPS and lightning-fast global delivery!

🌟 Practice Like a Pro

If you want to try these tasks yourself in a real AWS environment, check out:
👉 KodeKloud Engineer - Practice Labs

It’s where I’ve been sharpening my skills daily!

🔗 Let’s Connect

Top comments (0)