Deploying React Apps to AWS S3 and CloudFront

Deploying your React app to AWS S3 and CloudFront is a great way to serve static assets with low latency and high scalability. Amazon S3 (Simple Storage Service) can be used to host your static assets (such as HTML, CSS, JavaScript files), while CloudFront acts as a CDN (Content Delivery Network) to serve those assets globally with reduced latency.

Here’s a step-by-step guide on how to deploy your React app to AWS S3 and CloudFront.

1. Prepare Your React App for Production

Before deploying your React app to AWS S3, you need to build the production version of your app. The build folder will contain all the static files that you need to upload to S3.

1. Build the React App: In your React project folder, run the following command to create a production-ready build: npm run build This command will generate a build directory that contains the optimized production files, including the index.html, static folder, and other resources.

2. Create an S3 Bucket

To host your React app on S3, you first need to create a bucket.

1. Log into the AWS Console:
   • Go to the AWS Management Console and log in.
2. Navigate to S3:
   • Search for S3 in the search bar and click on S3 under the Storage section.
3. Create a New Bucket:
   • Click on Create bucket.
   • Enter a globally unique name for your bucket (e.g., my-react-app-bucket).
   • Select a region for your bucket (usually, choose the closest region to your target audience).
   • Leave the default settings for the rest of the options and click Create bucket.
4. Set Bucket Permissions:
   • After creating the bucket, you need to make it publicly accessible.
   • Select your bucket and navigate to the Permissions tab.
   • Under Block public access, click Edit and uncheck the option Block all public access. Confirm that you want to allow public access.

3. Upload Your Build Files to S3

1. Navigate to the Bucket:
   • Go to the Objects tab of the newly created bucket.
2. Upload the Build Folder:
   • Click on Upload and drag and drop the contents of your build folder (the files inside, not the folder itself) into the S3 bucket.
   • Once the upload is complete, you’ll see all the static files inside the bucket.
3. Set Permissions for Files:
   • Select the files, click on Actions, and choose Make public. This will make all the files publicly accessible.

4. Configure the S3 Bucket for Static Website Hosting

To make the S3 bucket serve the React app as a website, you need to enable static website hosting.

1. Go to the Bucket Properties:
   • Click on the Properties tab of your bucket.
2. Enable Static Website Hosting:
   • Scroll down to Static website hosting and click Edit.
   • Select Use this bucket to host a website.
   • Enter index.html for the Index document and 404.html (or a custom error page) for the Error document.
   • Click Save changes.
3. Get the Endpoint URL:
   • Once static website hosting is enabled, you’ll see the Bucket website endpoint (e.g., http://my-react-app-bucket.s3-website-us-east-1.amazonaws.com/).
   • You can visit this URL to check if the React app is accessible directly from S3.

5. Set Up CloudFront Distribution

To serve your React app with low latency globally, you can use AWS CloudFront. CloudFront will act as a CDN to distribute your app content from edge locations around the world.

1. Create a CloudFront Distribution:
   • Go to the CloudFront section in the AWS Management Console.
   • Click on Create Distribution.
2. Choose Web Delivery:
   • Under Web, click Get Started.
3. Configure the Origin Settings:
   • In the Origin Domain Name field, select your S3 bucket from the dropdown list. AWS will automatically use the S3 bucket you created earlier as the origin for your CloudFront distribution.
   • Set the Origin Path to the root of the bucket.
   • Choose Match Viewer for Viewer Protocol Policy if you want to support both HTTP and HTTPS. However, it’s recommended to select Redirect HTTP to HTTPS for better security.
4. Configure Default Cache Behavior:
   • Set Viewer Protocol Policy to Redirect HTTP to HTTPS (if you want SSL).
   • For Cache Based on Selected Request Headers, choose All.
   • Leave the rest of the settings as defaults.
5. Set Distribution Settings:
   • Set Alternate Domain Names (CNAMEs) if you want to use your custom domain.
   • If using a custom domain, ensure you have a valid SSL certificate (use AWS Certificate Manager for easy SSL setup).
   • Click Create Distribution.

6. Update DNS to Use CloudFront

If you’re using a custom domain, you need to update your DNS settings to point to your CloudFront distribution.

1. Get CloudFront Domain Name:
   • After your CloudFront distribution is created (this may take a few minutes), you’ll get a CloudFront Domain Name (e.g., d1s2t3u4.cloudfront.net).
2. Update DNS Records:
   • If you have a custom domain (e.g., www.mywebsite.com), go to your domain registrar (like Route 53, GoDaddy, etc.) and create a CNAME record that points your domain to the CloudFront domain name.
   For example:
   • Name: www.mywebsite.com
   • Type: CNAME
   • Value: d1s2t3u4.cloudfront.net
3. Wait for Propagation:
   • DNS changes may take some time to propagate, but after they do, you should be able to access your React app via your custom domain.

7. Testing the Deployment

Once everything is set up, visit your CloudFront domain (or your custom domain) to ensure your React app is accessible globally. If there are issues, double-check your S3 permissions, CloudFront distribution settings, and DNS configuration.

8. Automating Deployments with CI/CD

For more streamlined deployments, you can automate the process of deploying your React app to S3 and CloudFront using a Continuous Integration/Continuous Deployment (CI/CD) pipeline with tools like GitHub Actions, AWS CodePipeline, or CircleCI.