Deploy Multiple MERN apps to a single digital ocean ubuntu droplet with nginx and SSL

mern_nginx_ssl_digitalocean.md

Deploy Multiple MERN apps to digital ocean

This tutorial will guide you through the process of deploying multiple MERN apps to a single digital ocean ubuntu VPS droplet Reference

1. Sign up for Digital Ocean

DigitalOcean

2. Create a droplet and Login via SSH

YouTube

3. Install NodeJS and npm

$ sudo apt update
$ sudo apt install nodejs
$ nodejs -v
$ npm -v

4. Create a folder for the project on the Droplet

In your droplets home directory create a folder called apps

$ mkdir apps
$ cd apps

5.Clone your project from Github

$ git clone yourproject.git

6. Install dependencies and test app

cd yourproject
npm install
npm start (or whatever your start command)
# stop app
ctrl+C

7. Setup PM2 process manager to keep your app running

sudo npm i pm2 -g
# Make sure you are in the root folder of your app then run
pm2 start app (or whatever your file name)

# Other pm2 commands
pm2 show app
pm2 status
pm2 restart app
pm2 stop app
pm2 logs (Show log stream)
pm2 flush (Clear logs)

# To make sure app starts when reboot
pm2 startup ubuntu

8. Setup UFW Firewall

sudo ufw enable
sudo ufw status
# (Port 22)
sudo ufw allow ssh
#(Port 80)
sudo ufw allow http 
#(Port 443)
sudo ufw allow https 

9. Install NGINX and configure

sudo apt install nginx

10. Move the REACT front end into /var/www/html/ folder

I am assuming that the react front end is contained in a folder called "build" in your projects root directory

#From within your project ROOT directory
cp -Rv build /var/www/html

11. Rename the build folder to a name that will reflect the domain name of your app

mv build mydomain.com 

12. Change permissions of the "mydomain.com" folder

Reference 1 Reference 2

chown -R www-data:www-data /var/www/html/mydomain.com

13. Configure NGINX

sudo nano /etc/nginx/sites-available/mydomain.com.conf

I assume that the backend is running on port 5000 as denoted in the config block below -> "proxy_pass http://localhost:5000;"

and that the front end accesses the backend like this https://www/mydomain.com/backend/your-api-endpoints

Copy paste this into the file that opens in NANO

server {
    listen 80;
    listen [::]:80;

    #Path to the React front end
    root /var/www/html/mydomain.com;
    
    #the main html file
    index index.html;
    
    #Enter the IP address of your droplet
    server_name <ENTER THE IP ADDRESS OF YOUR DROPLET>;

     #STORE the nginx access logs for this app here
     access_log /var/log/nginx/mydomain.com.access.log;
     #Store the error logs for this app here
     error_log /var/log/nginx/mydomain.com.error.log;

    
    location / {
        # Without this line routing in your Single Page APP will not work  
        try_files $uri $uri/ /index.html =404;
    }
    
    #REST API BACKEND CONFIG
    location /backend {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-NginX-Proxy true;
        proxy_pass http://localhost:5000;
        proxy_ssl_session_reuse off;
        proxy_set_header Host $http_host;
        proxy_cache_bypass $http_upgrade;
        proxy_redirect off;
    }    
    

Save and close the config file

Ctrl + O
Ctrl + X

14. Enable the new server block file by creating a symbolic link from the file to the sites-enabled directory

sudo ln -s /etc/nginx/sites-available/mydomain.com.conf /etc/nginx/sites-enabled/

15. Test the Nginx configuration for correct syntax

sudo nginx -t

If there are no errors, the output will look like this:

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

16. Restart the Nginx service for the changes to take effect

sudo systemctl restart nginx

17. Install Python NGINX certbot to generate a SSL Certificate

DigitalOcean Documentation

sudo add-apt-repository ppa:certbot/certbot
sudo apt-get update
sudo apt-get install python-certbot-nginx
sudo certbot --nginx -d mydomain.com -d www.mydomain.com

To renew the certificate

sudo certbot renew --dry-run

If you ever need to make changes to /etc/nginx/sites-available/mydomain.com.conf

Reference

#FIRST DELETE THE CONF FILE FROM SITES-ENABLED AND NOT SITES-AVAILABLE
#ONCE AGAIN DELETE THE CONF FILE IN SITES-ENABLED

cd /etc/nginx/sites-enabled

rm mydomain.com.conf

#and then after you have finished modifying the conf file in SITES-AVAILABLE run this once again
sudo ln -s /etc/nginx/sites-available/mydomain.com.conf /etc/nginx/sites-enabled/

For multiple MERN apps repeat from STEP 10 and replace mydomain.com with anotherdomain.com and make sure the backend is running on a different port, also update the port for the backend in your sites-available conf file proxy_pass http://localhost:differen-port;

Very Helpful Tutorial Thanks