Краткое руководство по использованию Nginx для обслуживания нескольких приложений Next.js в одном домене с использованием подкаталогов.
По умолчанию, если вы использовали create-next-app
для запуска проекта Next.js, предполагается, что вы запускаете все как один большой веб-сайт. Недавно я столкнулся с небольшим вариантом использования, в котором целью было разместить несколько проектов Next.JS и обслуживать их с использованием одного домена и подкаталогов.
Скажем, у нас есть три проекта Next.js, а именно bikes
, cars
и trucks
, и все они являются отдельными проектами с отдельными репозиториями git. Мы хотим обслуживать эти три проекта подкаталогами на одном экземпляре сервера.
bikes
следует обслуживать вyourdomain.com/bikes
cars
следует обслуживать вyourdomain.com/cars
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.
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; } }
Вот и все!