Deploy a MERN App on AWS EC2 with Nginx

Deploy a MERN App on AWS EC2 with Nginx

Step 1:

Work on on updated system so there are no dependency issues.

sudo apt update

sudo apt -y upgrade

Step 2:

All versions of Node are available in the APT repository, so we have to add it manually

sudo apt update

sudo apt -y install curl dirmngr apt-transport-https lsb-release ca-certificates

curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -

Replace 14.x with the preferred node version.

Step 3:

Node has been added, now install it

sudo apt -y install nodejs

Install development tools used to build native add-ons as well

sudo apt -y install gcc g++ make

Confirm Node installation by checking the version installed.

node --version

npm --version

Step 4:

Install git to clone the repository

sudo apt install git -y


Confirm that git is installed

git --version

Clone your repository and install all npm packages in /client and /server.

Step 5:

To keep both the client and server running on AWS EC2 instance, we can use process managers like PM2

sudo npm install -g pm2

Navigate to /server folder and start the server with PM2

pm2 start server.js --name "mern-server"

Replace "server.js" with the main file that starts your Node.js server

Navigate to /client folder and start the client with PM2

pm2 start npm --name "mern-client" --start

Monitor the status and logs of all running processes using PM2

pm2 status

pm2 logs

To manage the processes (start, stop, restart, etc.) use the following commands.

• Restart all processes - pm2 restart all
• Restart a specific process - pm2 restart mern-server
• Stop all processes - pm2 stop all
• Stop a specific process - pm2 stop mern-server
• Delete a process from PM2 - pm2 delete mern-server

Step 6:

Install Nginx server

sudo apt install nginx

Create a new Nginx server block

sudo nano /etc/nginx/sites-available/my-mern-app

Add the following configuration (replace example.com with your domain or EC2 public IP)

server {

listen 80;

server_name exmaple.com

location / {

proxy_pass http://localhost:3000; #Assuming your React app is running on port 3000

proxy_set_header X-Real-IP $remote_addr;

proxy_set_header Host $host;

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

}

}

Enable the Nginx server block

sudo ln -s /etc/nginx/sites-available/my-mern-app /etc/nginx/sites-enabled/

Test the Nginx configuration

sudo nginx -t

Restart Nginx

sudo service nginx restart

If you still see “Welcome to Nginx” instead of your MERN app follow the step below.

Navigate to the Nginx sites-available directory

cd /etc/nginx/sites-available

Create a new Nginx server block configuration file if it doesn’t exist else edit the file for your MERN app

sudo nano my-mern-app

Add the following configuration (replace example.com with your domain or EC2 public IP)

server {

listen 80;

server_name example.com;

location / {

proxy_pass http://localhost:3000 #Assuming your MERN app is running on port 3000

proxy_set_header X-Real-IP $remote_addr;

proxy_set_header Host $host;

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

}

}

Create a symbolic link to enable the new server block

sudo ln -s /etc/nginx/sites-available/my-mern-app /etc/nginx/sites-enabled/

Test the Ngnix configuration for syntax errors

sudo nginx -t

Restart Nginx to apply the changes

sudo service nginx restart