DEV Community

MOHA PRASATH SA
MOHA PRASATH SA

Posted on

# Day1: Deploying My Portfolio with AWS S3 and CloudFront on Cloud Workshop

#aws #react #frontend #webdev



This was my first hands-on experience deploying a frontend application using AWS services. Instead of stopping at the development stage, I wanted to understand how a website can be hosted using cloud infrastructure.

For this deployment, I worked with Amazon S3 and attempted to configure Amazon CloudFront.

My Portfolio

The portfolio was developed using:

  • React
  • JavaScript
  • HTML
  • CSS
  • Vite

It contains sections for:

  • About Me
  • Skills
  • Projects
  • Contact

After completing the React application, I generated the production files using:

npm run build
Enter fullscreen mode Exit fullscreen mode

The generated files were available in the dist folder.

Step 1: Creating an S3 Bucket

The first step was creating an Amazon S3 bucket for my portfolio.

After creating the bucket, I uploaded the website files into it.

The main file was:

index.html
Enter fullscreen mode Exit fullscreen mode

Along with the other required website assets.

The basic structure was:

S3 Bucket
│
├── index.html
├── assets/
└── other files
Enter fullscreen mode Exit fullscreen mode

Step 2: Configuring Static Website Hosting

After uploading the files, I configured the bucket for static website hosting.

I specified:

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

This tells S3 which HTML file should be loaded as the main page of the website.

Step 3: Configuring Access

I then worked through the S3 access and permission settings required to make the static website accessible.

This was one of the useful parts of the process because it made me understand that simply uploading a file to S3 does not automatically make it available to everyone.

There are separate considerations for:

  • Bucket access
  • Object permissions
  • Static website hosting
  • Public access settings
  • Security policies

After configuring the required settings, I was able to work with the S3-hosted version of my portfolio.

Step 4: Trying Amazon CloudFront

The next step was to add Amazon CloudFront.

The architecture I wanted to create was:

                User
                  │
                  ▼
          Amazon CloudFront
                  │
                  ▼
              Amazon S3
                  │
                  ▼
          React Portfolio
Enter fullscreen mode Exit fullscreen mode

CloudFront acts as a CDN and can distribute website content through AWS edge locations.

I wanted to use it as the delivery layer in front of my S3-hosted portfolio.

The CloudFront Problem

While creating the CloudFront resource, I encountered an AWS account-level verification error.

AWS displayed the following message:

"Your account must be verified before you can add new CloudFront resources."

So, at this stage, CloudFront deployment was not completed.

This was actually an important part of the learning experience.

I initially thought deploying a website would simply be:

Write Code → Upload Files → Website Online
Enter fullscreen mode Exit fullscreen mode

But the process also involves:

Application
    ↓
Build
    ↓
Cloud Storage
    ↓
Permissions
    ↓
Service Configuration
    ↓
Account Verification
    ↓
CDN / Delivery
    ↓
Production Website
Enter fullscreen mode Exit fullscreen mode

What I Learned

This small project helped me understand several AWS concepts practically.

Amazon S3

I learned how S3 can be used to store and serve static website files.

Static Website Hosting

I learned how an index.html file can be configured as the entry point for a static website.

Permissions

I learned that storage, website hosting, and access permissions are separate configuration areas.

CloudFront

I learned the role of CloudFront as a CDN in front of an S3-based website, even though I could not complete the CloudFront deployment because of the account verification restriction.

Cloud Deployment

Most importantly, I learned that deploying an application involves more than writing code. Cloud services have their own account requirements, permissions, security configurations, and service restrictions.

Current Architecture

The part I successfully configured was:

React Portfolio
       │
       ▼
   npm run build
       │
       ▼
    index.html
       │
       ▼
    Amazon S3
Enter fullscreen mode Exit fullscreen mode

The architecture I am working toward is:

                    User
                     │
                     ▼
             Amazon CloudFront
                     │
                     ▼
                 Amazon S3
                     │
                     ▼
             React Portfolio
Enter fullscreen mode Exit fullscreen mode

react #aws #amazonS3 #cloudfront #javascript #webdevelopment #cloud #devops #learning

Top comments (0)