Create a React Application from Scratch and Deploy to AWS

Project Background

The goal is to develop a personal blog service. Initially, the backend service will be created and deployed. Once familiar with frontend development, a React frontend project will be implemented. Finally, the backend and frontend will be integrated to complete the personal blog service.

Project Details

• Frontend Language: JavaScript
• Frontend Framework: React
• Cloud Service: AWS
• Code Management: GitHub
• Package Manager: npm

Environment Setup

1. Install Git.
2. Install Node.js: Node.js Download and Setup.
3. Install AWS CLI: AWS CLI Installation Guide.

Step-by-Step Guide

1. Create Project Directory and Navigate Into It

mkdir my-new-project  
cd my-new-project  

2. Initialize npm Project

npm init  

3. Install and Use create-react-app to Bootstrap Project

npx create-react-app my-react-app  

4. Modify Project Code

Customize your application by editing the code under the src directory.

5. Start Project for Preview

npm start  

6. Build Project

• For Development Environment:

  $env:REACT_APP_ENV_FILE=".env.local"; npm run build  

• For Production:

  $env:REACT_APP_ENV_FILE=".env"; npm run build  

7. Upload Build Files to AWS S3

Create an S3 Bucket

1. Log in to the AWS Management Console and go to the S3 service page.
2. Click Create bucket.
   • Bucket Name: Choose a unique name, e.g., my-blog-bucket.
   • Region: Select your preferred region.
   • Keep other options as default and click Create bucket.

Configure S3 Bucket for Static Website Hosting

1. Go to the newly created bucket.
2. Navigate to Properties → Static website hosting → Edit.
3. Enable the feature and set:
   • Index document: index.html
   • Error document: index.html (for single-page applications)
4. Save the changes.

Allow Public Access to the Bucket

1. Navigate to Permissions.
2. Under Block public access, click Edit and disable all options to allow public access.
3. Add the following bucket policy:

   {
       "Version": "2012-10-17",
       "Statement": [
           {
               "Effect": "Allow",
               "Principal": "*",
               "Action": "s3:GetObject",
               "Resource": "arn:aws:s3:::my-blog-bucket/*"
           }
       ]
   }

Upload Files to S3

1. In the S3 Console, go to your bucket.
2. Click Upload, and drag all files from the build folder into the upload area.
3. Click Upload and wait for the process to complete.

8. Access Your Website

After the files are uploaded, you can access your website using the provided S3 URL:

http://<your-bucket-name>.s3-website-<region>.amazonaws.com  

9. Optional: Use CloudFront for Faster Loading

1. Go to the CloudFront console and click Create Distribution.
2. Choose Web, and select your S3 bucket as the origin.
3. Configure other options and create the distribution.
4. Use the domain name provided by CloudFront for faster website loading.

10. Optional: Configure a Custom Domain

1. If you own a domain, you can associate it with your S3 bucket or CloudFront distribution:
   • Use Route 53 or another DNS provider to create an A record or CNAME record pointing to your S3 bucket or CloudFront distribution.
2. Ensure your bucket or CloudFront distribution is configured to recognize the custom domain.