Streamlining Your React App Deployment on AWS ECS with ECR and Docker

Introduction

Deploying a React application can sometimes be as challenging as developing it, especially when ensuring scalability and efficiency. AWS Elastic Container Service (ECS) paired with the Elastic Container Registry (ECR) offers a robust platform for deploying containerized applications like a React app. In this article, we will guide you through the steps to deploy a React application to AWS ECS using ECR and Docker.

Prerequisites

Before diving into the deployment process, ensure you have the following prerequisites in place:

• A basic understanding of Docker, AWS ECS, and AWS ECR.
• An AWS account.
• Docker installed on your local machine.
• A React application ready for deployment.

Step 1: Setting Up Your Docker Environment

Start by creating a Dockerfile in your React project’s root directory. This file instructs Docker on how to build your React application’s image.

# Use an official Node runtime as a parent image FROM node:latest # Set the working directory in the container WORKDIR /usr/src/app # Copy the current directory contents into the container at /usr/src/app COPY . . # Install any needed packages specified in package.json RUN npm install # Make port 3000 available to the world outside this container EXPOSE 3000 # Run the app when the container launches CMD ["npm", "start"]        

Sample DockerFile (for Mac M1/M2 chips)

# build environment
FROM --platform=linux/amd64 node:20.11.0 as builder
RUN mkdir /usr/src/app
WORKDIR /usr/src/app
ENV PATH /usr/src/app/node_modules/.bin:$PATH
COPY package.json /usr/src/app/package.json
RUN npm install --silent
RUN npm install [email protected] -g --silent
COPY . /usr/src/app
RUN npm run build

# production environment
FROM nginx:latest
COPY --from=builder /usr/src/app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]        

Step 2: Building and Testing Your Docker Image

With the Dockerfile in place, build your Docker image using the command:

docker build -t my-react-app .        

Run your container locally to test if it’s working correctly:

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

Navigate to https://localhost:3000 to see if your React app is running.

Step 3: Setting Up AWS ECR

AWS ECR is a Docker container registry that simplifies storing, managing, and deploying your Docker container images. Here’s how to set it up:

1. Log in to your AWS Management Console.
2. Navigate to ECR and create a new repository named my-react-app.
3. Follow the instructions to authenticate your Docker client to your newly created ECR registry.

Step 4: Pushing Your Docker Image to ECR

Tag your Docker image with the ECR repository URI:

docker tag my-react-app:latest <ECR-REPOSITORY-URI>:latest        

Push your Docker image to your ECR repository:

docker push <ECR-REPOSITORY-URI>:latest        

Step 5: Deploying to AWS ECS

With your image in ECR, you can now deploy it to ECS.

1. Create a new ECS cluster from the AWS ECS console.
2. Configure your cluster with the necessary details, including instance specifications and IAM roles.
3. Create a new task definition and select the “EC2” launch type.
4. In the task definition, specify the Docker image to use from ECR.
5. Define the networking and security groups as required.
6. Launch a new service within your ECS cluster using the task definition.

Step 6: Accessing Your Deployed Application

Once your service is running, access your React application:

1. Navigate to the “Tasks” tab in your ECS cluster.
2. Find the public IP under the “Network” section.
3. Open a browser and navigate to https://<EC2-INSTANCE-PUBLIC-IP>:3000.

Conclusion

Deploying your React application using AWS ECS and ECR with Docker is a streamlined process that ensures scalability and reliability. This setup is ideal for production-grade applications and offers the flexibility and robustness needed for modern web applications.

Next Steps

After successful deployment, consider looking into AWS’s auto-scaling capabilities to handle variable loads and ensure high availability. Also, explore integrating a CI/CD pipeline for automated builds and deployments.

Thank you for reading my article! For more updates and useful information, feel free to connect with me on LinkedIn and follow me on Twitter. I look forward to engaging with more like-minded professionals and sharing valuable insights.