Деплой приложения Next.js на Ubuntu VPS

1 июл. 2024 г.

3 минуты528 слов

Рекомендую устанавливать приложение Next.js на сервер с оперативной памятью не менее 2 гигабайт для успешного выполнения команды npm run build

Если ищете быстрый и удобный хостинг для ваших проектов, то могу посоветовать Timeweb Cloud.

Разворачиваем Next.js приложение

Подключаемся к серверу

ssh root@server_ip_address

Обновляем сервер

sudo apt update
sudo apt upgrade

Устанавливаем NGINX и Certbot

sudo apt install nginx certbot python3-certbot-nginx

Настраиваем фаервол

sudo ufw allow "Nginx Full"
ufw allow OpenSSH
ufw enable

Устанавливаем npm

apt install npm

Устанавливаем Node.js. Способ 1

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
exec $SHELL
nvm install --lts
nvm install 20 #или другая версия
nvm use 20
nvm alias default 20

Устанавливаем Node.js. Способ 2

curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt-get install -y nodejs

Устанавливаем pm2

npm install -g pm2

Проверяем работает ли pm2

pm2 status

Генерируем SSH ключ на сервере

cd /root/.ssh
ssh-keygen -t rsa -b 4096 -C "username@email.com"
eval "$(ssh-agent -s)"
ssh-add ~/.ssh/id_rsa
cat ~/.ssh/id_rsa.pub

Ключ нужно будет добавить в ваш github репозиторий.

Переходим в www root

cd /var/www

Создаем новое Next.js приложение

npx create-next-app@latest name_of_app

Или клонируем существующее из репозитория

git clone git@github.com:username/repo_name.git

Переходим в папку с приложением Next.js

cd name_of_app

Устанавливаем npm пакеты

npm i

Запускаем сборку проекта

npm run build

Создаем конфиг NGINX или редактируем существующий

cd /etc/nginx/sites-available
touch name_of_app
nano name_of_app

Пример конфигурации NGINX для сайта приложения на Next.js

# /etc/nginx/sites-available/name_of_config_file
 
server {
        listen 80;
        server_name domainname.com www.domainname.com; #если нет домена, то можете использовать ip адрес
 
        gzip on;
        gzip_proxied any;
        gzip_types application/javascript application/x-javascript text/css text/javascript;
        gzip_comp_level 5;
        gzip_buffers 16 8k;
        gzip_min_length 256;
 
        location /_next/static/ {
                alias /var/www/name_of_app/.next/static/;
                expires 365d;
                access_log off;
        }
 
        location / {
                proxy_pass http://127.0.0.1:3000; #change ports for second app i.e. 3001,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;
        }
}

Создаем симлинки для файла конфигурации

sudo ln -s /etc/nginx/sites-available/name_of_app /etc/nginx/sites-enabled/name_of_app

Проверяем конфиг NGINX на наличие ошибок

nginx -t

Удаляем стандартный конфиг NGINX

cd /etc/nginx/sites-available
rm default
cd /etc/nginx/sites-enabled
rm default

Перезагружаем NGINX

systemctl restart nginx

Переходим в корневую директорию сайта

cd /var/www/name_of_app

Запускаем приложение с помощью pm2

pm2 start npm --name name_of_app -- start

или таким образом, если нужно запустить на другом порту:

Запускаем приложение с помощью pm2

pm2 start npm --name nest -- start -- --port=3001

Сохраняем pm2

pm2 save

Устанавливаем перезапуск pm2 при ребуте

pm2 startup

Создаем SSL сертификат

sudo certbot --nginx -d domainname.com -d www.domainname.com