ServBay

Русский

English
简体中文
繁體中文
Español
العربية
Português
日本語
Deutsch
Français
Tiếng Việt
Türkçe
Italiano

Русский

English
简体中文
繁體中文
Español
العربية
Português
日本語
Deutsch
Français
Tiếng Việt
Türkçe
Italiano

Appearance

Создание и запуск проекта Nuxt.js с помощью ServBay ​

Что такое Nuxt.js? ​

Nuxt.js — это open-source фреймворк, построенный на базе популярного Vue.js, специально предназначенный для создания современных и высокопроизводительных веб-приложений. Nuxt.js абстрагирует множество сложных настроек, позволяя разработчикам сосредоточиться на бизнес-логике. Фреймворк особенно эффективен для создания приложений с сервер-сайд рендерингом (SSR), но также обладает мощными возможностями для статической генерации сайтов (SSG), что делает его идеальным выбором для построения насыщенных контентом и SEO-дружественных сайтов и приложений.

Основные возможности и преимущества Nuxt.js ​

  • Сервер-сайд рендеринг (SSR): Рендеринг Vue-страниц на сервере, что ускоряет первую загрузку, улучшает пользовательский опыт и серьезно повышает SEO за счет лучшей индексации контента.
  • Статическая генерация сайтов (SSG): Генерация полностью статических HTML-файлов на этапе сборки. Такой подход обеспечивает максимальную производительность и простоту деплоя — отлично подходит для сайтов с редко меняющимся контентом, например, блогов или документации.
  • Автоматическое разделение кода: Nuxt.js автоматически делит JavaScript-код по страницам/роутам, благодаря чему при переходе на страницу загружается только необходимый код, что значительно ускоряет приложение.
  • Роутинг на основе файловой структуры: Просто создайте файл .vue в папке pages, и Nuxt автоматически добавит роут — никакой ручной настройки маршрутизации.
  • Модульность: Богатая экосистема модулей для простой интеграции новых функций и подключения сторонних сервисов (например, Axios, поддержка PWA, интеграция с CMS и др.).
  • Принцип «Конвенция важнее конфигурации»: Строгое следование структуре каталогов и соглашениям по именованию позволяет минимизировать количество настроек.
  • Оптимизация процесса разработки: Включает hot module replacement (HMR), подробные отчеты об ошибках и другие инструменты для повышения продуктивности.

Благодаря этим возможностям Nuxt.js существенно облегчает создание сложных, высокопроизводительных и SEO-оптимизированных веб-приложений.

Настройка и запуск проекта Nuxt.js в ServBay ​

В этом руководстве вы узнаете, как использовать все преимущества локальной среды разработки ServBay — в частности, пакеты Node.js и мощную систему управления сайтами — для создания, настройки и запуска проекта на Nuxt.js. Мы рассмотрим настройку разработки (с обратным прокси) и production-режим (через подачу статических файлов).

Предварительные требования ​

Перед началом работы убедитесь, что выполнены следующие условия:

  1. Установлено приложение ServBay.
  2. В ServBay установлен и активирован Node.js. Проверьте наличие или установите нужный пакет во вкладке «Пакеты» в панели управления ServBay.
  3. У вас есть базовое понимание Node.js, npm (или Yarn/pnpm) и работы с терминалом.
  4. (Опционально) Установлен современный редактор кода, например, VS Code.

Создание проекта Nuxt.js ​

Для быстрого старта проекта на Nuxt.js мы воспользуемся CLI-сценарием create-nuxt-app.

  1. Откройте терминал и перейдите в корневую папку сайтов ServBay

    Корневая папка сайтов по умолчанию — /Applications/ServBay/www. Рекомендуется хранить проекты для локальной разработки именно там. Откройте терминал и выполните:

    bash
    cd /Applications/ServBay/www

  2. Инициализируйте новый проект Nuxt.js

    С помощью команды npx create-nuxt-app создайте проект с именем servbay-nuxt-app. Утилита npx входит в состав npm 5.2+ и позволяет запускать cli-пакеты без глобальной установки.

    bash
    npx create-nuxt-app servbay-nuxt-app

    Следуйте интерактивным подсказкам в терминале — выберите параметры по своему усмотрению. Примерный список вопросов:

    bash
    ? Project name: servbay-nuxt-app
? Programming language: JavaScript
? Package manager: Npm         # Выбор пакетного менеджера (желательно Npm или Yarn)
? UI framework: None          # UI-фреймворк – по необходимости
? Nuxt.js modules: Axios      # Модули Nuxt.js – на ваш выбор
? Linting tools: ESLint       # Инструменты для проверки кода – по желанию
? Testing framework: None     # Фреймворк для тестирования – не обязательно
? Rendering mode: Universal (SSR / SSG) # Режим рендера; Universal поддерживает SSR и SSG
? Deployment target: Server (Node.js hosting) # Цель для деплоя, Server подходит для локальной разработки и Node.js-серверов
? Development tools: jsconfig.json (Recommended for VS Code) # Опциональные dev-инструменты

  3. Установите зависимости проекта

    Перейдите в папку проекта и установите необходимые зависимости выбранным пакетным менеджером:

    bash
    cd servbay-nuxt-app
npm install
# Или Yarn: yarn install
# Или pnpm: pnpm install

    Дождитесь завершения установки.

Изменение содержимого главной страницы ​

