Deploying React Applications on AWS

A guide to deploying React applications on AWS using CloudFront and S3, using CDK Nodejs for infrastructure as code.

Prerequisites

Before starting, ensure you have the following prerequisites:

• AWS Account: Sign up for an AWS account if you don't have one.
• AWS CLI: Install and configure the AWS Command Line Interface (CLI) with your credentials. You can follow the guide here.
• Node.js and yarn: Ensure you have Node.js and yarn installed on your machine.
• React Application: Have a React application ready for deployment.

Step 1: Set Up IaC project

1. Navigate to your react application directory in the terminal.
2. Create a new directory for your IaC project and navigate into it:

   mkdir iac
   cd iac
   

3. Initialize a new CDK project using Node.js:

   npx aws-cdk init app --language=typescript
   

4. Install the necessary AWS CDK packages:

   yarn add @aws-cdk/aws-s3 @aws-cdk/aws-cloudfront @aws-cdk/aws-s3-deployment
   

Step 2: Update the IaC code to create an S3 bucket.

1. Open the lib/iac-stack.ts file in your IaC project directory.
2. Replace the contents with the following code to create an S3 bucket and a CloudFront distribution

import * as cdk from 'aws-cdk-lib';
import { Construct } from 'constructs';
import * as s3 from 'aws-cdk-lib/aws-s3';
import * as cloudfront from 'aws-cdk-lib/aws-cloudfront';
import * as s3deploy from 'aws-cdk-lib/aws-s3-deployment';

export class IacStack extends cdk.Stack {
   constructor(scope: Construct, id: string, props?: cdk.StackProps) {
      super(scope, id, props);

      // Create an S3 bucket
      const bucket = new s3.Bucket(this, 'MyReactAppBucket', {
         websiteIndexDocument: 'index.html',
         websiteErrorDocument: 'index.html',
         publicReadAccess: true,
      });

      // Create a CloudFront distribution
      const distribution = new cloudfront.CloudFrontWebDistribution(this, 'MyReactAppDistribution', {
         originConfigs: [
            {
               s3OriginSource: {
                  s3BucketSource: bucket,
               },
               behaviors: [{ isDefaultBehavior: true }],
            },
         ],
      });
   }
}

Step 3: Build and Deploy the React Application

1. Navigate back to your React application directory.
2. Build your React application:

   yarn build
   

3. Navigate back to your IaC project directory.
4. Deploy the CDK stack to create the S3 bucket and CloudFront distribution:

   npx cdk deploy
   

5. After the stack is deployed, note the S3 bucket name and CloudFront distribution domain name from the output.
6. Deploy the built React application to the S3 bucket:

   aws s3 sync ../build s3://<Your-Bucket-Name> --delete
   

7. Invalidate the CloudFront cache to ensure the latest version of your application is served:

   aws cloudfront create-invalidation --distribution-id <Your-Distribution-ID> --paths "/*"
   

8. Access your React application using the CloudFront distribution domain name.

Step 4: Clean Up

To avoid incurring unnecessary charges, remember to delete the resources created during this process when they are no longer needed. You can do this by destroying the CDK stack:

npx cdk destroy