Day-1:Cloud Workshop
I Built and Deployed My First React Portfolio on AWS S3 + CloudFront — And Broke It Along the Way As a Computer Science student, I’ve been trying to move away from just writing code by following tutorials and actually understand how things work by building and deploying projects. One of the things I wanted to build was a simple personal portfolio. It sounded easy: Build a React portfolio → upload…
On the first day of building a React portfolio on AWS S3 and CloudFront, the experience started with a simple HTML portfolio. The portfolio included personal information, technical skills, projects, education, areas of interest, and a contact page. The initial portfolio worked locally, but deploying it to AWS presented challenges.
The first challenge encountered was the "AccessDenied" error when trying to access the website. This was due to S3 permissions and website access configuration issues. After configuring static website hosting and public access settings, the problem persisted due to a misunderstanding of the bucket name. The bucket name used in the policy had to match the actual bucket name configured in the AWS console.
Next, the author decided to convert the portfolio into a React application using a Vite structure. This involved moving from a single HTML file to a more complex structure with JavaScript arrays for skills and projects. The author learned the importance of understanding folder structures and configurations specific to React projects.
Once the React project was working, the author attempted to add CloudFront in front of S3. However, this led to a "404 Not Found" error when accessing the portfolio. The error was caused by an incorrect origin configuration in CloudFront. The origin path was set to "/index.html", which resulted in CloudFront requesting "/index.html/index.html". Since S3 could not find this object, the error occurred.
After identifying the issue, the author corrected the CloudFront origin path to an empty string and kept the default root object as "index.html". This change allowed CloudFront to properly request "index.html", resolving the 404 error. Through this process, the author gained valuable insights into AWS S3 permissions, static website hosting, React project structures, and the importance of understanding configuration details when deploying applications to the cloud.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
