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

On Day-01, the author deployed their React portfolio using Amazon Web Services (AWS), focusing on Amazon S3 and Amazon CloudFront. This was the first time the author deployed a frontend application using AWS services. The portfolio consisted of React, JavaScript, HTML, CSS, and Vite, featuring sections for About Me, Skills, Projects, and Contact.

To deploy the website, the author followed these steps:

1. Created an Amazon S3 bucket and uploaded the website files, including the index.html file, into it.

2. Configured the bucket for static website hosting, specifying index.html as the main page.

3. Configured access and permission settings to make the static website accessible. This step was crucial in understanding that uploading a file to S3 alone does not make it publicly available.

4. Attempted to add Amazon CloudFront as a CDN in front of the S3-hosted portfolio. The architecture aimed to have CloudFront distribute website content through AWS edge locations.

However, during the CloudFront configuration, the author encountered an AWS account-level verification error, stating that the account must be verified before adding new CloudFront resources. This deployment was not completed at this stage.

Through this project, the author gained practical experience with several AWS concepts. They learned how S3 can store and serve static website files, how an index.html file can be configured as the entry point for a static website, and the separate configuration areas for storage, website hosting, and access permissions. Additionally, the author discovered the role of CloudFront as a CDN in front of an S3-based website.

Most importantly, they understood that deploying an application involves more than just writing code; it requires considering cloud service requirements, permissions, security configurations, and service restrictions.

The author's current architecture successfully includes the React portfolio configured using npm run build, index.html, and Amazon S3. The ultimate goal is to resolve the AWS account verification issue and complete the CloudFront configuration to achieve the desired architecture: User → Amazon CloudFront → Amazon S3 → React Portfolio. This project provided a valuable introduction to cloud deployment for the author.