Deploy a Full Stack Web App to VPS Server with NGINX and PM2!

Hey there! Learning to deploy a Full Stack Web App to a VPS without a GUI is fairly complicated if you are a beginner. I myself had a hard time trying to learn it but you don't have to with this article.

First things first, you are going to need a VPS server in order to keep up with this tutorial. You can search the net for a hosting service or you can visit the official forbes site to learn about their recommendations.

Once you have your hosting service and credentials to connect it, open your terminal and connect to your server with the following;

ssh root@your_vps_server_ip_address

Hit enter, type in your password and you're in!

Before we start deploying our application; we must install nodejs, nginx and pm2.

You can follow Digitalocean's official documentation to install nodejs on Ubuntu.

To install nginx, you can follow the two step given on official ubuntu docs.

And after installing nodejs, to install pm2 via npm;

npm install pm2 -g

Once the installations are complete, clone your app using git clone.

Now we can start deploying our app! First, go to your cloned app directory and get a build of your backend. I'm using Nestjs for my app. And then, go and start the build of your application using your package.json scripts with pm2. In this case my start script looks like this;

pm2 start "npm run start" --name [your_app_name]

After this command type in "pm2 status" and you're going to see your backend is up and running!

In order to serve our Front End app, we must get a build of it and confugure our nginx server.

Lets's configure our nginx server. Type in the following to your terminal;

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

And then, paste the following;
Note: I'm using a React front end for this tutorial. So, the first "location /" config is for the React app and the second one is for the API (your backend).

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

        root [path_to_your_front_end_apps_dist_folder];

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

        server_name [your_vps_ip_address];

        location / {
          try_files $uri /index.html; # your build's index html path
        }

        location /[your_api_prefix_if_you_have_one] {
            proxy_pass http://[your_vps_ip_address]:[your_backend_apps_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;
        }

}

Then, save your configuration file and check if your config have any syntax errors via;

sudo nginx -t

If you're good to go, restart the nginx server and check its status;

sudo systemctl restart nginx
sudo systemctl status nginx

And we've successfully deployed our Full Stack Web App! Check out by going to your VPS IP address and your app should be there!