A Guide to Deploy a Scalable React Application on Amazon ECS with Docker

Introduction

Amazon Elastic Container Service (ECS) is a fully managed container orchestration service that makes it easy to deploy, manage, and scale containerized applications. With Amazon ECS, you can focus on building your application without worrying about the underlying infrastructure.

Docker is a platform that allows you to package your application and its dependencies into a container, ensuring it runs consistently in different environments. Docker containers are lightweight, making them perfect for microservices and scalable applications.

Docker and Amazon ECS provide a powerful environment for deploying and scaling React applications reliably and cost-effectively.

Prerequisites

Before we begin, ensure you have the following:

AWS Account: If you don’t have one, sign up here.
Docker Installed: Install Docker on your machine from Docker’s official website.
AWS CLI Installed: Install the AWS CLI from here.
A React Application: You can use an existing React project or create a new one with npx create-react-app my-app.
Basic Understanding of Docker and AWS Services: Familiarity with these tools will help you follow along more easily

Pioneers in Cloud Consulting & Migration Services

Reduced infrastructural costs
Accelerated application deployment

Get Started

Containerizing Your React Application

First, let’s containerize your React application using Docker. Start by creating a Dockerfile in the root of your React project.

# Use the official Node.js image as a base
FROM node:14-alpine
 
# Set the working directory
WORKDIR /app
 
# Copy package.json and install dependencies
COPY package.json ./
RUN npm install
 
# Copy the rest of the application code
COPY . .
 
# Build the React application
RUN npm run build
 
# Serve the built application using a simple HTTP server
RUN npm install -g serve
CMD ["serve", "-s", "build"]
 
# Expose the port the app runs on
EXPOSE 5000

# Use the official Node.js image as a base

FROM node:14-alpine

# Set the working directory

WORKDIR /app

# Copy package.json and install dependencies

COPY package.json ./

RUN npm install

# Copy the rest of the application code

COPY . .

# Build the React application

RUN npm run build

# Serve the built application using a simple HTTP server

RUN npm install -g serve

CMD ["serve", "-s", "build"]

# Expose the port the app runs on

EXPOSE 5000

Next, build and tag your Docker image:

docker build -t my-react-app .

1	docker build -t my-react-app .

Once the build is complete, you can test the Docker image locally:

docker run -p 5000:5000 my-react-app

1	docker run -p 5000:5000 my-react-app

Your React application should now be accessible at http://localhost:5000.

Setting Up Amazon ECS

With your Docker image ready, the next step is to set up Amazon ECS to deploy the container.

Step 1: Create a New Amazon ECS Cluster

Log in to the AWS Management Console and navigate to the ECS service.
Click on “Create Cluster.”
Select the “Networking only” cluster template for a Fargate cluster.
Name your cluster and create it.

Step 2: Create a Task Definition

Go to the “Task Definitions” section and click “Create new Task Definition.”
Choose the “Fargate” launch type.
Configure the task by specifying:
- Container name (e.g., react-app)
- Image (use the Docker image you created earlier)
- Port mappings (port 5000)
- Memory and CPU allocations
Save the task definition.

Step 3: Create a Service

Navigate to the “Clusters” section, select your cluster, and click “Create” under the “Services” tab.
Choose “Fargate” as the launch type, and select the task definition you created.
Configure the service, specifying the number of desired tasks (this will define how many instances your container will run).
Set up autoscaling if needed by adjusting the desired task count based on CPU or memory utilization.

Deploying the Dockerized React App on Amazon ECS

Your application is almost ready for deployment with the Amazon ECS cluster, task definition, and service setup.

Step 1: Push Your Docker Image to Amazon ECR

1. Create a repository in the Amazon Elastic Container Registry (ECR).
2. Tag your Docker image with the Amazon ECR repository URI.

docker tag my-react-app:latest <aws_account_id>.dkr.ecr.<region>.amazonaws.com/my-react-app:latest

1	docker tag my-react-app:latest <aws_account_id>.dkr.ecr.<region>.amazonaws.com/my-react-app:latest

3. Log into Amazon ECR from the command line:

aws ecr get-login-password --region <region> | docker login --username AWS --password-stdin <aws_account_id>.dkr.ecr.<region>.amazonaws.com

