Пример деплоя Nuxt-проекта на хостинге Джино

Рассмотрим пример деплоя на Джино.Хостинг проекта на популярном фреймворке Nuxt (opens new window). На компьютере инициализируйте новый проект на Nuxt по имени my-app:

npx nuxi@latest init my-app
cd my-app
npm install

Проверьте, что всё установилось правильно и работает:

npm run dev

Зайдите на 'http://localhost:3000', должна появиться стандартная страница "Welcome to Nuxt!". Если всё хорошо, переходите к сборке для деплоя на хостинг:

npm run build

Эта команда создаст папку .output, содержимое которой надо загрузить на сервер. Для этого в контрольной панели Джино.Хостинга (opens new window) создайте новый контейнер. Можно использовать готовый контейнер, но мы рекомендуем размещать разные сайты в разных контейнерах в целях безопасности.

Примечание

Если хостинг-контейнер создан в деморежиме, для подключения услуг пополните баланс.

Далее зайдите в хостинг-контейнер и в пункте «Технологии» подключите услугу «Поддержка веб-приложений» (в деморежиме эта услуга подключена по умолчанию). Также в пункте «Другие услуги» подключите поддержку SSH. Задайте пароль для SSH в разделе УправлениеНастройки SSH, запомните его, а также сохраните логин, он нам понадобится. Здесь же нажмите «Добавить разрешённый IP», введите диапазон IP и добавьте значение.

Вы можете зарегистрировать (opens new window) новое доменное имя или привязать (opens new window) уже существующее. Для этого зайдите в нужный хостинг-контейнер и перейдите в раздел ДоменыУправление доменами.

Для подключения SSL-сертификата выберите доменное имя в разделе Домены и перейдите на вкладку «SSL». Здесь вы можете выбрать бесплатный сертификат или любой другой, купленный в Джино.Магазине (opens new window). Включите редирект на HTTPS.

Обратите внимание

В деморежиме доступен только технический адрес. Для привязки собственного домена нужно переключиться в активный режим — пополнить баланс.

Зайдите в раздел УправлениеНастройки веб-сервера. Измените папку для статики — нажмите на неё и переименуйте в public. Задайте интерпретатор Node.js для нужного домена (или техдомена). Выберите такую же версию Node.js, какая использовалась на вашем компьютере при сборке проекта.

Проверить версию на компьютере можно командой node -v.

Далее вернитесь к проекту на компьютере, скопируйте файлы из папки .output в директорию домена (/domains/имя_домена) на хостинге по FTP или, если подключили поддержку SSH, из консоли по SCP:

scp -r .output/* j1234567@example.com:~/domains/example.com/

Примечание

Здесь и далее в этой инструкции мы будем использовать логин, который мы получили на странице настроек SSH — j1234567, и домен example.com.

Перейдите в раздел УправлениеФайловый менеджер в директорию домена (в нашем случае это domains/example.com). В ней мы должны увидеть, среди прочих, следующие папки и файлы:

index.html
nitro.json
public
public_html
server

Вы можете сразу удалить index.html и public_html, они вам не понадобятся.

В этой же папке создайте entrypoint-файл для приложения — app.js, откройте его для редактирования и вставьте такую строку:

import('./server/index.mjs')

Зайдите на сайт и проверьте: если вы всё сделали правильно, то на выбранном домене вы увидите такую же стандартную страницу "Welcome to Nuxt!", какая была локально.

Теперь можно вернуться к проекту на компьютере и попробовать что-то изменить. Например, отредактировать app.vue: заменить <NuxtWelcome/> на строку "Привет, мир!".

Соберите обновлённую версию (npm run build) и снова загрузите содержимое папки .output на сервер через FTP или SCP.

Перейдите в раздел УправлениеНастройки веб-сервера и перезагрузите его. Сайт должен обновиться.

При использовании SSH для удобства можно добавить команду деплоя и перезагрузки веб-сервера в файл package.json:

{
  "name": "nuxt-app",
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare",
    "deploy": "scp -r .output/* j1234567@example.com:~/domains/example.com/ && ssh j1234567@example.com \"mkdir -p ~/domains/example.com/tmp && touch ~/domains/example.com/tmp/restart.txt\""
  },
  "devDependencies": {
    "@types/node": "^18",
    "nuxt": "^3.5.0"
  }
}

Теперь для обновления сайта достаточно только запускать:

npm run deploy
```Если у вас динамический IP, то может потребоваться обновлять его в списке разрешённых в разделе <j-path>Управление / Настройки SSH</j-path> перед каждым деплоем.