DEV Community

Ananthika C
Ananthika C

Posted on

Workshop on Cloud Native Systems & AI Integra

#aws #cloud #infrastructure #tutorial

🚀 What I Explored

Let's go through what I did step by step.

1. 🪣 Creating an Amazon S3 Bucket

I started by exploring Amazon S3 (Simple Storage Service).

Amazon S3 is an object storage service that allows us to store and retrieve different types of data such as images, documents, HTML files, videos, application assets, and backups.

For the workshop, I created an S3 bucket with the name:

ananthika-05-15092026
Enter fullscreen mode Exit fullscreen mode

After creating the bucket, I explored the different options available for managing objects, permissions, and website hosting.

Figure 1: Creating my Amazon S3 bucket.

2. 🖼️ Uploading an Image Object

Once the bucket was created, I uploaded an image into it.

This was my first practical interaction with S3 as an object storage service.

The image became an object inside my bucket, allowing me to understand how S3 stores individual files and organizes them using object keys.

Figure 2: Uploading an image object to my S3 bucket.

This simple step helped me understand one of the fundamental concepts of S3: storing files as objects inside a bucket.

3. 🌐 Uploading My Portfolio Website

After uploading the image, I uploaded my index.html file to the same S3 bucket.

This index.html contained my portfolio website.

My bucket now contained both the image and the HTML file:

ananthika-05-15092026/
│
├── image
│
└── index.html
Enter fullscreen mode Exit fullscreen mode

Figure 3: My image and index.html stored inside the S3 bucket.

At this point, the files were stored in S3, but I still needed to configure the bucket to serve the HTML file as a website.

4. 🌐 Enabling Static Website Hosting

Next, I configured my S3 bucket for static website hosting.

I enabled the static website hosting option and specified:

Index document: index.html
Enter fullscreen mode Exit fullscreen mode

This tells S3 which HTML file should be served as the main page when someone accesses the website.

Figure 4: Enabling static website hosting and setting index.html as the index document.

This was an interesting step because I could see how a simple HTML file stored in cloud storage could be served as an actual website.

🔐 5. Configuring the S3 Bucket Policy

The next step was configuring permissions.

Simply uploading index.html to S3 doesn't automatically make it publicly accessible.

To allow users to retrieve the website objects, I configured an S3 bucket policy using JSON.

The policy I worked with followed this structure:

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::ananthika-05-15092026/*"
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

Here, the important part is:

"Action": "s3:GetObject"
Enter fullscreen mode Exit fullscreen mode

This specifies that the objects in the bucket can be retrieved.

The resource:

"arn:aws:s3:::ananthika-05-15092026/*"
Enter fullscreen mode Exit fullscreen mode

refers to the objects inside my S3 bucket.

After configuring the required permissions, my S3-hosted website became accessible through the website endpoint.

🖥️ 6. Viewing My Portfolio Website

The next exciting part was actually seeing my portfolio website running.

My index.html, which was initially just a file sitting inside an S3 bucket, was now being served as a website.

Figure 6: My portfolio website hosted using Amazon S3.

This helped me understand how static websites can be deployed without setting up a traditional web server.

The basic flow was:

index.html
     ↓
Amazon S3
     ↓
Static Website Hosting
     ↓
Website Endpoint
     ↓
My Portfolio
Enter fullscreen mode Exit fullscreen mode

⚡ 7. Creating an Amazon CloudFront Distribution

After successfully hosting my portfolio using S3, I explored Amazon CloudFront.

CloudFront is AWS's Content Delivery Network (CDN). It is designed to deliver content to users through a globally distributed network of edge locations, helping reduce latency.

I created a CloudFront distribution and configured my S3 bucket as the origin.

The architecture now looked like this:

                    ┌─────────────────┐
                    │      User       │
                    └────────┬────────┘
                             │
                             ▼
                    ┌─────────────────┐
                    │  Amazon         │
                    │  CloudFront     │
                    │      CDN        │
                    └────────┬────────┘
                             │
                             ▼
                    ┌─────────────────┐
                    │    Amazon S3    │
                    │                 │
                    │   index.html    │
                    │     image       │
                    └─────────────────┘
Enter fullscreen mode Exit fullscreen mode

Once the distribution was created, CloudFront provided a distribution domain that could be used to access the content.

Top comments (0)