Для быстрой проверки работы проекта отредактируем основной файл главной страницы и выведем тестовый текст.

  1. Откройте файл pages/index.vue

    Откройте этот файл в вашем редакторе кода.

  2. Замените содержимое файла

    Вставьте следующий код, чтобы на странице отображалось "Hello ServBay!":

    html
    <template>
  <div>
    <h1>Hello ServBay!</h1>
  </div>
</template>

<script>
export default {
  name: 'IndexPage'
}
</script>

<style scoped>
div {
  text-align: center;
  margin-top: 50px;
  font-family: sans-serif;
}
h1 {
  color: #333;
}
</style>

    В данном примере используется атрибут scoped для ограничения стилей только текущим компонентом, а оформление слегка улучшено.

Запуск в режиме разработки через ServBay ​

Dev-сервер Nuxt.js обычно стартует на отдельном локальном порту. Чтобы получить все преимущества ServBay — собственный домен, SSL-сертификат и стандартные порты 80/443 — мы настроим обратный прокси в интерфейсе ServBay.

  1. Запустите dev-сервер Nuxt.js

    В корневой папке проекта выполните команду для запуска сервера на порту 8585 (можно выбрать другой свободный порт):

    bash
    cd /Applications/ServBay/www/servbay-nuxt-app
npm run dev -- --port 8585
# Или Yarn: yarn dev --port 8585
# Или pnpm: pnpm run dev --port 8585

    После запуска dev-сервер будет доступен на http://localhost:8585. Не закрывайте это окно терминала, чтобы сервер продолжал работать.

  2. Настройте сайт в ServBay (обратный прокси)

    Откройте панель управления ServBay, перейдите во вкладку «Сайты» и нажмите в левом нижнем углу кнопку + для добавления нового сайта:

    • Имя (Name): Например, Nuxt.js Dev Site (Proxy)
    • Домен (Domain): Укажите желаемый домен, например, nuxt-dev.servbay.demo. Рекомендовано использовать суффикс .servbay.demo для унификации.
    • Тип сайта (Website Type): Выберите Обратный прокси (Reverse Proxy).
    • IP-адрес (IP Address): 127.0.0.1 (локальный адрес)
    • Порт (Port): Порт dev-сервера Nuxt.js, например, 8585.

    Сохраните настройки. ServBay автоматически применит конфигурацию.

    Более подробно процесс добавления Node.js-сайтов через обратный прокси описан в документации.

  3. Проверьте сайт в режиме разработки

    Откройте браузер и перейдите по сконфигурированному вами домену, например: https://nuxt-dev.servbay.demo.

    Благодаря обратному прокси ServBay вы сможете обращаться к dev-серверу Nuxt.js напрямую через кастомный домен и HTTPS. ServBay сам сгенерирует и настроит SSL-сертификат (выданный ServBay User CA; убедитесь, что ваш macOS доверяет этому центру сертификации). Это дает возможность тестировать функционал и поведение, требующее защищенного соединения: service workers, корректную работу cookies, интеграции третьих сторон и пр.

Сборка и запуск production-версии ​

Когда разработка на Nuxt.js завершена и проект нужно задеплоить (или протестировать production-режим локально), следует собрать проект для production-окружения. Для Universal-режима и случаев, где нужна генерация статических страниц, используется команда nuxt generate (или скрипт npm run export).

  1. Соберите production-версию и сгенерируйте статические файлы

    В корне проекта выполните команды. npm run build компилирует проект, а npm run export генерирует статические HTML-файлы по маршрутам (по умолчанию — в папке dist):

    bash
    cd /Applications/ServBay/www/servbay-nuxt-app
npm run build
npm run export
# Или Yarn: yarn build && yarn export
# Или pnpm: pnpm build && pnpm run export

    После завершения процесса в папке проекта появится директория dist с готовыми статическими файлами.

  2. Настройте сайт ServBay для обслуживания статических файлов

    В панели ServBay откройте вкладку «Сайты», нажмите + для нового сайта:

    • Имя (Name): Например, Nuxt.js Prod Site (Static)
    • Домен (Domain): Например, nuxt-prod.servbay.demo
    • Тип сайта (Website Type): Выберите Статический (Static)
    • Корень сайта (Website Root): Папка со сгенерированными статическими файлами, например: /Applications/ServBay/www/servbay-nuxt-app/dist

    Сохраните конфигурацию.

  3. Проверьте production-версию сайта

    Откройте браузер и перейдите по адресу, например: https://nuxt-prod.servbay.demo.

    Высокопроизводительный веб-сервер ServBay (Caddy либо Nginx в зависимости от конфигурации) напрямую обслуживает файлы из папки dist — это максимально быстрый и надежный способ отдачи статического контента. Для вас также автоматически будут настроены SSL-сертификаты и поддержка собственных доменов.

Заключение ​

С помощью ServBay вы можете легко организовать локальную разработку и предпросмотр Nuxt.js-проектов. Используйте пакет Node.js для запуска dev-сервера, настройте обратный прокси для работы по защищенному кастомному домену, а после финальной сборки — просто переключитесь на тип сайта «Статический» для локального production-просмотра. Такой рабочий процесс максимально раскрывает преимущества платформы ServBay, делает локальную frontend-разработку и тестирование интуитивными и удобными. Надеемся, это руководство поможет вам еще эффективнее использовать ServBay для создания проектов на Nuxt.js!