developmen
March 31, 2020

Выгрузка и запуск NuxtJS приложения на VPS

Давайте возьмём какой-нибудь VPS, установим на него NodeJS и попробуем запустить небольшое NuxtJS приложение.

Создание NuxtJS приложения

Чтобы не тратить время на разработку, а сразу перейти к настройке VPS, воспользуемся командой create-nuxt-app, которая автоматически генерирует базовую структуру NuxtJS. Для этого открываем Терминал и запускаем следующую команду:

npx create-nuxt-app nuxt-to-vps

В том случае если у вас недоступен npx, проверьте актуальность установленных версий NodeJS и NPM.

В самом начале нужно будет задать ряд предустановок будущего приложения: название, описание, фреймворк, модули. После этого начнётся процесс установки, который может занять продолжительное время (2-5 минут).

Предустановки приложения

После того как установка будет завершена, необходимо перейти в папку проекта и открыть файл nuxt.config.js. Чтобы в дальнейшем наш сайт открывался через ip удаленного сервера, в данном файле необходимо изменить хост. Для этого в самом верху, внутри module.exports, прописываем следующие параметры:

server: {
 host: '0.0.0.0'
}

Сохраняем изменения и приступаем к выгрузке проекта на GitHub.

Изменяем хост в nuxt.config.js

Создание GitHub репозитория

Чтобы в дальнейшем было проще выгружать обновления на сервер, мы воспользуемся GitHub. Авторизуемся и создаём новый репозиторий.

Теперь необходимо снова перейти в папку с проектом, открыть Терминал и поочередно выполнить ряд команд. Для начала нужно инициализировать локальный репозиторий с помощью git init.

Затем получить доступ к удаленному GitHub репозиторию и запушить туда все файлы нашего проекта (у вас будет другая ссылка):

git remote add nuxt https://github.com/Selexio/nuxt-to-vps.git
git push nuxt master
GitHub репозиторий проекта

Создание VPS сервера

В качестве тестового сервера был выбран и приобретен VPS от компании ServerSpace. В качестве операционной системы была выбрана Ubuntu 18.04, поэтому все дальнейшие действия будут происходить в ней.

VPS ServerSpace

Подключение будем осуществлять при помощи SSH ключа, поэтому предварительно необходимо его создать. Для этого вновь воспользуемся Терминалом и командой
ssh-keygen.

Открываем Терминал и вводим туда следующую команду:

ssh-keygen -t rsa

После чего несколько раз нажимаем Enter. Когда ключ будет создан, необходимо его получить. Для этого вводим команду:

cat ~/.ssh/id_rsa.pub

После этого в Терминал выведется ваш SSH ключ, который необходимо скопировать и указать при создании сервера. После того как сервер будет создан, вы сможете подключиться к нему по ip который будет указан в Панели управления VPS.

Панель управления VPS

Подключение и создание пользователя

Панель управления нам больше не понадобится. Открываем Терминал и подключаемся к нашему серверу:

ssh [email protected]

При первом подключении, возможно, придётся подтвердить операцию. Для этого просто вводим yes и жмём Enter.

Подключение к серверу по SSH

Первое, что необходимо сделать после подключения, это получить и установить все обновления Ubuntu. Для этого воспользуемся стандартными apt-get update и apt-get upgrade.

Прежде чем переходить к установке NodeJS нужно добавить нового пользователя с правами администратора. Сделать это можно при помощи команды adduser test.

Здесь test — это username нового пользователя, у вас он может быть другой. Пользователю также необходимо указать пароль (повторить два раза) и опционально заполнить данные о нём.

Чтобы присвоить нашему новому пользователю права sudo, нужно ввести команду
usermod -aG sudo test. Проверить присвоились ли эти права можно командой id test.

Когда пользователь создан, авторизуемся под ним при помощи команды su - test.

Установка NodeJS

Из-под пользователя test начинаем установку NodeJS. Есть несколько способов как это сделать, мы воспользуемся apt install и NodeSource.

На продакшене лучше предварительно уточнить локальные версии NodeJS и NPM на которых разрабатывался проект, и устанавливать именно их. Это поможет исключить возможные конфликты.

Для начала нам необходимо получить NodeJS, для этого в Терминале прописываем:

curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -

На этом этапе понадобится ввести заданный ранее пароль пользователя test. После этого останется только выполнить команду sudo apt install nodejs. Проверить версии установленных NodeJS и NPM можно при помощи команд: nodejs -v и npm -v.

Выгрузка и запуск проекта

Перед тем как выгружать файлы с GitHub на сервер, убедитесь, что вы находитесь в папке своего пользователя — /home/test/. Затем, используя git clone, скопируйте все файлы с удаленного репозитория:

git clone -b master https://github.com/Selexio/nuxt-to-vps.git

На этом этапе будет необходимо ввести логин и пароль от своего аккаунта на GitHub. Для того чтобы убедиться что все файлы скопировались, можно перейти в папку проекта cd nuxt-to-vps и ввести команду ls.

Папки и файлы на VPS

Если всё хорошо, можно начинать собирать проект. Для начала нужно установить все зависимости из package.json, для этого вводим команду npm install. Дожидаемся установки всех необходимых пакетов и билдим проект командой npm run build.

Выполнять команду npm run build необходимо каждый раз после внесения каких-либо изменений в проект, однако в дальнейшем это можно автоматизировать.

Когда проект будет собран, останется только запустить его командой npm run start. После этого приложение будет доступно по ip адресу вашего VPS на порту 3000 (в зависимости от параметров). В моём случае это http://188.227.84.85:3000/.

Проект на VPS

Однако, если сейчас начать выполнять другие операции в Терминале или закрыть его, приложение станет недоступно, что крайне неудобно. Для решения данной проблемы можно воспользоваться менеджером процессов PM2.

Установка и настройка PM2

Чтобы решить проблему прерываемости нашего приложения, воспользуемся менеджером процессов PM2. Но для начала необходимо его установить:

sudo npm i pm2 -g

После установки его необходимо запустить командой pm2 startup и можно добавлять новые процессы:

pm2 start npm --name 'nuxt' -- run start

После этих операций ваше приложение останется доступным даже при отключении от сервера.

selex.io


Ресурсы