How to Deploy MERN Stack Project

How to Deploy MERN Stack Project

How to Deploy MERN Stack Project

MERN Stack, React.js, Node.js, High level programming,

For the deployment of the MERN stack project, we'll require the reverse proxy setup along with the web server itself. Nginx is a widely used web server that can host parallel sites. In this guide, we'll discuss the deployment of the MERN stack project on Ubuntu 20.04 using the Nginx server. This will also include setting up the server block. 

Prerequisites:

1.  You have Ubuntu 20.04 with sudo privileges

2.  You have putty client to connect SSH

Step 1: Installing Nginx

sudo apt update

sudo apt install nginx

systemctl status nginx

http://your_server_ip

sudo systemctl start nginx

sudo systemctl restart nginx

Step 2: Creating Server Block

sudo mkdir -p /var/www/your_domain/html

sudo chown -R $USER:$USER /var/www/your_domain/html

sudo chmod -R 755 /var/www/your_domain

sudo nano /var/www/your_domain/html/index.html

sudo nano /etc/nginx/sites-available/your_domain

sudo git clone {{your project file path on github/git}}

Example 1: 

server {

        listen 80;

        listen [::]:80;


        root /var/www/your_domain/html;

        index index.html index.htm index.nginx-debian.html;

        server_name your_domain www.your_domain;

        location / {

                try_files $uri $uri/ =404;

        }

}

Example 2:

server {

 listen 80;

 location / {

 proxy_pass http://{{PRIVATE IP OF LINUX SERVER}}:{{NODE-PROJECT-PORT}};

 proxy_http_version 1.1;

 proxy_set_header Upgrade $http_upgrade;

 proxy_set_header Connection ‘upgrade’;

 proxy_set_header Host $host;

 proxy_cache_bypass $http_upgrade;

 }

}

Example 3:

server {

  listen 80 default_server;

  server_name _;


  # react app & front-end files

  location / {

    root /opt/front-end/dist;

    try_files $uri /index.html;

  }


  # node api reverse proxy

  location /api/ {

    proxy_pass http://localhost:4000/;

  }

}

Verify nginx status: 

sudo nginx -t

sudo systemctl restart nginx

sudo ln -s /etc/nginx/sites-available/your_domain /etc/nginx/sites-enabled/

sudo nano /etc/nginx/nginx.conf

Server Logs

/var/log/nginx/access.log: Every request to your web server is recorded in this log file unless Nginx is configured to do otherwise.

/var/log/nginx/error.log: Any Nginx errors will be recorded in this log.

Step 3: Installing node and the app

sudo apt-get install git

sudo apt-get install -y build-essential openssl libssl-dev pkg-  config

sudo apt-get install -y nodejs nodejs-legacy

sudo npm cache clean -f

sudo npm install -g n

Step 4: Running the app

npm install -g pm2

pm2 list

npm install serve -s

npm run build 

serve -s build

pm2 serve build PORT --spa 

pm2 delete processA

How to close a process? 

sudo lsof -i :8080       

kill -9 9169     

To configure the MongoDB (Optional)
https://www.cloudbooklet.com/how-to-install-and-setup-mern-stack-with-nginx-on-ubuntu-20-04/