Setup a Next.js project with PM2, Nginx and Yarn on Ubuntu 18.04
Tags: react, javascript, nextjs, pm2
Published: 2020-02-10 20:17:10

So, I recently had to deploy a Next.js project to a Ubuntu-server. Quite straight forward but you might run into some quirks. 

We tend to deploy our projects on Now since it is super convenient but there might be instances where You need to deploy things to Your own servers. This is a short tutorial on how You can easily setup a working environment in no time.


We tend to deploy our projects on Now since it is super convenient but there might be instances where You need to deploy things to Your own servers. This is a short tutorial on how You can easily setup a working environment in no time.

1. Install Nginx
2. Install Yarn
3. Install PM2
4. Use Git to fetch our Next.js project from Github
5. Run our project with PM2 and serve a browsable version with Nginx
6. 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

```
{
  "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
```


This article was originally posted on [Will & Skill Blog - Setup a Next.js project with PM2, Nginx and Yarn on Ubuntu 18.04](https://www.willandskill.se/en/setup-a-next-js-project-with-pm2-nginx-and-yarn-on-ubuntu-18-04/)