Как развернуть приложение NextJS на пользовательском VPS


Мотивация

Когда мы разрабатываем какое-либо приложение Next JS и начинаем развертывание, первое, что приходит на ум — это Vercel. В настоящее время существует множество хостинг-провайдеров, которые также поддерживают Next JS на своей платформе. Но недавно я работал над проектом, где мне нужно было развернуть NextJS SSR приложение на VPS сервере, так как клиенту было неудобно развертывать приложение где-либо еще, поэтому я поискал и не нашел никаких инструкций, как это сделать.

Предварительные условия

Прежде чем мы начнем развертывать что-либо, сначала нам нужен VPS, готовый для этого. Пожалуйста, прочитайте часть 1 из серии «Установка Node js сервера» здесь.

Шаг 1 — Создание APP

Сначала мы создаем новый Next JS APP на сервере с

npx create-next-app@latest awesome-app
Войти в полноэкранный режим Выйти из полноэкранного режима

или вы можете клонировать существующий репозиторий из git

git clone awesome-app.git
Войти в полноэкранный режим Выйти из полноэкранного режима

Затем нам нужно войти в папку, которую мы только что создали с помощью

cd awesome-app
Войти в полноэкранный режим Выйти из полноэкранного режима

если вы клонировали приложение из git, вам нужно сделать дополнительное приложение для установки зависимостей

npm install 
#or 
yarn 
Войти в полноэкранный режим Выйти из полноэкранного режима

Шаг 2 — Сборка для производства

NextJS поставляется со скриптами сборки, поэтому нам просто нужно запустить их

npm run build
#or 
yarn build
Войти в полноэкранный режим Выйти из полноэкранного режима

это займет некоторое время для создания производственной сборки вашего проекта, так как он будет генерировать все статические страницы для вас заранее.

Шаг 3 — Установка порта (необязательно)

По умолчанию Next JS будет запускаться на порту 3000, но на этом сервере мы уже запустили приложение на 3000, поэтому нам нужно обновить package.json, чтобы запустить производственное приложение на новом порту, например 4400.

{
  "name": "awesome-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start -p 4400", // or whatever port you want 
    "lint": "next lint"
  },
  "dependencies": {
    "next": "12.2.5",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "eslint": "8.22.0",
    "eslint-config-next": "12.2.5"
  }
}

Войдите в полноэкранный режим Выход из полноэкранного режима

Шаг 4 — Запуск приложения с помощью PM2

Для запуска приложения с помощью PM2 нам нужно выполнить следующие действия

pm2 start npm --name "awesome-app" -- start
Войти в полноэкранный режим Выйти из полноэкранного режима

это запустит приложение на порту 4400, если вы хотите добавить SSL и обратный прокси с NGINX, нам нужно добавить новое приложение к существующей конфигурации NGINX в форме VPS Setup.

Шаг 5 — Добавление обратного прокси с помощью NGINX

Чтобы обновить сервер, сначала откройте конфигурацию

sudo nano /etc/nginx/sites-available/default
Войдите в полноэкранный режим Выйдите из полноэкранного режима

и добавьте этот новый блок в часть расположения блока сервера

    server_name awesomeapp.com.com www.awesomeapp.com.com;

    location / {
        proxy_pass http://localhost:4400; 
        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;
    }
Войдите в полноэкранный режим Выйти из полноэкранного режима

если вы планируете разместить secound приложение на поддомене, просто замените yourdomain2.com на поддомен, например api2.yourdomain.com.

затем проверьте и перезапустите NGINX.

# Check NGINX config
sudo nginx -t

# Restart NGINX
sudo service nginx restart
Войдите в полноэкранный режим Выйдите из полноэкранного режима

если домен указан, вы должны увидеть, что ваше приложение работает на порту 80, осталось сделать еще один шаг — добавить SSL.

Шаг 6 — Добавление SSL для второго APP

у нас уже установлен certbot, поэтому добавление дополнительных доменов не является проблемой

sudo certbot --nginx -d awesomeapp.com -d www.awesomeapp.com
Войдите в полноэкранный режим Выйти из полноэкранного режима

Вот и все, ваше новое приложение также должно быть запущено на новом домене с SSL.

Пожалуйста, дайте мне знать, если вы столкнетесь с какими-либо проблемами Спасибо.

Оцените статью
devanswers.ru
Добавить комментарий