DEV Community

DAKSHINESH S
DAKSHINESH S

Posted on

Day-01 -Deploying My Portfolio with AWS S3 and CloudFront on Cloud Workshop

#aws #devops #tutorial #cloud









Deploying My React Portfolio on AWS S3 and Exploring CloudFront

I recently built a basic portfolio website using React and decided to deploy it using Amazon Web Services (AWS).

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

But the process also involves:

Application
↓
Build
↓
Cloud Storage
↓
Permissions
↓
Service Configuration
↓
Account Verification
↓
CDN / Delivery
↓
Production Website

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

The architecture I am working toward is:

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

Next Step

My next step is to resolve the AWS account verification issue and complete the CloudFront configuration.

This started as a simple portfolio deployment, but it gave me practical exposure to React deployment, Amazon S3, static website hosting, permissions, CDN concepts, and AWS account configuration.

It is a small project, but it was a useful first step into cloud deployment.

Top comments (0)