Створення та запуск Nuxt.js проєкту за допомогою ServBay

Що таке Nuxt.js?

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

Основні переваги та функції Nuxt.js

• Серверний рендеринг (SSR): Попереднє рендерування Vue-сторінок на сервері підвищує швидкість відображення першого екрану, покращує досвід користувача та сприяє ефективнішому індексуванню контенту пошуковими системами.
• Генерація статичного сайту (SSG): Під час збірки створюються повністю статичні HTML-файли. Це забезпечує високий рівень продуктивності, простоту деплойменту та мінімальні витрати на сервер, особливо для сайтів з рідкісним оновленням (блоги, документація).
• Автоматичне розділення коду: Nuxt.js автоматично розділяє JavaScript-код по роутам і завантажує тільки необхідне при переході між сторінками, що значно оптимізує продуктивність.
• Роутинг на основі файлової системи: Створення .vue-файлів у директорії pages автоматично генерує роутинг, що значно спрощує керування маршрутизацією.
• Модульність: Потужна екосистема модулів дозволяє легко інтегрувати сторонні сервіси та розширення (наприклад, Axios, підтримка PWA, під'єднання CMS тощо).
• Перевага конвенцій над конфігурацією: Дотримання структури та правил іменування зменшує кількість рутинних налаштувань.
• Оптимізований досвід розробки: Гаряче перезавантаження модулів (HMR), продумане повідомлення про помилки й інші інструменти прискорюють розробку.

Завдяки цьому Nuxt.js дозволяє швидко й ефективно створювати складні, продуктивні та SEO-оптимізовані веб-додатки.

Налаштування і запуск Nuxt.js-проєкту в ServBay

У цьому посібнику показано, як використати локальне середовище розробки ServBay — зокрема пакет Node.js та інструменти керування сайтами — для створення, налаштування і запуску Nuxt.js-проєкту. Описані сценарії запуску в режимі розробки (через зворотний проксі) та в продакшені (через статичний сервер).

Перед початком роботи

Впевніться, що виконані наступні вимоги:

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

Створення Nuxt.js-проєкту

Для швидкої ініціалізації використаємо інструмент create-nuxt-app.

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-пакетів без глобальної установки (починаючи з версії 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          # За потреби оберіть UI-фреймворк
   ? Nuxt.js modules: Axios      # Оберіть необхідні модулі Nuxt.js
   ? Linting tools: ESLint       # Оберіть lint-інструменти за бажанням
   ? Testing framework: None     # Виберіть тестовий фреймворк за потреби
   ? Rendering mode: Universal (SSR / SSG) # Universal — підтримує SSR та SSG
   ? Deployment target: Server (Node.js hosting) # Target "Server" підходить для локальної розробки та серверного хостингу
   ? Development tools: jsconfig.json (Recommended for VS Code) # За потреби обирайте додаткову конфігурацію

3. Встановіть залежності проєкту

   Перейдіть у директорію з проєктом та встановіть залежності з допомогою обраного package manager:

   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 для style-тега — так стилі застосовуються лише до поточного компонента, а вміст трохи візуально покращено.

Запуск Nuxt.js у режимі розробки через ServBay

Nuxt.js dev-сервер працює на окремому локальному порту. Щоб отримати доступ через кастомний домен, SSL-сертифікат та стандартний порт (80/443), налаштуйте зворотний проксі в ServBay.

1. Запустіть 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

   Після запуску сервер буде доступний на 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-сервера, тобто 8585.

   Збережіть налаштування (“Додати” або “Зберегти”). ServBay автоматично зробить зміни активними.

   Детальніше — дивіться Додавання Node.js сайту для розробки.

3. Відкрийте сайт розробки

   Відкрийте браузер і перейдіть на домен, який налаштували в ServBay, наприклад: https://nuxt-dev.servbay.demo.

   Завдяки зворотному проксі ServBay ви отримуєте доступ до Nuxt.js через кастомний домен та HTTPS. ServBay генерує та налаштовує SSL-сертифікат (від ServBay User CA — переконайтеся в довірі до цього CA у вашій системі). Це дозволяє тестувати функції, що працюють тільки в захищеному середовищі, і симулює продакшен.

Збірка і запуск продакшен-версії

Коли 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): шлях до папки з статичними файлами Nuxt.js:
     • macOS: /Applications/ServBay/www/servbay-nuxt-app/dist
     • Windows: C:\ServBay\www\servbay-nuxt-app\dist

   Збережіть зміни (“Додати” або “Зберегти”). ServBay застосує конфігурацію.

3. Відкрийте продакшен-сайт

   В браузері відкрийте налаштований домен, наприклад: https://nuxt-prod.servbay.demo.

   Сервер ServBay (Caddy або Nginx — залежно від налаштувань) забезпечить швидку видачу статичних файлів з папки dist. Це найефективніший спосіб сервінгу статичного контенту, плюс автоматичний SSL та кастомний домен.

Підсумок

За допомогою ServBay можна гнучко керувати локальним середовищем розробки та попереднього перегляду Nuxt.js-проєктів. Використовуйте Node.js-пакет для запуску dev-сервера, сайт із зворотним проксі для роботи з кастомними доменами та HTTPS, а після збірки — статичний сервер для швидкого локального прев’ю. Такий workflow максимально розкриває переваги ServBay, і значно спрощує розробку та тестування фронтенд-проєктів. Сподіваємося, цей посібник допоможе вам ефективно застосовувати ServBay для Nuxt.js-розробки!