Ваше приложение Next.js, ваше окружение: Руководство по развёртыванию
Приветствую вас, коллеги-разработчики!
В этом руководстве мы рассмотрим увлекательный процесс развертывания приложения Next.js, использующего последнюю версию, в собственной среде.
Мы рассмотрим три популярных варианта: развертывание в виде статического сайта на Apache, развертывание в виде приложения Node.js и развертывание с помощью Nginx в качестве обратного прокси.
Давайте начнем это увлекательное путешествие!
Вариант 1: Статическое развёртывание с использованием Apache
Шаг 1: Создание приложения Next.js
Первым шагом является создание приложения Next.js.
Откройте каталог проекта и выполните следующую команду:
npm run buildШаг 2: Настройка Apache
Далее убедитесь, что на вашем сервере или в локальной среде установлен Apache. Если нет, установите Apache и убедитесь, что он работает.
Шаг 3: Настройка виртуального хоста
Создайте конфигурацию виртуального хоста для приложения Next.js.
Отредактируйте конфигурационный файл Apache, обычно расположенный по адресу /etc/apache2/sites-available/, и добавьте следующее:
<VirtualHost *:80>
ServerName yourdomain.com
DocumentRoot /var/www/yourdomain.com/public
<Directory /var/www/yourdomain.com/public>
Options FollowSymLinks
AllowOverride All
Require all granted
</Directory>
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>Замените yourdomain.com на реальное доменное имя и соответствующим образом скорректируйте маршрут DocumentRoot.
Шаг 4: Развертывание приложения Next.js
Скопируйте содержимое каталога Next.js out (созданного на этапе сборки) в каталог public, указанный в конфигурации виртуального хоста.
cp -R .next/* /var/www/yourdomain.com/publicУбедитесь, что вы скопировали все содержимое каталога .next, включая все его подкаталоги и файлы.
Шаг 5: Перезапуск Apache
Наконец, перезапустите Apache для применения изменений:
sudo service apache2 restartТеперь ваше приложение Next.js должно быть доступно через ваше доменное имя!
Вариант 2: Развертывание Node.js
Шаг 1: Настройка среды Node.js
Убедитесь, что на вашем сервере или в локальной среде установлен Node.js. Если нет, загрузите и установите Node.js с официального сайта.
Шаг 2: Подготовка приложения Next.js
Убедитесь в том, что ваше приложение Next.js готово к работе, создав его:
npm run buildШаг 3: Настройка PM2 (Process Manager)
Установите PM2, популярный менеджер процессов Node.js, который обеспечит непрерывную работу вашего приложения:
npm install pm2 -gШаг 4: Запуск приложения Next.js с помощью PM2
Перейдите в каталог проекта и запустите приложение Next.js с помощью PM2:
pm2 start npm --name "your-app-name" -- startЗамените "your-app-name" на собственное имя вашего приложения.
Теперь ваше приложение Next.js развёрнуто и работает как приложение Node.js!
Вариант 3: Развертывание Node.js с использованием Nginx
Шаг 1: Настройка среды Node.js
Убедитесь, что на вашем сервере или в локальной среде установлен Node.js. Если нет, загрузите и установите Node.js с официального сайта.
Шаг 2: Подготовка приложения Next.js
Убедитесь в том, что ваше приложение Next.js готово к работе, создав его:
npm run buildШаг 3: Настройка PM2 (Process Manager)
Установите PM2, популярный менеджер процессов Node.js, который обеспечит непрерывную работу вашего приложения:
npm install pm2 -gШаг 4: Запуск приложения Next.js с помощью PM2
Перейдите в каталог проекта и запустите приложение Next.js с помощью PM2:
pm2 start npm --name "your-app-name" -- startЗамените "your-app-name" на собственное имя вашего приложения.
Шаг 5. Настройка Nginx в качестве обратного прокси
Установите Nginx и создайте новый файл конфигурации серверного блока:
sudo apt install nginx
sudo nano /etc/nginx/sites-available/yourdomain.comДобавьте в файл следующую конфигурацию:
server {
listen 80;
server_name yourdomain.com;
location / {
proxy_pass http://localhost:3000; # Replace 3000 with your Next.js app's port
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}Создайте символическую ссылку для активации новой конфигурации:
sudo ln -s /etc/nginx/sites-available/yourdomain.com /etc/nginx/sites-enabled/Протестируйте конфигурацию Nginx и перезапустите Nginx:
sudo nginx -t
sudo service nginx restartТеперь ваше приложение Next.js развернуто и работает как приложение Node.js с Nginx в качестве обратного прокси!
Заключение
Поздравляем с успешным развертыванием приложения Next.js! Независимо от того, выбрали ли вы статическое развертывание с Apache, метод Node.js или развертывание Node.js с Nginx в качестве обратного прокси, вы открыли возможности для демонстрации своего приложения всему миру. Воспользуйтесь этими знаниями и дайте волю своему творчеству, создавая и развертывая новые невероятные веб-приложения!
Если у Вас возникнут вопросы или потребуется дополнительная помощь, обращайтесь.
Счастливого кодирования и счастливого развертывания!
