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