Setup a Next.js project with PM2, Nginx and Yarn on Ubuntu 18.04

In this tutorial we will

Install Nginx
Install Yarn
Install PM2
Use Git to fetch our Next.js project from Github
Run our project with PM2 and serve a browsable version with Nginx
Run PM2 automatically whenever we boot/reboot the machine

Install Nginx

sudo apt install nginx

Install yarn on Ubuntu

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt-get update && sudo apt-get install yarn

Install PM2 globally on your machine

yarn global add pm2

Fetch project repo from Github and install all the dependencies

git clone github:<YOUR_ORGANIZATION>/<YOUR_PROJECT> project
cd project
yarn install

💡 NOTE: If You have Your latest code in a different branch you need to checkout that branch so if Your code resides in a branch named development you need to run git checkout development

💡NOTE: After yarn install you have to run yarn build so that You get a runnable version of the Next.js app

Start the Next.js project with Yarn and PM2

Our package.json looks like this

Javascript{
  "name": "nextjs-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "next start -p 8000",
    "test": "NODE_ENV=test jest",
    "test:watch": "NODE_ENV=test jest --watch",
    "test:coverage": "NODE_ENV=test jest --coverage",
    "test:cypress": "NODE_ENV=test cypress open",
    "lint": "eslint .",
    "lint:watch": "esw . --watch --cache",
    "lint:watchAll": "esw . --watch",
    "circleci:run": "circleci local execute --job $JOB"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/willandskill/nextjs-example.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/willandskill/nextjs-example/issues"
  },
  "homepage": "https://github.com/willandskill/nextjs-example#readme",
  "dependencies": {
    ...
  },
  "devDependencies": {
    ...
  }
}

We have some extra stuff that You can ignore for now in our package.json. The line that matters to us is "start": "next start -p 8000" under scripts and in order for us to run it from the command line we would run yarn start but if we want PM2 to run it for us we need to run pm2 start yarn --name "nextjs" --interpreter bash -- start

To run our Next.js project and see if the process is kicking we need to run the commands below

pm2 start yarn --name "nextjs" --interpreter bash -- start
pm2 show nextjs

The output should be something like

root@willandskill-example:# pm2 show nextjs
 Describing process with id 0 - name nextjs
┌───────────────────┬──────────────────────────────────┐
│ status            │ online                           │
│ name              │ nextjs                           │
│ version           │ N/A                              │
│ restarts          │ 2                                │
│ uptime            │ 93m                              │
│ script path       │ /usr/bin/yarn                    │
│ script args       │ start                            │
│ error log path    │ /root/.pm2/logs/nextjs-error.log │
│ out log path      │ /root/.pm2/logs/nextjs-out.log   │
│ pid path          │ /root/.pm2/pids/nextjs-0.pid     │
│ interpreter       │ bash                             │
│ interpreter args  │ N/A                              │
│ script id         │ 0                                │
│ exec cwd          │ /root/project                    │
│ exec mode         │ fork_mode                        │
│ node.js version   │ N/A                              │
│ node env          │ N/A                              │
│ watch & reload    │ ✘                                │
│ unstable restarts │ 0                                │
│ created at        │ 2019-03-13T15:02:40.278Z         │
└───────────────────┴──────────────────────────────────┘
 Add your own code metrics: http://bit.ly/code-metrics
 Use `pm2 logs next [--lines 1000]` to display logs
 Use `pm2 env 0` to display environement variables
 Use `pm2 monit` to monitor CPU and Memory usage next

If You want to monitor what is happening in real time, You can run the command pm2 monit. This command is quite handy if You want to see the logs generated in real time or see how Your hardware resources is utilized in normal/heavy traffic.

pm2 monit

How you deploy a new version

git pull
yarn install
yarn build
pm2 restart nextjs

Setting up a basic Nginx config file

# /etc/nginx/sites-available/nextjs-example.willandskill.eu

server {
    server_name nextjs-example.willandskill.eu;
    access_log /opt/nextjs/logs/access.log;
    error_log /opt/nextjs/logs/error.log error;

    location /_next/ {
        alias /opt/nextjs/project/.next/;
        expires 30d;
        access_log on;
    }

    location / {
        # reverse proxy for next server
        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;
        
        # we need to remove this 404 handling
        # because next's _next folder and own handling
        # try_files $uri $uri/ =404;
    }
}

The important line in this Nginx config file is to map the traffic to http://localhost:8000 with the line proxy_pass http://localhost:8000; under the location / block.

If you want PM2 to start on startup

pm2 startup

You can also run the command below to freeze the processes You want to run on startup

pm2 save

Happy coding!