DEV Community

HARISH RAJA R
HARISH RAJA R

Posted on

Cloud Computing Foundations & AWS S3 Static Web Hosting

#aws #cloud #webdev #beginners

Author: Harish Raja R

Introduction

Understanding cloud architecture and choosing the right service model is essential for modern web development. Whether you are building monoliths or deploying serverless applications, knowing where your responsibilities lie versus what the cloud provider handles saves time, cost, and infrastructure overhead.

In this guide, we break down cloud service models using the popular "Pizza as a Service 2.0" analogy, examine core AWS infrastructure and security fundamentals, and walk step-by-step through deploying a static portfolio website using Amazon S3.

1. Demystifying Cloud Service Models: "Pizza as a Service 2.0"

When building applications in the cloud, understanding the Shared Responsibility Model is step zero. Responsibility is divided between two main layers:

Customer Responsibility — Blue Layer

The customer is responsible for:

  • Application data
  • Runtime environment
  • User access management (IAM)
  • Source code
  • Guest operating system configurations

Provider Responsibility — Green Layer

The cloud provider is responsible for:

  • Physical host infrastructure
  • Server hardware
  • Virtualization layer
  • Networking hardware
  • Physical datacenter security

The Service Model Spectrum

Service Model Pizza Analogy
On-Premise Homemade
IaaS Communal Kitchen
CaaS Bring Your Own
PaaS Takeaway
FaaS Restaurant
SaaS Party

1. On-Premise / Traditional — Homemade

You maintain full control and management across every layer—from the datacenter facility and hardware to the operating system, runtime, and application code.

2. IaaS — Infrastructure as a Service — Communal Kitchen

The provider manages:

  • Hardware
  • Virtualization
  • Networking

You manage:

  • Operating system
  • Middleware
  • Application stack

Example: Amazon EC2

3. CaaS — Container as a Service — Bring Your Own

The provider manages container runtimes and orchestration engines, while you supply container images and application logic.

4. PaaS — Platform as a Service — Takeaway

The provider manages:

  • OS patching
  • Runtime environments
  • Automatic scaling

You focus primarily on:

  • Application code
  • Dataset management

5. FaaS — Function as a Service / Serverless — Restaurant

FaaS provides on-demand execution of code snippets in response to event triggers, with zero server provisioning or infrastructure upkeep.

Example: AWS Lambda

6. SaaS — Software as a Service — Party

SaaS provides fully managed end-user software delivered directly over the web.

Examples:

  • Google Workspace
  • Microsoft 365

2. Core AWS Security & Infrastructure Concepts

Before provisioning public storage, robust security hygiene must be established.

Root Account Security

The primary AWS root account should be secured with Multi-Factor Authentication (MFA) immediately upon creation.

The root account should be reserved strictly for:

  • Billing
  • High-level account setup

IAM Least Privilege

Daily management should be performed using granular IAM Users and Roles configured according to the principle of least privilege.

This means users and services should receive only the permissions they actually require.

Amazon S3 — Simple Storage Service

Amazon S3 is an object storage service engineered for 99.999999999% data durability, commonly referred to as 11 nines of durability.

Regions & Availability Zones

AWS resources are deployed across geographically isolated infrastructure sites.

Regions and Availability Zones help provide:

  • High availability
  • Fault tolerance
  • Geographic isolation

3. Step-by-Step Hands-On: Hosting a Static Portfolio on Amazon S3

Step 1: Create an S3 Bucket

  1. Open the AWS S3 Console.
  2. Click Create bucket.
  3. Choose a globally unique bucket name.

Example:

harish-raja-r-14-portfolio
Enter fullscreen mode Exit fullscreen mode
  1. Select your target AWS Region.

Step 2: Upload Static Web Assets

  1. Open your newly created bucket.
  2. Upload your static website assets directly to the bucket root.

Typical files include:

index.html
CSS files
Images
Other media assets
Enter fullscreen mode Exit fullscreen mode

Make sure that index.html is available at the root of the bucket.

Step 3: Enable Static Web Hosting

  1. Navigate to the Properties tab.
  2. Scroll down to Static web hosting.
  3. Click Edit.
  4. Select Enable.
  5. Specify: 
index.html
Enter fullscreen mode Exit fullscreen mode

as the Index document.

  1. Save the changes.
  2. Note the generated Bucket Website Endpoint URL.

You can use this endpoint to access your static website.

Step 4: Configure Block Public Access Settings

For direct public S3 website hosting:

  1. Navigate to the Permissions tab.
  2. Locate Block public access (bucket settings).
  3. Click Edit.
  4. Uncheck Block all public access.
  5. Acknowledge the warning/prompt to allow public read permissions.
  6. Save the changes.

Security Note: Public access should only be enabled when it is actually required. For production deployments, a CloudFront-based architecture can provide a more secure setup.

Step 5: Apply S3 Bucket Policy

  1. In the Permissions tab, locate Bucket policy.
  2. Click Edit.
  3. Insert the following JSON policy.
  4. Replace the bucket resource name with your own bucket name. 
{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::harish-raja-r-14-portfolio/*"
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

This policy allows public read access to objects stored inside the specified S3 bucket.

Step 6: Verify the Live Site

  1. Open the S3 Bucket Website Endpoint URL in your web browser.
  2. Verify that the portfolio renders correctly.
  3. Check that:
  • HTML loads correctly.
  • CSS styling is applied.
  • Images and other media assets load correctly.
  • Internal website functionality works as expected.

At this point, your static portfolio website should be accessible through the S3 website endpoint.

4. Next Steps: Enhancing Performance & Security with CloudFront

While S3 static hosting gets your site online quickly, integrating Amazon CloudFront introduces several important operational advantages.

1. Global Edge Caching

CloudFront distributes static assets to edge locations around the world.

This can provide:

  • Lower latency
  • Faster content delivery
  • Improved global performance

2. Origin Access Control (OAC)

Origin Access Control can be used to restrict direct public access to your S3 bucket.

With this architecture, assets can be served through CloudFront while keeping the S3 origin protected.

3. Custom Domain & SSL

CloudFront can be integrated with a custom domain and AWS Certificate Manager (ACM) to provide SSL/TLS certificates.

This allows your website to be accessed securely over HTTPS.

Conclusion

By leveraging Amazon S3 for static hosting and adhering to cloud security best practices, you can deploy cost-effective, durable web applications in minutes.

The combination of:

  • Cloud service models
  • AWS infrastructure fundamentals
  • IAM least-privilege principles
  • Amazon S3
  • Static website hosting
  • CloudFront
  • Origin Access Control
  • SSL/TLS

provides a strong foundation for deploying modern web applications in the cloud.

If you're beginning your AWS journey, hosting a static portfolio on S3 is a practical hands-on project that helps you understand how cloud infrastructure, storage, security, and web deployment work together.

Top comments (0)