Project 4: Deploying a Full Stack Nodejs-React Application on AWS Fargate

Vishesh GhuleVishesh Ghule
4 min read

πŸš€ Introduction

Welcome back to my DevOps journey! In this blog, I’ll be sharing my experience of deploying a full stack Node.js + React application on AWS using ECS with the Fargate launch type and an Application Load Balancer (ALB). After successfully deploying the same application earlier using the ECS EC2 launch type, I wanted to explore the serverless and fully managed approach with ECS Fargate.

This project helped me understand how Fargate simplifies container deployment by removing the need to manage EC2 instances, while still giving the flexibility to scale and integrate with services like ALB, ECR, and CloudWatch. Let’s walk through the architecture, configuration, and deployment steps I followed to get my app running using Fargate.

πŸ”Έ Tech Stack

  • Frontend: React

  • Backend: Node.js

  • Containerization: Docker

  • Deployment: AWS ECS (Fargate launch type)

  • Load Balancer: Application Load Balancer (ALB)

  • Frontend Hosting: Hosted on S3 (as a static website)

  • Image Repository: Amazon ECR

  • Monitoring: Amazon CloudWatch

  • IAM & Security: IAM Roles, Security Groups, VPC, Subnets


Step 1: Launch EC2 instance & Clone repo in EC2 instance

  • Add Security Group port 4000 to EC2 (Port: 4000, Source: Anywhere 0.0.0.0/0)
https://github.com/VisheshGhule/Node-React-Full-Stack-App.git


Step 2: Create a React App and Host on S3

  1. Build your React frontend

    • Inside the frontend folder:
    npm install
    npm run build
  1. Create an S3 Bucket

    • Enable Static Website Hosting

    • Make the bucket public

    • Upload build/ folder contents on s3 bucket

  2. Add Bucket Policy for public access

      {
        "Version": "2012-10-17",
        "Statement": [
          {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::your-bucket-name/*"
          }
        ]
      }
    
  • Access via S3 URL.


Step 3: Build docker image

  • Remember to install docker and aws-cli on ec2 instance before building docker image. After that configure aws by typing aws configure

  • Go in backend folder and build docker image and run the container.

#Build image command
docker build -t fullstack-app .

#Run the container
docker run -p 4000:4000 fullstack-app

  • Type <ec2-public-ip>:4000 on browser

  • Type <ec2-public-ip>:4000/status on browser it will show backend is running or not


Step 4: Push Docker Image to ECR

  1. Create ECR repo & after creating click on view push command

  • But before that ensure aws is configure by command aws configure on your ec2-instance.

  • After that click on view push command, copy & paste command (shown in below picture) on ec2-instance.

  • Image is successfully push to ECR

Step 5: Create Application Load Balancer

  • Follow as it is steps as shown in below picture & remaining keep as default

  • Select Application Load Balancer

  • Select Internet-facing not Internal (by mistake i have selected)

  • Creating Target group


Step 6: Create IAM Role for cluster (attach below policies)


Step 7: Create Task Defination

  • Follow as it is steps as shown in below picture & remaining keep as default


Step 8: Create Cluster


Step 9: Creating Service under Cluster

  • Follow as it is steps as shown in below picture & remaining keep as default

  • Dont create service now it will show error. Under networking configure some things as shown given below picture

  • After following above all picture as it is click on create service. And after that go in task it will show status running as shown below picture

  • Under service click on that service name and check target group is healthy or unhealthy


Step 10: Accessing application using alb DNS name

  • Go in application load balancer select alb that you have created and copy DNS name and paste it on browser using port no 4000. ex- <DNS-name-url:4000>. It will show frontend. But if you want to see backend is successfully running or not type /status after 4000. ex- <DNS-name-url:4000/status>. Follow below picture for better understanding

  • In target group you can see health status


πŸš€ Conclusion

Deploying this project using ECS Fargate and ALB gave me hands-on experience with a fully managed container orchestration service. Compared to the ECS EC2 launch type, Fargate made things much easier by eliminating the need to manage any servers, letting me focus only on my application containers.

This project not only improved my understanding of modern DevOps practices but also showed me the power of AWS's serverless container services. I'm excited to continue exploring more real-world deployment scenarios and sharing what I learn along the way.


Thanks for reading to the end; I hope you gained some knowledge.β€οΈπŸ™Œ

Linkedln

Twitter

Github

0
Subscribe to my newsletter

Read articles from Vishesh Ghule directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Vishesh Ghule
Vishesh Ghule

I'm proficient in a variety of DevOps technologies, including AWS, Linux, Python, Docker, Git/Github, Shell Scripting, Jenkins and Computer Networking. My greatest strength is the ability to learn new things because I believe there is always room for self-development