# Пример деплоя 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, то может потребоваться обновлять его в списке разрешённых в разделе УправлениеНастройки SSH перед каждым деплоем.