Розгортання додатку Next.js на VPS-хостингу Hostinger може бути простим процесом, якщо діяти поетапно. Ось покрокова інструкція, щоб допомогти вам ефективно розгорнути ваш додаток:
Попередні вимоги
Перед тим як почати, переконайтеся, що у вас є:
- План VPS-хостингу від Hostinger.
- Доменне ім’я, підключене до вашого VPS (необов’язково, але рекомендовано).
- Базові знання команд Linux та SSH.
- Ваш додаток Next.js готовий до розгортання.
- Локальний термінал або SSH-клієнт, наприклад, PuTTY.
Крок 1: Підключення до VPS через SSH
- Увійдіть до Hostinger Перейдіть до вашої панелі керування Hostinger і перейдіть до сервісу VPS-хостингу.
- Отримайте ваші дані VPS
- Підключення через SSH Відкрийте ваш термінал або SSH-клієнт і виконайте команду:
ssh root@
Замість <IP_ADDRESS> введіть IP-адресу вашого VPS. Введіть пароль, коли буде запитано.
Крок 2: Оновлення та підготовка VPS
- Оновлення системних пакетів Виконайте наступні команди для оновлення сервера:
apt update && apt upgrade -y
Встановіть необхідні інструменти або використовуйте VPS шаблони від Hostinger наприклад, для Node.js.
Переконайтесь, що у вас встановлені curl та wget:
apt install curl wget -y
Крок 3: Встановлення Node.js та npm
- Встановлення Node.js через NodeSource Завантажте останню стабільну версію:
curl -fsSL https://deb.nodesource.com/setup_18.x | bash -
apt install nodejs -y
Перевірте встановлення:
node -v
npm -v
Встановіть pm2 для керування вашим додатком:
npm install -g pm2
Крок 4: Підготовка вашого додатку Next.js до розгортання
1.
Зібрати ваш додаток На вашій локальній машині зібрайте ваш додаток Next.js:
npm run build
Переконайтеся, що додаток працює локально перед тим, як продовжити.
Передача файлів на VPS:
Використовуйте scp для завантаження вашого додатку на VPS:
scp -r /path/to/your/app root@:/var/www/your-app
Перейдіть до директорії додатку
SSH-підключіться до вашого VPS і перейдіть до директорії вашого додатку:
cd /var/www/your-app
Встановлення залежностей
Виконайте:
npm install
Крок 5: Запустіть ваш додаток Next.js
Запуск додатку Використовуйте pm2 для запуску вашого додатку:
pm2 start npm --name "nextjs-app" -- start
Налаштування автоматичного запуску після перезавантаження
Збережіть процес pm2:
pm2 save
pm2 startup
Крок 6: Налаштування зворотного проксі за допомогою Nginx
Встановлення Nginx
Виконайте:
apt install nginx -y
Налаштування Nginx для вашого додатку
Відкрийте конфігураційний файл Nginx:
nano /etc/nginx/sites-available/nextjs
Додайте наступну конфігурацію:
server {
listen 80;
server_name your-domain.com;
location / {
proxy_pass http://localhost:3000;
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;
}
}
Активуйте конфігурацію
Створіть символічне посилання на файл у sites-enabled:
ln -s /etc/nginx/sites-available/nextjs /etc/nginx/sites-enabled/
Перезапустіть Nginx
Застосуйте зміни:
systemctl restart nginx
Вітаємо🎉 ваш веб-додаток Next.js тепер в мережі! Ви можете перевірити це, зайшовши за вашим доменним ім’ям або IP-адресою вашої машини.
Крок 7: (Необов’язково): Захистіть ваш додаток за допомогою SSL
Встановлення Certbot
Виконайте:
apt install certbot python3-certbot-nginx -y
Отримання SSL сертифікату
Виконайте:
certbot --nginx -d your-domain.com -d www.your-domain.com
Автоматичне оновлення SSL
Додайте до crontab:
crontab -e
Додайте рядок:
0 3 * * * certbot renew --quiet
Крок 8: Тестування вашого додатку
Доступ до додатку Відкрийте ваш браузер і перейдіть за адресою:
http://your-domain.com
Перевірка логів
Використовуйте pm2 logs для перевірки помилок:
pm2 logs
Висновок
Слідуючи цій детальній інструкції, ви успішно розгорнули ваш додаток Next.js на VPS-хостингу Hostinger. З Nginx як зворотним проксі та SSL для безпеки, ваш додаток в мережі та готовий обслуговувати користувачів по всьому світу.
Сподіваюся, ця стаття була корисною для вас😊
Перекладено з: Vercel’s Costing Sucks: How to Deploy Your Next.js App on Hostinger VPS | Guide