1	aws ecr get-login-password --region <region> \| docker login --username AWS --password-stdin <aws_account_id>.dkr.ecr.<region>.amazonaws.com

4. Push the image to Amazon ECR:

docker push <aws_account_id>.dkr.ecr.<region>.amazonaws.com/my-react-app:latest

1	docker push <aws_account_id>.dkr.ecr.<region>.amazonaws.com/my-react-app:latest

Step 2: Deploy the Service

The Amazon ECS service you created will automatically pull the image from Amazon ECR.
Your application will now be deployed on AWS Fargate, and Amazon ECS will manage its lifecycle.

Scaling Your Application

One of the key benefits of using Amazon ECS is the ability to scale your application easily. You can adjust the number of tasks in the service settings to scale out your application as needed.

For automatic scaling:

Set up Amazon CloudWatch alarms based on CPU and memory utilization.

Configure auto-scaling policies within the Amazon ECS service settings to increase or decrease the number of tasks based on these alarms.

Monitoring and Managing Your Deployment

AWS provides several tools to monitor and manage your Amazon ECS deployment:

Amazon CloudWatch Logs: To track application logs.

Amazon CloudWatch Alarms: These are used to set up alerts on specific metrics.

AWS X-Ray: This is for tracing requests through your application to find bottlenecks.

Amazon ECS Console: To view running tasks, their statuses, and logs.

Regularly monitor these tools to ensure your application is running smoothly and efficiently.

Conclusion

Deploying a scalable React application on Amazon ECS using Docker is a powerful way to manage your application’s lifecycle in a cloud environment. Amazon ECS handles the orchestration, scaling, and management of your containers, allowing you to focus on building features and improving your app.

Following this guide, we have explored how to containerize a React app, deploy it on Amazon ECS, and scale it efficiently. With these skills, you can ensure your application is prepared to handle increasing traffic and deliver a seamless experience to users.

Drop a query if you have any questions regarding Amazon ECS or Docker and we will get back to you quickly.

Making IT Networks Enterprise-ready – Cloud Management Services

Accelerated cloud migration
End-to-end view of the cloud environment

Get Started

About CloudThat

CloudThat is a leading provider of Cloud Training and Consulting services with a global presence in India, the USA, Asia, Europe, and Africa. Specializing in AWS, Microsoft Azure, GCP, VMware, Databricks, and more, the company serves mid-market and enterprise clients, offering comprehensive expertise in Cloud Migration, Data Platforms, DevOps, IoT, AI/ML, and more.

CloudThat is the first Indian Company to win the prestigious Microsoft Partner 2024 Award and is recognized as a top-tier partner with AWS and Microsoft, including the prestigious ‘Think Big’ partner award from AWS and the Microsoft Superstars FY 2023 award in Asia & India. Having trained 650k+ professionals in 500+ cloud certifications and completed 300+ consulting projects globally, CloudThat is an official AWS Advanced Consulting Partner, Microsoft Gold Partner, AWS Training Partner, AWS Migration Partner, AWS Data and Analytics Partner, AWS DevOps Competency Partner, AWS GenAI Competency Partner, Amazon QuickSight Service Delivery Partner, Amazon EKS Service Delivery Partner, AWS Microsoft Workload Partners, Amazon EC2 Service Delivery Partner, Amazon ECS Service Delivery Partner, AWS Glue Service Delivery Partner, Amazon Redshift Service Delivery Partner, AWS Control Tower Service Delivery Partner, AWS WAF Service Delivery Partner and many more.

To get started, go through our Consultancy page and Managed Services Package, CloudThat’s offerings.

FAQs

1. What is Amazon ECS, and why use it for my React app?

ANS: – Amazon ECS is a managed service for deploying and scaling containerized applications. It automates infrastructure management, making focusing on development and scaling easier.

2. What is Docker, and why is it useful?

ANS: – Docker packages your application and its dependencies into a container, ensuring consistency across different environments. This simplifies deployment and management.

3. Can I manage infrastructure with Amazon ECS and AWS Fargate?

ANS: – No, AWS Fargate handles the infrastructure, letting you focus on your application without managing servers or clusters.