Развертывание приложения Next.js на сервере DigitalOcean

Введение

Next.js — популярный фреймворк React для простого создания приложений React с серверным рендерингом. В этом руководстве мы рассмотрим развертывание приложения Next.js на сервере DigitalOcean с использованием Nginx в качестве обратного прокси. Это пошаговое руководство предполагает наличие у вас готового к развертыванию приложения Next.js и учетной записи DigitalOcean.

Предпосылки

• Приложение Next.js
• Аккаунт DigitalOcean
• Зарегистрированное доменное имя (необязательно, но рекомендуется)
• Локальная установка Node.js и npm или yarn.

Шаг 1: Создайте объект DigitalOcean Droplet.

Мы разместим наше приложение Next.js на виртуальном сервере DigitalOcean Droplet, который настроим самостоятельно. Давайте создадим этот сервер прямо сейчас.

• Войдите в свою учетную запись DigitalOcean и перейдите в раздел Droplets.
• Нажмите “Создать DROPLET”.
• Выберите образ Ubuntu (желательно последнюю версию LTS).
• Выберите желаемый размер капель в соответствии с вашими потребностями и бюджетом.
• Для повышения эффективности выберите ближайший к вашей целевой аудитории район расположения центра обработки данных.
• Добавьте свои SSH-ключи для безопасного доступа к вашему виртуальному серверу.
• Выберите имя хоста для вашего виртуального сервера, это может быть ваше доменное имя или любое другое предпочитаемое имя.
• Нажмите “Создать DROPLET”.
• Создайте каплю

После создания Droplet запишите присвоенный ему IP-адрес.

Шаг 2: Запустите Droplet

Теперь, когда мы создали виртуальный сервер (дроплет), нам нужно подготовить его к приему входящих соединений и перенаправлению этих соединений в наше приложение Next.js.

Подключитесь к своему виртуальному серверу по SSH, используя IP-адрес и SSH-ключ, указанные вами при создании сервера:

ssh root@<DROPLET_IP>

Обновление и модернизация пакетов в Droplet:

sudo apt update && sudo apt upgrade -y

Установите необходимые пакеты:

sudo apt install -y nodejs npm nginx

Шаг 3: Настройка Nginx

Nginx — это инструмент, который обрабатывает всю маршрутизацию для нашего приложения Next.js. Создайте новый конфигурационный файл Nginx для вашего приложения Next.js:

sudo nano /etc/nginx/sites-available/nextjs

Вставьте следующую конфигурацию, заменив server_name на доменное имя или IP-адрес вашего виртуального сервера:

server {
listen 80;
server_name YOUR_IP_ADDRESS;
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;
}
}

Сохраните и закройте файл. Создайте символическую ссылку для активации конфигурации:

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

Проверьте конфигурацию Nginx на наличие синтаксических ошибок:

sudo nginx -t

Если проверка конфигурации прошла успешно, перезапустите Nginx:

sudo service nginx restart

Шаг 4: Разверните приложение Next.js

Далее мы интегрируем приложение Next.js в Droplet. Для этого существует множество вариантов.

1. Создайте SSH-ключ на сервере, подключите его к своей учетной записи GitHub и клонируйте свой репозиторий.
2. Создайте приложение Next.js в Droplet.

В этом уроке мы создадим новое приложение Next.js на нашем Droplet.

Подключитесь к своему виртуальному серверу по SSH:

ssh root@<DROPLET_IP>

Создайте новое приложение Next.js и следуйте инструкциям:

cd /var/www
npx create-next-app nextjs

Перейдите в каталог приложения Next.js:

cd nextjs

Установите зависимости программы:

npm install

Соберите приложение Next.js:

npm run build

Наконец, запустите приложение Next.js:

npm start

Ваше приложение Next.js теперь развернуто и доступно по доменному имени или IP-адресу вашего сервера. Чтобы приложение работало в фоновом режиме и автоматически перезапускалось при сбое или перезагрузке сервера, вам потребуется использовать менеджер процессов, например PM2.

Шаг 5: Запустите PM2 Process Manager

Мы запустили npm из нашего Droplet. Иногда эта команда может перестать работать по таким причинам, как перезапуск сервера или необходимость установки обновления. Мы будем использовать инструмент PM2, чтобы убедиться, что наше приложение Next.js всегда работает. PM2 перезапустится, даже если приложение Next.js завершится с ошибкой.

Чтобы установить PM2 глобально на вашем сервере:

sudo npm install -g pm2

Перейдите в каталог приложения Next.js (если он еще не там):

cd /var/www/nextjs

Запустите приложение Next.js с помощью PM2:

pm2 start npm --name "nextjs" -- start

Эта команда запускает приложение Next.js с именем “nextjs” с помощью команды npm start. PM2 автоматически перезапустит приложение, если сервер выйдет из строя или перезапустится.

Чтобы обеспечить запуск PM2 при загрузке системы, выполните следующую команду:

pm2 startup

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

Сохраните текущие процессы PM2:

pm2 save

Результат

Теперь вы успешно запустили приложение Next.js на сервере DigitalOcean, используя Nginx в качестве обратного прокси и PM2 в качестве менеджера процессов. Ваше приложение должно быть доступно по доменному имени или IP-адресу вашего сервера.

Если вы используете доменное имя, не забудьте настроить параметры DNS. Направьте запись A вашего домена на IP-адрес вашего сервера, чтобы вы могли получить доступ к приложению, используя доменное имя.

Для повышения безопасности и улучшения SEO-показателей рассмотрите возможность установки SSL-сертификатов с использованием Let's Encrypt и внедрения HTTPS-соединений. Кроме того, вы можете изучить оптимизацию вашего приложения Next.js с помощью кэширования и других улучшений производительности.