Настройка проекта Next.js с PM2, Nginx и Yarn в Ubuntu

Published on
Authors

Итак, мне недавно пришлось развернуть проект Next.js на сервере Ubuntu. Это краткое руководство о том, как легко и быстро настроить рабочую среду для проекта Next.js.

В этом уроке мы:

  1. Установим Yarn
  2. Установим PM2
  3. Используйте Git, чтобы получить наш проект Next.js из Github
  4. Запустим наш проект с PM2 и напишем конфигурационный файл для Nginx
  5. Настроим PM2 для автоматического запуска после того как мы загружаем/перезагружаем машину

Установка Nginx

sudo apt install nginx

Установка Yarn на 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.listsudo apt-get update && sudo apt-get install yarn

Установите PM2 глобально на свой компьютер

yarn global add pm2

Получите репозиторий проекта из Github и установите все зависимости

git clone github:/ projectcd projectyarn install
ПРИМЕЧАНИЕ. Если у вас есть последний код в другой ветке, вам необходимо проверить эту ветку, поэтому, если ваш код находится в ветке с именем development, вам необходимо запустить git checkout development. 
ПРИМЕЧАНИЕ. После установки yarn install вам необходимо запустить сборку yarn build, чтобы получить работающую версию приложения Next.js.
-

Запустите проект Next.js с Yarn и PM2

Наш package.json выглядит так

{
  "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/kramarenko/nextjs-example.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/kramarenko/nextjs-example/issues"
  },
  "homepage": "https://github.com/kramarenko/nextjs-example#readme",
  "dependencies": {
    ...
  },
  "devDependencies": {
    ...
  }
}

Для нас важна запись"start": "next start -p 8000" в блоке scripts и чтобы запустить его из командной строки, мы запустим yarn start но если мы хотим, чтобы PM2 запустил его за нас, нам нужно запустить pm2 start yarn --name "nextjs" --interpreter bash -- start

Чтобы запустить наш проект Next.js и посмотреть, работает ли процесс, нам нужно выполнить следующие команды

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

Результат должен быть примерно таким

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

Если Вы хотите следить за происходящим в реальном времени, Вы можете запустить команду pm2 monit. Эта команда очень удобна, если вы хотите просмотреть логи генерируются в режиме реального времени или посмотреть, как ваши аппаратные ресурсы используются при нормальном / интенсивном трафике.

pm2 monit

Как вы развертываете новую версию

git pull
yarn install
yarn build
pm2 restart nextjs

Настройка базового файла конфигурации Nginx

# /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;
    }
}

Важной строкой в ​​этом файле конфигурации Nginx является отображение трафика на http://localhost:8000 с помощью строки proxy_pass http://localhost:8000; блок location/.

Если вы хотите, чтобы PM2 запускался при запуске

pm2 startup

Вы также можете запустить приведенную ниже команду, чтобы заморозить процессы, которые вы хотите запускать при запуске.

pm2 save