Deploy React App to AWS ECS

This guide shows a container-based deployment path for a React application using Docker, Amazon ECR, ECS, Fargate, and an Application Load Balancer.

Overview

By the end of this guide, you will:

• Dockerize the React application
• Push the image to Amazon ECR
• Create an ECS cluster
• Run the app on Fargate
• Expose the app through a load balancer

Prerequisites

• AWS account with billing alerts enabled
• React application that can build successfully
• Docker installed locally
• AWS CLI configured with least-privilege credentials
• Basic container knowledge

Architecture

The browser sends HTTP traffic to an Application Load Balancer. The load balancer forwards traffic to an ECS service running Fargate tasks. Each task runs an Nginx container that serves the static React build.

Code Example

Use this Dockerfile for a typical Vite React application:

FROM node:20-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM nginx:1.27-alpine
COPY --from=build /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Step 1: Build and Test Locally

docker build -t react-ecs-app .
docker run --rm -p 3000:80 react-ecs-app

Open:

http://localhost:3000

Step 2: Create an ECR Repository

aws ecr create-repository \
  --repository-name react-ecs-app \
  --region ap-south-1

Step 3: Authenticate Docker to ECR

aws ecr get-login-password --region ap-south-1 \
  | docker login \
      --username AWS \
      --password-stdin your-account-id.dkr.ecr.ap-south-1.amazonaws.com

Step 4: Tag and Push the Image

docker tag react-ecs-app:latest \
  your-account-id.dkr.ecr.ap-south-1.amazonaws.com/react-ecs-app:latest

docker push \
  your-account-id.dkr.ecr.ap-south-1.amazonaws.com/react-ecs-app:latest

Step 5: Create an ECS Cluster

1. Open ECS in the AWS Console.
2. Create a new cluster.
3. Choose AWS Fargate as the infrastructure option.
4. Keep the cluster name clear, such as react-production-cluster.

Step 6: Create a Task Definition

Use these task settings:

• Launch type: Fargate
• CPU: 0.25 vCPU
• Memory: 0.5 GB
• Container port: 80
• Image URI: your ECR image URI
• Log driver: CloudWatch Logs

Step 7: Create an ECS Service

1. Create a service from the task definition.
2. Choose desired tasks: 1 for a small tutorial deployment.
3. Attach an Application Load Balancer.
4. Forward load balancer port 80 to container port 80.
5. Allow inbound HTTP traffic in the load balancer security group.

Step 8: Verify the App

Open the load balancer DNS name:

http://your-load-balancer-dns-name

Refresh a nested route. If your app uses React Router and the route fails, add an Nginx try_files rule in the container image.

Production Checklist

• Use HTTPS with AWS Certificate Manager.
• Put CloudFront in front of the load balancer for caching and edge delivery.
• Use task roles instead of static AWS keys.
• Store secrets in AWS Secrets Manager or SSM Parameter Store.
• Enable ECS service auto scaling.
• Watch logs, CPU, memory, and 5xx errors in CloudWatch.

Summary

ECS is a strong deployment option when you want container repeatability, managed compute, and scaling without maintaining EC2 instances directly. Start with one service, then add HTTPS, monitoring, autoscaling, and CI/CD.