MERN based Full stack App on multiple EC2 instances separating frontend and backend

In the last two blogs, we have seen how to run the Full Stack Application in developer mode in AWS EC2. For this, we created one EC2 instance and were running both front and back end applications in it. This setup is fine for the development environments. But if we think about production scenarios then we need to set it up bit differently usually separating the Front, Back and DB components.

In this blog, we will setup our Full Stack Application manually but using user data in EC2 instances and for this we will be using two EC2 instances:

  • Front End Application (Since REACT application is served as static content, we will use Apache HTTP server)
  • Back End Application

Our application architecture will look like this:

Architecture

In upcoming blogs, we will automate it with proper CICD pipeline (Continuous Integration & Continuous Delivery) and later on we will also see about Availability and Scalability of this application.

In the above Architecture diagram you can see that Users will connect to our Front End application through Internet. Our Front End application will be hosted on one of the EC2 instance having Apache HTTP Server to serve the static content. Front End application can connect to Back End application which will be hosted on another EC2 instance. And our Back End application will utilize Mongo DB through Internet for data persistence. Keeping Front End, Back End and DB components separately, this enables us to scale-in and scale-out individual components.

Setting up the Back End of the Application:

Launch a new instance in EC2:

Select Amazon Linux2 AMI

Amazon Linux2 AMI

Select t2.micro instance type

t2.micro as instance type

In the instance details, pass the below script as user data:

#!/bin/bash
cd /home/ec2-user
sudo yum update -y
sudo yum install git -y
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion
nvm install node
git clone https://github.com/anupam0303/Task-Manager.git
cd Task-Manager/backend
npm install -D
npm audit fix --force
cd config
sed  -i 's+mongodb://localhost:27017/taskmanager+mongodb\+srv://<username>:<password>@cluster0.fcftx.mongodb.net/myFirstDatabase?retryWrites=true\&w=majority+g' configs.js
cd ..
npm run server

This user data will do following stuff when the EC2 instance starts:

  1. Update the packages
  2. Install git
  3. Install & activate nvm (which is needed to install node)
  4. Install node
  5. Clone the git repository
  6. Install npm dependencies
  7. Update the Mongo DB connection string in configs.js file (under backend directory)
  8. run the backend server
Instance details

Add storage:

Add storage

Add Tags:

Add tags

Create new or select existing security group:

Security Group

Make sure to allow ports 80 (http), 22 (ssh) and 5000 (backend app).

Review and launch the instance. And finally select the key pair (if you do not have one, then please create):

Key pair for EC2 instance

This will launch one EC2 Instance, running our backend application only. Please grab the IP address (In my case, it was 3.89.160.77). This IP will be needed to change the settings in our front end application so that it can connect to right backend server.

Setting up the Front End of the Application:

Launch another EC2 instance, process is very similar to backend application setup with below 2 changes:

While doing to EC2 instance setup, use below user data script:

#!/bin/bash
cd /home/ec2-user
sudo yum update -y
sudo yum install git -y
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion
nvm install node
git clone https://github.com/anupam0303/Task-Manager.git
cd Task-Manager/frontend
npm install -D
npm audit fix --force
sed -i 's+localhost:5000+3.89.160.77:5000+g' src/config.js
sed -i 's+localhost:5000+3.89.160.77:5000+g' package.json
yum install -y httpd.x86_64
npm run build
cp -r ./build/*  /var/www/html/
systemctl start httpd.service
systemctl enable httpd.service

This user data will do following stuff when the EC2 instance starts:

  1. Update the packages
  2. Install git
  3. Install & activate nvm (which is needed to install node)
  4. Install node
  5. Clone the git repository
  6. Install npm dependencies
  7. Update the backend details in src/config.js and package.json files
  8. Install apache http server to serve the static content
  9. Create a production build of frontend application
  10. copy build files to apache server (under directory /var/www/html)
  11. Start and enable apache server
Instance details

And, setup or select a security group which has at least port 80 opened:

Security group for front end application

Review and Launch the instance in same way as backend EC2 instance.

Once both the instances are launched, you should be able to open the frontend app with IP address of the front end server (e.g. http://54.87.171.72).

This has enabled us to decouple our frontend and backend applications both running on different machines. It has also enabled us to create more scalable and available production deployments.

In next blog, I will explore how to utilize availability and scalability aspects of AWS cloud computing using Application Load balancers(ALBs) & Auto Scaling Groups(ASGs).

If you have any comment, question or advise, please do write in the comment section below. Till then stay tuned and happy learning!!!

And, here is the video if you want to follow the steps along:

MERN App on EC2 using 3-tier architecture

6 thoughts on “MERN based Full stack App on multiple EC2 instances separating frontend and backend

  1. Rachit

    Thank you!!! I was looking for this and endedup here. Really detailed and precise explanation. Will you be uploading video tutorial for this blog?

    Reply
  2. דירה דיסקרטית בצפון

    “I would like to thank you for the efforts you have put in writing this blog. I am hoping to see the same high-grade content by you in the future as well. In fact, your creative writing abilities has motivated me to get my own, personal website now ;)”

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *