How to Dockerize and Deploy a React App on AWS ECS using ECR & Fargate

How to Dockerize and Deploy a React App on AWS ECS using ECR & Fargate

Tags
React.js
AWS
Nginx
Docker
Published
September 21, 2021
Author
TANVIR AHMED
Introduction: In today's tutorial, we'll walk through the process of dockerizing a React app and deploying it on Amazon Web Services (AWS) Elastic Container Service (ECS) using Elastic Container Registry (ECR) and Fargate. This step-by-step guide will help you seamlessly transition your React application into a production environment.
Step 1: Dockerize the React App Docker simplifies the deployment process by packaging the application and its dependencies into a single container. To begin, let's create a Dockerfile in the root directory of our React project.
FROM node:lts-alpine as build WORKDIR /app COPY package.json . RUN npm install COPY . . RUN npm run build FROM nginx COPY ./nginx/nginx.conf /etc/nginx/nginx.conf COPY --from=build /app/build /usr/share/nginx/html
Step 2: Build and Run Docker Container Locally After creating the Dockerfile, build the Docker image and run it locally to ensure everything works as expected.
$ sudo docker build -t app . $ docker run -p 80:80 app
Step 3: Push Docker Image to Amazon ECR Configure the AWS CLI and create an ECR repository to store our Docker image. Then, push the Docker image to ECR.
$ aws ecr get-login-password --region us-east-1 | docker login --username AWS --password-stdin xxxxxxxxxx.dkr.ecr.us-east-1.amazonaws.com $ sudo docker tag app:latest xxxxxxxxxx.dkr.ecr.us-east-1.amazonaws.com/my-app:latest $ sudo docker push xxxxxxxxxx.dkr.ecr.us-east-1.amazonaws.com/my-app:latest
Step 4: Create an ECS Cluster Navigate to the ECS console, create a new cluster, and select "Network Only" as the cluster template. Provide a cluster name and optionally create a VPC.
Step 5: Define Task Definition In the ECS console, under "Task Definitions", create a new task definition. Add a container using the Docker image URI from ECR and specify port mapping.
Step 6: Create ECS Service Within the cluster, create a new service and select Fargate as the launch type. Choose the task definition created earlier, specify the number of tasks, and configure additional settings as needed.
Step 7: Review and Deploy Review the service configuration and deploy the service. Once deployed, obtain the public IP or DNS of the ECS task to access the React application.
Conclusion: By following these steps, you've successfully dockerized your React application and deployed it on AWS ECS using ECR and Fargate. This scalable and reliable infrastructure ensures your application is ready for production use.
Thank you for reading! If you have any questions or feedback, feel free to leave a comment below.
Regards, TANVIR AHMED