Deploying a React application on an Application Load Balancer (ALB) with EC2 instances involves several steps, including building the React app, setting up EC2 instances to host the app, configuring the ALB to distribute traffic, and deploying the app to the instances. Below, I'll outline the general steps you can follow to deploy your React application:

                Fig: 1

### Step 1: Build Your React Application

Before deploying your React application, ensure that you have built a production-ready version of it. You can do this by running:

```bash

npm run build

```

This command will generate an optimized build of your React app in the `build` directory.


### Step 2: Set Up EC2 Instances

1. Launch EC2 Instances: Launch one or more EC2 instances that will host your React application. Choose an appropriate instance type and ensure that they are launched in the same VPC as your ALB.

2. Configure Security Groups: Configure security groups for your EC2 instances to allow inbound traffic on port 80 (HTTP) from the ALB.


### Step 3: Configure Application Load Balancer (ALB)

1. Create an ALB: Create an Application Load Balancer in the AWS Management Console. Configure listeners (e.g., port 80 for HTTP), target groups, and health checks.

2. Define Target Group: Define a target group for your EC2 instances. Specify the protocol and port (e.g., HTTP on port 80) and register your EC2 instances with the target group.


### Step 4: Deploy React Application to EC2 Instances

1. SSH into EC2 Instances: Connect to your EC2 instances via SSH.

2. Install Web Server: Install a web server like Nginx or Apache on each EC2 instance to serve the React application files.

3. Copy Build Files: Copy the build files generated in Step 1 (`build` directory) to the web server's document root directory (e.g., `/var/www/html` for Nginx).


### Step 5: Configure ALB Listener Rules

In the ALB console, configure listener rules to route incoming traffic to your target group. For example, you can route all HTTP traffic (`/*`) to your target group.


### Step 6: Test Your Deployment

Once everything is set up, test your deployment by accessing the ALB's DNS name or IP address in your web browser. You should see your React application served by the EC2 instances behind the ALB.


### Step 7: (Optional) Set Up Auto Scaling

To handle varying levels of traffic, consider setting up Auto Scaling for your EC2 instances based on metrics like CPU utilization or request counts. This ensures that your application can automatically scale up or down based on demand.


### Conclusion

Deploying a React application on an Application Load Balancer with EC2 instances provides scalability, high availability, and fault tolerance. By following the steps outlined above, you can successfully deploy your React application to AWS and leverage the power of ALB for efficient traffic distribution. Remember to monitor your deployment and adjust as necessary to meet your application's needs.