Доброго времени суток, хабровчане!
В данной статье я рассмотрю вопрос развертывания с нуля Nuxt.js-проекта (либо любого другого проекта на Node.js) на VDS-сервере с использованием веб-сервера Apahce2, Node.js, менеджера процессов pm2 с полным циклом установки всех компонентов.
Установка будет производится на чистом VDS-сервере, не имеющем каких-либо настроек.
Содержание статьи
Шаг 2. Добавление репозитория Apache2 на сервер и установка веб-сервера
Шаг 3. Установка менеджера версий Node.js (nvm) и самого Node.js
Шаг 5. Запуск Node.js-приложения (в нашем случае - Nuxt.js-приложения)
Шаг 1. Подключаемся по SSH к VDS
Для подключения к VDS-серверу по SSH более не требуется скачивать и устанавливать какие-либо дополнительные программы, так как в Windows PowerShell на ОС Windows 10 последних версий уже встроен клиент OpenSSH.
Я же буду использовать приложение Windows Terminal, скачать которое можно в Microsoft Store (разработчик Windows Terminal - сами Microsoft).
В данной инструкции в качестве операционной системы на сервере мы будем использовать Ubuntu Server 20.04
Итак, подключаемся к серверу при помощи следующей команды:
ssh root@Ваш_IP_сервера
Вместо root вы должны указать своего пользователя, который у Вас был выдан при создании сервера.
Вместо IP-адреса также можно использовать и FQDN-адрес сервера, если вы уже прописали DNS A-запись на Вашем домене со значением Вашего IP-адреса сервера.
![Команда подключения к серверу по SSH Команда подключения к серверу по SSH](https://habrastorage.org/getpro/habr/upload_files/ce8/e62/f22/ce8e62f220cb691dae125d2e632b6b23.png)
При успешном логине Вы увидите уже терминал (консоль) сервера:
![Терминал Ubuntu Server Терминал Ubuntu Server](https://habrastorage.org/getpro/habr/upload_files/cb9/f70/a23/cb9f70a23863f826cf5a4a847a26c9d3.png)
Как видим, мы подключены к удаленному серверу.
Шаг 2. Добавление репозитория Apache2 на сервер и установка веб-сервера
В данной инструкции мы будем устанавливать веб-сервер Apache2 из официального репозитория, так как в репозитории Ubuntu не всегда последняя версия веб-сервера Apache2.
Для начала установим необходимые пакеты командой:
apt install software-properties-common
![Команда установки необходимого пакета Команда установки необходимого пакета](https://habrastorage.org/getpro/habr/upload_files/c7d/470/a56/c7d470a56d2c0b181de999da8225217a.png)
Если данный пакет уже установлен, то вы увидите следующее:
![Необходимый пакет уже установлен Необходимый пакет уже установлен](https://habrastorage.org/getpro/habr/upload_files/da8/816/23e/da881623e7013696232147491751b067.png)
После установки необходимых пакетов добавляем официальный репозиторий Apache2 следующей командой:
apt-add-repository ppa:ondrej/apache2
При добавлении репозитория, в терминале появится вопрос, на который необходимо нажать клавишу Enter:
![Подтверждение добавления репозитория Подтверждение добавления репозитория](https://habrastorage.org/getpro/habr/upload_files/6d8/6fa/3f3/6d86fa3f3df6e0c55e6b521b04626747.png)
После добавления репозитория, производим установку самого веб-сервера Apache2:
apt install apache2
В терминале появится вопрос о подтверждении установки веб-сервера Apache2. Если согласны с установкой - смело нажимайте клавишу Enter.
![](https://habrastorage.org/getpro/habr/upload_files/d05/fa6/353/d05fa6353545e0d4968f4fa6d154e449.png)
Готово!
Теперь можно перейти по IP-адресу, либо по FQDN-адресу вашего сервера и убедиться, что веб-сервер Apache2 успешно установлен.
Примечание. Порты 80 и 443 на вашей виртуальной машине должны быть открыты. Если есть управляемый файерволл в панели управления вашего сервера на хостинге - обязательно проверьте!
![Успешная установка Apache2 Успешная установка Apache2](https://habrastorage.org/getpro/habr/upload_files/bd0/bc6/51f/bd0bc651f8fe7aaee3f46701f4860015.png)
Шаг 3. Установка менеджера версий Node.js (nvm) и самого Node.js
Для установки и более удобного дальнейшего контроля версий NodeJS мы установки менеджер версии NodeJS. Пакет называется nvm.
Для этого перейдем в официальный репозиторий на GitHub.
И перейдем в раздел Installing and Updating и выберем один их способов установки скрипта. Я выберу второй через утилиту wget:
![Раздел установки и обновления скрипта NVM в официальном репозитории на GitHub Раздел установки и обновления скрипта NVM в официальном репозитории на GitHub](https://habrastorage.org/getpro/habr/upload_files/d21/5e1/98f/d215e198f7cab83feadb054e8619b2df.png)
Копируем команду и вставляем ее в терминал сервера:
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash
![Команда установки NVM в терминале Команда установки NVM в терминале](https://habrastorage.org/getpro/habr/upload_files/a0e/cf2/b24/a0ecf2b24cd0c269139564854a5a7811.png)
И жмем клавишу Enter
После установки перезагружаем сервер при помощи кнопки перезагрузки в панели управления сервером, либо через команду в терминале init 6
Примечание. Вместо перезапуска сервера можно переподключиться к нему по SSH так, как указано в шаге 1.
![Автоматическое отключение от сервера после применения команды перезагрузки Автоматическое отключение от сервера после применения команды перезагрузки](https://habrastorage.org/getpro/habr/upload_files/199/bac/b06/199bacb06a7e33c4375b03b4c648bea3.png)
После перезагрузки снова подключаемся к серверу согласно шагу 1.
Запускаем команду nvm для того, чтобы посмотреть и ознакомится со списком команд скрипта. Находим команду установки NodeJS в версии LTS:
![Команда установки NodeJS LTS-версии Команда установки NodeJS LTS-версии](https://habrastorage.org/getpro/habr/upload_files/246/432/eab/246432eab94393bf4d7c2923df9fada0.png)
Пакет NVM поможет вам "в 2 клика" поддерживать всегда актуальную версию Node.js
Вводим эту команду в терминал и жмем клавишу Enter:
nvm install --lts
![Успешная установка NodeJS через менеджер NVM Успешная установка NodeJS через менеджер NVM](https://habrastorage.org/getpro/habr/upload_files/25d/cfe/f7e/25dcfef7e60fd0834cb3386ae9f9f442.png)
Проверяем установленную версию Node.js слудующей командой:
node -v
И получаем сообщение об установленной версии Node.js:
![Установленная версия NodeJS Установленная версия NodeJS](https://habrastorage.org/getpro/habr/upload_files/6b0/aec/360/6b0aec36041a44fff5937f1490dccb68.png)
Шаг 4. Установка менеджера процессов pm2
Для того, чтобы управлять процессами и приложениями, запущенными в среде Node.js, а также автоматического их запуска после перезагрузки сервера, нам понадобится менеджер процессов Node.js, который мы установим глобально в систему через пакетный менеджер npm. Пакет называется pm2:
npm install -g pm2
При успешной установке мы увидим следующее:
![Успешная установка пакета pm2 Успешная установка пакета pm2](https://habrastorage.org/getpro/habr/upload_files/fcd/3dd/1f4/fcd3dd1f4e861e0e5ca2ce1ec86a0943.png)
При помощи команды pm2 -h
можно посмотреть список доступных команд
Шаг 5. Запуск Node.js-приложения (в нашем случае - Nuxt.js-приложения)
Я создам новое приложение на Nuxt.js для демонстрации работы. Можно запустить таким же образом любое Node.js-приложение, как новое, только что созданное, так и уже готовое приложение.
Примечание. Установку Nuxt.js описывать не буду, так как приложение новое и установка стандартная. Она написана на официальном сайте проекта, у которого есть русская версия документации
Nuxt.js проект по-умолчанию запускается в двух режимах:
В режиме разработки -
npm run dev
В режиме продакшена -
npm run start
Есть еще режим static, который запускается через команду npm run generate
. Но я его рассматривать не буду, так как он не используется для постоянного запуска приложения через Node.js
Я же не буду сразу запускать это приложение одной из этих команд, а сразу воспользуюсь менеджером pm2
Для этого перейдем в папку с проектом и запустим команду инициализации менеджера pm2:
pm2 init
![pm2 сообщает об успешной генерации файла экосистемы pm2 сообщает об успешной генерации файла экосистемы](https://habrastorage.org/getpro/habr/upload_files/db3/e5e/019/db3e5e01910033f9ee8bd29aa549df2c.png)
Открываем файл ecosystem.config.js
прямо в терминале через редактор nano командой и удаляем все содержимое:
nano ecosystem.config.js
![Пустой файл ecosystem.config.js с удаленными стандартными значениями Пустой файл ecosystem.config.js с удаленными стандартными значениями](https://habrastorage.org/getpro/habr/upload_files/78a/c08/209/78ac082096671a6007d44ebd8f11b06e.png)
Вставляем туда следующее содержимое и сохраняем комбинацией клавиш Ctrl+O, затем жмем Enter:
module.exports = {
apps : [
{
name: "nuxt-dev",
script: "npm",
args: "run dev"
},
{
name: "nuxt-prod",
script: "npm",
args: "run start"
}
]
}
Для запуска dev-версии используем команду следующую команду:
pm2 start ecosystem.config.js --only nuxt-dev
Для запуска prod-версии:
npm run build && pm2 start ecosystem.config.js --only nuxt-prod
Я, для примера, запущу Dev-версию:
![Запущена dev-версия NuxtJS-приложения через pm2 Запущена dev-версия NuxtJS-приложения через pm2](https://habrastorage.org/getpro/habr/upload_files/6bb/dd4/cb8/6bbdd4cb82b3c475c8e649cf73cf0417.png)
Для последующей остановки/запуска приложения не нужно будет заходить в папку с проектом и запускать командой выше. Достаточно будет ввести название приложения из монитора pm2:
pm2 start nuxt-dev
для запуска, либо
pm2 stop nuxt-dev
для остановки приложения.
Для просмотра всех запущенных NodeJS-приложений посредством pm2 небходимо ввести в терминал следующую команду:
pm2 status
![Статус-панель pm2 Статус-панель pm2](https://habrastorage.org/getpro/habr/upload_files/865/3fd/11c/8653fd11c6d186658d1eafe66f42e3bc.png)
Для просмотра монитора процессов:
pm2 monit
![Моинтор pm2 Моинтор pm2](https://habrastorage.org/getpro/habr/upload_files/4c4/53c/a76/4c453ca76a724d97b1a3c9a5ba331b54.png)
Подключаем автоматический запуск приложений через pm2 после перезагрузки сервера:
pm2 startup
и сохраняем изменения:
pm2 save
![Запуск автозагрузки и сохранение параметров Запуск автозагрузки и сохранение параметров](https://habrastorage.org/getpro/habr/upload_files/69d/a97/238/69da97238d482e948e3bd79a7b483d18.png)
[Дополнительно] Графический интерфейс pm2 вне терминала
Для запуска веб-интерфейса управления процессами pm2 необходимо зарегистрироваться на сайте pm2.io и создать Bucket.
Будем считать, что есть существующий аккаунт и Bucket (инструкцию можно почитать на оф. сайте pm2).
Вводим команду для подключения к веб-интерфейсу:
pm2 plus
На первом этапе pm2 спросит, есть ли у Вас аккаунт pm2.io (в нашем случае есть и мы вводим букву y
и жмем клавишу Enter
![Есть ли аккаунт pm2.io? Есть ли аккаунт pm2.io?](https://habrastorage.org/getpro/habr/upload_files/817/06d/9fc/81706d9fc280068c6db2e974c2b8c701.png)
Вводим ваш email и пароль от аккаунта.
Если все введено верно, то pm2 попросит Вас выбрать, к какому Bucket подключиться - выбирайте ранее созданный. У меня это TestBucket
![Выбор Bucket для подключения приложения к веб-интерфейсу pm2 Выбор Bucket для подключения приложения к веб-интерфейсу pm2](https://habrastorage.org/getpro/habr/upload_files/2fe/b95/063/2feb950635199b3bd9b1d4b9f2a85c29.png)
При успешном подключении к Bucket в веб-интерфейсе pm2 появится Ваше приложение(процесс). Там вы сможете посмотреть статистику, сбросить монитор и перезагрузить приложение:
![Веб-интерфейс pm2 Веб-интерфейс pm2](https://habrastorage.org/getpro/habr/upload_files/072/61c/252/07261c2529b74393417cf843f93afdeb.png)
Далее нам необходимо повторно добавить в автозагрузку pm2 и сохранить изменения:
pm2 unstartup
pm2 startup
pm2 save
![Перезапуск автозагрузки pm2 и сохранение параметров Перезапуск автозагрузки pm2 и сохранение параметров](https://habrastorage.org/getpro/habr/upload_files/57b/5be/c8b/57b5bec8b8cd654ca2f7632402bf22ea.png)
Шаг 6. Проксирование Node.js-приложения через Apache2 Proxy
У нас уже запущено приложение на Nuxt.js на порту 3000 (по-умолчанию)
Теперь нам необходимо проксировать его на определенный адрес и стандартный порт 80 (для HTTP).
Для этого установим и включим модуль Apache2 Proxy:
a2enmod proxy_http
И перезагрузим веб-сервер командой:
systemctl restart apache2
![Включение модуля Apache2 Proxy HTTP Включение модуля Apache2 Proxy HTTP](https://habrastorage.org/getpro/habr/upload_files/764/bbc/1c4/764bbc1c41d399c42bd418a82346b288.png)
Переходим в папку с виртуальными хостами Apache2 командой:
cd /etc/apache2/sites-available
и дублируем дефолтный файл конфигурации виртуального хоста Apache2:
cp 000-default.conf ваш_домен.conf
Открываем файл ваш_домен.conf с помощью редактора nano. Изменяем на Ваши следующие значения:
ServerName: необходимо раскомментировать и значение example.com поменять на ваше доменное имя
ServerAdmin: webmaster@localhost меняем на Ваш email
DocumentRoot: можно закомментировать значком #
![Пример оформления файла конфигурации виртуального хоста Пример оформления файла конфигурации виртуального хоста](https://habrastorage.org/getpro/habr/upload_files/c32/3b9/292/c323b92921f90a277c2d0f9ea4b02a1b.png)
Затем, чтобы проксировать наше приложение на этот адрес, нам необходимо добавить следующие строки:
ProxyPreserveHost On
ProxyPass / http://127.0.0.1:3000/
ProxyPassReverse / http://127.0.0.1:3000/
Где :3000 - Ваш порт приложения
Сохраняем изменения комбинацией клавиш Ctrl+O и жмем Enter. Выходим из редактора комбинацией Ctrl+Z
![Проксирование 3000 порта Проксирование 3000 порта](https://habrastorage.org/getpro/habr/upload_files/a38/226/94d/a3822694d7cb5dd645c2ac1fa703429a.png)
Теперь можно включить виртуальный хост и перезагрузить веб-сервер*:
a2ensite ваш_домен
systemctl reload apache2
* В команде a2ensite ваш_домен не обязательно указывать расширение конфигурационного файла
Смотрим результат
![](https://habrastorage.org/getpro/habr/upload_files/7a6/7ee/709/7a67ee70989b4c9f580506cbf011d0ed.png)
Как видим - приложение успешно открывается на необходимом нам адресе и стандартном порту веб-сервера Apache2
Шаг 7. Тестирование работы pm2
Теперь необходимо проверить, срабатывает ли автоматический запуск приложений менеджером pm2 после перезагрузки сервера.
Для этого в терминале пропишем команду init 6
, либо перезагрузим сервер в панели управления хостингом.
Если Вы все сделали правильно и согласно инструкции - приложение на Node.js автоматически запустится на вашем адресе в течение минуты после запуска VDS-сервера.
Заключение
В данном материале я рассмотрел подробно установку веб-сервера Apache2, установку менеджера версий Node.js - пакета NVM и установку самого Node.js через этот менеджер, запуск Node.js-приложения на примере приложения на Vue.js-фреймворке - Nuxt.js, автоматический запуск этого приложения после перезагрузки сервера с помощью менеджера процессов pm2 и проксирование приложения на определенный адрес.
Старался объединить несколько инструкций в одну на своем личном опыте, когда еще только начинал работать с этими инструментами.
Возможно, более удобный (или правильный?) способ запуска будет через Docker и NGINX. Но в данной статье я показал базовый пример запуска.
Возможно, кому-то статья будет полезной.
Благодарю за внимание!
debagger
В статье, на мой взгляд, не хватает самого главного — как организовать процесс деплоя приложения. Одно дело сгенерировать болванку, а совсем другое — сделать удобный процесс выкатки новых версий в продакшен. И тут есть множество различных вариантов, интересно было бы посмотреть ваш подход к данной задаче.
IceSlam Автор
Была идея реализации через bash-скрипт. Точнее даже не идея, а все же реализация. Я подобное сделал на шаред-хостинге Node.js. Запускаю bash-скрипт, он сам удаляет ненужное, проверяет наличие папок, клонирует из гита последнюю версию репо, все пакеты устанавливает и перезапускает проект. Скрипт довольно простенький
Возможно, в ближайшее время, распишу подобный метод (P.S. Он автоматически не сравнивает версию на сервере и в гите). А также реализацию с Docker
Если, конечно же, кому-нибудь это будет интересно)
debagger
Интересно конечно, пишите!
Zhanadil1509
ждемс
AliumAstrum
pm2 умеет деплоить, нужно лишь настроить как в документации
Но сразу оговорка — делает это через репозиторий, что также можно было включить в статью.
IceSlam Автор
Спасибо за наводно, буду иметь ввиду
Просто я практически не работаю с pm2, я вместо VDS, последнее время, использую shared-хостинг Node.js, там все автоматизировано
И я сейчас не про всякие там Netlify, Hostman и т.д.