Deploy NestJS and NextJS application in same server using pm2 and Nginx

NextJS is a popular framework of React for Frontend Web Development.
NestJS is another popular framework of NodeJS, widely used for Backend development.

In many projects, we need to deploy NestJS and NextJS applications in a same server in different ports and access them from outside.

PM2 is a production level process management tool for NodeJS.
NginX is going to be used as our reverse proxy for this system.

Requirements

1. Frontend (NextJS) project will be run at 3001 port.
2. Backend (NestJS) project will be run at 8000 port.
3. Frontend will be accessible from the '/' route.
4. Backend will be accessible from the '/api' route.

System Architecture

Run the Backend

git clone your-backend-repo.git
cd your-backend-repo
npm install
# Run commands for DB migration if needed...
npm run build

# Start project with pm2
pm2 start dist/main.js --name backend # provide a name you like
pm2 save

Make sure in the NestJS src/main.ts file, you mention the port in this line or in .env:

await app.listen(process.env.PORT ?? 8000);

This will run the backend repo using pm2 in port 8000.

Run the Frontend

git clone your-frontend-repo.git
cd your-frontend-repo
npm install
npm run build

# Start project with pm2
pm2 start npm --name "frontend" -- start # provide a name you like, runs the start command inside package.json
pm2 save

Make sure in the package.json file, there is a command in the scripts object called start which will look like this:

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start -p 3001"
  },

This will run the Frontend project in 3001 port.

Nginx Configuration

First, create an Nginx configuration file.

sudo vim /etc/nginx/sites-available/project-name

Then paste this following configuration:

server {
    listen 80;
    server_name your-domain-name; # put your domain name here

    # NextJs Application Route
    location / {
        proxy_pass http://localhost:3001;
        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;
    }

    # NestJS Application Route
    location /api {
        proxy_pass http://localhost:8000;
        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;
    }
}

After this, we need to create a symbolic link to enable the nginx configuration in our server.

sudo ln -s /etc/nginx/sites-available/project-name /etc/nginx/sites-enabled/ #update your file name

After this we need to test the Nginx configuration using the following command:

sudo nginx -t

If this command returns that everything is correct, we need to restart the nginx using following command:

sudo systemctl restart nginx

Great!! we can now access our APIs from your-domain-name/api route and see the UI from your-domain-name/ route.