How to Deploy a MERN Stack application to AWS Amazon EC2
In this tutorial we're going to set up a production-ready web server from scratch on the Amazon EC2 (Elastic Compute Cloud) service, then deploy a custom MERN Stack application to it that supports user registration and authentication.
What is a MERN Stack App, and how does it work?
A MERN Stack framework is made up of a React front-end app that connects to a Node.js + Express + MongoDB backend API, hence the name MERN Stack (Mongo, Express, React, Node). and we can also use MEAN Stack, which uses an Angular front-end, and the MEVN Stack, which uses Vue.js, which are two other variants of the stack and all are full-stack development.
Scope in this tutorial blog.
This tutorial will cover setting up the server on AWS Amazon EC2, as well as deploying and configuring the MERN stack app's front-end and back-end components to function together. Check out the following tutorials blog for more details on the React app and Node.js API used in this post:
- Create a new Ubuntu server on AWS EC2
- Connect to Ubuntu EC2 instance via SSH
- Cloning the projects in the ubuntu os in amazon ec2
- Setup server with Node.js + MongoDB in amazon ec2 ubuntu server
- Setup and install all the packages in the clone project in ec2
- Change proxy server in server.js in ubuntu server
- install pm2 and run the pm2 in both server and client in AWS ec2
- Test the MERN Stack app in a browser
step1: Create a new Ubuntu server on AWS EC2
Before doing anything we need a server that we can work on, follow these steps to spin up a new Ubuntu 18.04 server instance on AWS EC2.
1. Sign in to the AWS Management Console at https://aws.amazon.com/console/. If you don't have an account yet click the "Create a Free Account" button and follow the prompts.
2. Go to the EC2 Service section.
3. Click the "Launch Instance" button.
4. Choose AMI - Check the "Free tier only" checkbox, enter "Ubuntu" in the search box, and press enter, then select the "Ubuntu Server 18.04" Amazon Machine Image (AMI).
5. Choose Instance Type - Select the "t2.micro" (Free tier eligible) instance type and click "Configure Security Group" in the top menu.
6.Configure Security Group - Add a new rule to allow HTTP traffic then click "Review and Launch".
8. Select "Create a new key pair", enter a name for the key pair (e.g. "my-aws-key"), and click "Download Key Pair" to download the private key, you will use this to connect to the server via SSH.
9. Click "Launch Instances", then scroll to the bottom of the page and click "View Instances" to see details of the new Ubuntu EC2 instance that is launching.
step2: Connect to Ubuntu EC2 Instance via SSH
Once the EC2 instance reaches a running state you can connect to it via SSH using the private key downloaded in the previous step.
- Open a terminal window and update the permissions of the private key file with the command $
chmod 400 <path-to-key-file> e.g. $
chmod 400 ~/Downloads/my-aws-key.pem, the key must not be publicly viewable for SSH to work.
- Copy the "Public DNS (IPv4)" property from the instance description tab in the AWS Console, then connect to the instance from the terminal window with the command
ssh -i <path-to-key-file> ubuntu@<domain name> e.g. $
ssh -i ~/Downloads/my-aws-key.pem email@example.com
yes to the prompt "Are you sure you want to continue connecting (yes/no)?" to add the URL to your list of known hosts.
1. open in a window where you contained the private key value.
2. Connect to instance - check the instance and click on connect button in the top left where you find the ssh connection to ubuntu os.
3. open git bash in the folder and connect to AWS ubuntu using ssh.
step3: Cloning the projects in the ubuntu os in amazon ec2.
Clone the Node.js + MongoDB API project into the ubuntu directory with the command
sudo git clone https://github.com/EsC369/DevSpace20.git
Commands should follow and type this command in ubuntu amazon ec2
$ sudo apt-get update
$ sudo git clone <project_name>
Step4: Setup server with Node.js + MongoDB in amazon ec2 ubuntu server.
Follow these steps to set up the Node.js API on the server.
$ sudo apt install nodejs
$ sudo apt install npm
$ curl -fsSL https://www.mongodb.org/static/pgp/server-4.4.asc | sudo apt-key add -
$ echo "deb [ arch=amd64,arm64 ] https://repo.mongodb.org/apt/ubuntu bionic/mongodb-org/4.4 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-4.4.list
$ sudo apt update
$ sudo apt install mongodb-org
$ sudo systemctl start mongod.service
Step5: Setup and install all the packages in the clone project in ec2.
1. Install packages on server-side
$ cd <repo name>
$ sudo npm install
2. install packages on the client-side
$ cd <client-folder>
$ sudo npm install
$ sudo npm run build
If you face any error in client permission denied error
$ sudo chmod +x node_modules/.bin/react-scripts
and start the build again sudo npm start
Step6: Change proxy server in server.js in the ubuntu server.
$ cd <client_foldername>
$ sudo nano package.json
change proxy server URL into http://127.0.0.1:5000 and click ctrl+x - Y - enter
Step7: install pm2 and run the pm2 in both server and client in AWS ec2
PM2 is a daemon process manager that will help you manage and keep your application online. Getting started with PM2 is straightforward, it is offered as a simple and intuitive CLI, installable via NPM.
$ cd ~
$ sudo apt-get update
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash
$ sudo apt install nodejs
$ source ~/.profile
$ nvm install default
$ nvm ls-remote
$ nvm install 16.2.0
$ sudo npm install -g pm2
Run pm2 in server
$ cd <repo_name>
$ pm2 start server.js
Run pm2 in client
$ cd <client_folder>
$ pm2 start --name <repo_name> npm -- start
Managing application state in pm2 and this is optional is simple here are the commands:
$ sudo pm2 restart app_name
$ sudo pm2 reload app_name
$ sudo pm2 stop app_name
$ sudo pm2 delete app_name
Step8: Test your new MERN Stack application running on AWS
- Enter the hostname of your AWS EC2 instance in a browser to access and test your new MERN stack application.
- The hostname is the "Public DNS (IPv4)" property located on the instance description tab in the AWS Console.
- open the public ip in the instance and with port number http:// 188.8.131.52 :3000 and you will get.
The page will open with the public IP and MongoDB and reactjs is connected with each other with the help of pm2, and the MERN application works good in the public IP and link this public IP to the domain name