Краткое руководство по использованию Nginx для обслуживания нескольких приложений Next.js в одном домене с использованием подкаталогов.

По умолчанию, если вы использовали create-next-app для запуска проекта Next.js, предполагается, что вы запускаете все как один большой веб-сайт. Недавно я столкнулся с небольшим вариантом использования, в котором целью было разместить несколько проектов Next.JS и обслуживать их с использованием одного домена и подкаталогов.

Скажем, у нас есть три проекта Next.js, а именно bikes, cars и trucks, и все они являются отдельными проектами с отдельными репозиториями git. Мы хотим обслуживать эти три проекта подкаталогами на одном экземпляре сервера.

  1. bikes следует обслуживать в yourdomain.com/bikes
  2. cars следует обслуживать в yourdomain.com/cars
  3. trucks следует обслуживать в yourdomain.com/trucks

Я лично использую Nginx в качестве обратного прокси-сервера для обслуживания моих приложений Next.js. Я использую PM2 как диспетчер процессов. Но поскольку Next.js предполагает, что вы всегда обслуживаете его как единый веб-сайт, возникают проблемы с загрузкой созданных ресурсов. Обычно вы получаете 404 для всех своих статических ресурсов. Чтобы выполнить вышеперечисленные требования, нам нужно настроить несколько вещей.

Поместите все маршруты в одну папку с именем подкаталога

Например, если каталог проекта в вашем экземпляре находится в /home/ubuntu/bikes, вы создаете папку bikes в pages. Затем создайте здесь все остальные маршруты.

2. Добавьте assetPrefix в файл next.config.file.

Параметр assetPrefix позволяет обрабатывать статические файлы из другого каталога. По умолчанию это обслуживается с /_next. Но поскольку мы используем подкаталоги, нам нужно обслуживать эти ресурсы из примера /bikes/_next. Но если вы посмотрите в папку проекта после сборки Next.js, вы заметите, что папки /next там не будет. Но это называется /.next. Мы решим это на следующем шаге.

3. Измените обратный прокси-сервер Nginx.

Нам нужно убедиться, что для проекта установлен обратный прокси-сервер, это общедоступный каталог и /pages/api маршруты. Я помещаю файлы своего проекта в /home/ubuntu, так как я использую машину Ubuntu. Это может отличаться. Обратите внимание, что вместо этого мы применяем псевдоним _next к каждой папке .next. Обязательно перезапустите Nginx.

Gist Here

server {
  listen 80 default_server;
  listen [::]:80 default_server;
  server_name _;
  #ONE FOR EACH NEXTJS APP AND SUBDOMAIN
 #BIKES - PORT 3001
  location /bikes/_next/static {
    autoindex on;
    alias /home/ubuntu/bikes/.next/static;
  }
location /bikes/api {
    proxy_pass http://localhost:3001/api;
    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;
  }
location /bikes {
    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;
  }
#CARS - PORT 3002
  location /cars/_next/static {
    autoindex on;
    alias /home/ubuntu/cars/.next/static;
  }
location /cars/api {
    proxy_pass http://localhost:3002/api;
    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;
  }
location /cars {
    proxy_pass http://localhost:3002;
    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;
  }
#TRUCKS - PORT 3003
  location /trucks/_next/static {
    autoindex on;
    alias /home/ubuntu/trucks/.next/static;
  }
location /trucks/api {
    proxy_pass http://localhost:3003/api;
    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;
  }
location /trucks {
    proxy_pass http://localhost:3003;
    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;
  }
}

Вот и все!