How I Deployed My React Application on AWS Cloud Snd CloudFront – A Complete Walkthrough

Deploying a React App to AWS S3 and CloudFront: A Step-by-Step Guide

This guide walks you through deploying your React application to Amazon S3 for static hosting and using CloudFront for content delivery.

Step 1: Getting Started

Before you begin, ensure you have:

1. Node.js and npm installed locally.
2. An AWS account with administrator privileges.

Step 2: Building Your React Application

1. Open your terminal.
2. Create a new React app using Vite: npm create vite@latest <your_project_name> (replace <your_project_name> with your desired name).
3. Navigate to the project directory: cd <your_project_name>

Step 3: Verification and Build

1. Start the development server to test: npm start. Access your app at http://localhost:3000.
2. Stop the development server (Ctrl C).
3. Build your app for production: npm run build. This creates a build/ folder containing optimized files.

Step 4: Setting up the S3 Bucket

1. In the AWS Management Console, navigate to the S3 service.
2. Create a new bucket, providing a unique name (e.g., <your_unique_bucket_name>).
3. Select a region and create the bucket.

Step 5: Enabling Static Website Hosting on S3

1. Select your newly created bucket.
2. Go to the "Properties" tab.
3. Under "Static website hosting," enable it.
4. Set "Index document" and "Error document" to index.html.
5. Save changes.

Step 6: Configuring Bucket Permissions

1. Navigate to the "Permissions" tab.
2. Edit the bucket policy. Ensure the policy allows public access to your website (consider security implications and adjust accordingly for production environments).
3. Save the policy. Test your deployment by accessing the S3 bucket URL in your browser.

Step 7: Testing the S3 Deployment

Access your deployed app via the S3 URL (e.g., http://<your_unique_bucket_name>.s3-website-.amazonaws.com/).

Step 8: Configuring CloudFront for CDN

1. In the AWS Management Console, navigate to the CloudFront service.
2. Create a new distribution. Choose "Web" as the delivery method.
3. Configure the origin settings, pointing to your S3 bucket endpoint.
4. Set the viewer protocol policy to "Redirect HTTP to HTTPS."
5. Create the distribution.

Step 9: Testing CloudFront Deployment

Once the CloudFront distribution is deployed, access your app through the CloudFront URL.

Conclusion

You've successfully deployed your React application to AWS S3 and CloudFront! Your application is now served via a CDN, ensuring high availability and optimized performance for users globally. Remember to replace placeholder bucket names and regions with your actual values. Always prioritize security best practices when deploying to production.

The above is the detailed content of How I Deployed My React Application on AWS Cloud Snd CloudFront – A Complete Walkthrough. For more information, please follow other related articles on the PHP Chinese website!