Step 1: Prerequisites
- Node.js and npm installed on your local machine.
- An AWS Account with Administrator access.
Step 2: Create a React Application
- Open your terminal or command prompt.
- Run the following command to create a new React app:
npm create vite@latest
- Replace
durgav
with your desired project name. - Navigate into the project directory:
cd durgav
Step 3: React Configuration
- Start the development server to ensure everything works:
npm start
- Open
http://localhost:3000
in your browser to view the app.
Step 4: Build the React App
- Stop the development server (if running) by pressing
Ctrl + C
in the terminal. - Run the build command: npm run build
This will create a
build/
directory in your project containing the optimized production-ready files.
Step 5: Create an S3 Bucket
- Navigate to the S3 service in the AWS Management Console.
- Click on Create bucket.
- Provide a unique bucket name (e.g.,
714022205029-durgav
). - Choose a region and click Create bucket.
Step 6: Enable Static Website Hosting
- Select the newly created bucket.
- Go to the Properties tab.
- Scroll down to the Static website hosting section.
- Enable static website hosting.
- Specify the following:
-
Index document:
index.html
-
Error document:
index.html
-
Index document:
- Save the changes.
Step 7: Update Bucket Permissions
- Go to the Permissions tab.
- Edit the Bucket policy
- Replace
714022205029-durgav
with your bucket name. - Save the bucket policy.
- Open the S3 bucket in your browser.
- Verify that your React app loads correctly.
Step 8: Test S3 Bucket Deployment
S3 URL: http://714022205029-durgav.s3-website-us-east-1.amazonaws.com/
Step 9: Configure CloudFront
- Navigate to the CloudFront service in the AWS Management Console.
- Click Create Distribution.
- Choose Web as the delivery method.
- Under the Origin Settings:
- Set Origin Domain Name to your S3 bucket’s endpoint (e.g.,
my-react-app-bucket.s3.amazonaws.com
). - Enable Restrict Bucket Access if you want to use an origin access identity (OAI).
- Set Origin Domain Name to your S3 bucket’s endpoint (e.g.,
- Scroll down to Default Cache Behavior Settings:
- Set Viewer Protocol Policy to "Redirect HTTP to HTTPS".
- Click Create Distribution.
- Wait for the distribution status to change from "In Progress" to "Deployed" (this may take several minutes).
Step 10: Test CloudFront Deployment
- Open the CloudFront distribution’s domain name in your browser.
- Verify that your React app loads correctly.
CloudFront URL: https://d26g5tt7mopw9r.cloudfront.net/
Congratulations! You have successfully deployed your React app to AWS S3 and CloudFront. Your application is now highly available and optimized for global delivery.
Top comments (0)