Создание и запуск Nuxt.js проекта в ServBay

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

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

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

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

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

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

Это руководство продемонстрирует, как использовать полноценную локальную среду разработки ServBay — в частности, пакет Node.js и функции управления сайтами — для создания, настройки и запуска Nuxt.js проекта. Вы узнаете, как развернуть Nuxt.js в режиме разработки с обратным прокси и как работать в режиме продакшн с раздачей статических файлов.

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

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

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

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

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

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

   В ServBay стандартная папка для хранения локальных проектов — сайт-ресурс. Чтобы перейти в нее через терминал, используйте соответствующую команду:

   macOS:

   cd /Applications/ServBay/www

   Windows:

   cd C:\ServBay\www

2. Инициализация нового Nuxt.js проекта

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

   npx create-nuxt-app servbay-nuxt-app

   Следуйте инструкциям в консоли и выберите необходимые опции. Пример процесса настройки:

   ? Project name: servbay-nuxt-app
   ? Programming language: JavaScript
   ? Package manager: Npm         # Выберите менеджер пакетов, рекомендуется Npm либо Yarn
   ? UI framework: None          # Выберите при необходимости фреймворк интерфейса
   ? Nuxt.js modules: Axios      # Выберите модули по необходимости
   ? 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) # Отметьте нужные инструменты для разработки

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

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

   cd servbay-nuxt-app
   npm install
   # Или через Yarn: yarn install
   # Или через pnpm: pnpm install

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

Изменение стартовой страницы проекта

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

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

   Найдите в редакторе кода файл pages/index.vue внутри вашего проекта.

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

   Замените содержимое файла следующим образом — теперь на главной странице будет надпись "Hello ServBay!":

   <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

Nuxt.js сервер для разработки обычно работает на локальном порту. Чтобы получить доступ через собственный домен ServBay, бесплатный SSL и привычные 80/443 порты, используем настройку обратного прокси.

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

   Находясь в корне проекта, запустите dev-сервер Nuxt.js на порту 8585 (можно выбрать любой свободный порт):

   macOS:

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

   Windows:

   cd C:\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 — фирменный стиль ServBay.
   • Тип сайта (Website Type): Выберите Обратный прокси (Reverse Proxy).
   • IP-адрес (IP Address): Укажите 127.0.0.1 (локальный хост).
   • Порт (Port): Введите порт dev-сервера, то есть 8585.

   Перемены сохраните, сайт будет настроен автоматически.

   С подробными шагами по добавлению Node.js сайта (режим разработки через обратный прокси) ознакомьтесь в Добавление сайта для Node.js разработки.

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

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

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

Сборка и запуск продакшн-версии

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

1. Сборка и экспорт статических файлов

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

   macOS:

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

   Windows:

   cd C:\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): Укажите путь к папке со статикой:
     • macOS: /Applications/ServBay/www/servbay-nuxt-app/dist
     • Windows: C:\ServBay\www\servbay-nuxt-app\dist

   После сохранения сайт будет автоматически запущен.

3. Просмотр сайта в продакшн-режиме

   Запустите браузер и откройте домен, созданный для продакшн-окружения — например, https://nuxt-prod.servbay.demo.

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

Итоги

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