Створення та запуск Angular-проєкту в ServBay

Огляд

Цей документ допоможе вам створити, налаштувати та запустити Angular-проєкт у локальному веб-середовищі розробки ServBay. Ви використаєте потужне середовище Node.js та гнучку систему управління сайтами (раніше — “хости”), що дозволяє легко налаштовувати як середовище розробки, так і продакшн, із безпечним доступом за допомогою користувацьких доменів та SSL-сертифікатів. ServBay містить безліч необхідних пакетів (“сервісів”) — Node.js, PHP, Python, Go, Java, бази даних й інші — забезпечуючи ідеальні умови для локальної full-stack розробки.

Що таке Angular?

Angular — це відкритий фронтенд-фреймворк, підтримуваний Google, для створення швидких, динамічних односторінкових додатків (SPA). Він побудований на TypeScript і пропонує широкий набір інструментів та структурований підхід до розробки, чудово підійде для великих та складних корпоративних додатків.

Основні переваги та особливості Angular

• Компонентна архітектура: Побудова UI через багаторазово використовувані компоненти підвищує масштабованість та підтримуваність коду.
• Підтримка TypeScript: Статична типізація та об'єктно-орієнтованість покращують якість коду й ефективність розробки.
• Впровадження залежностей: Спрощує тестування та управління залежностями компонентів.
• Потужний CLI: Автоматизує створення проєктів, компонентів, сервісів, модулів, збірку й тестування.
• Вбудовані модулі: Включає маршрутизацію, форми, HTTP-клієнт та інші поширені функції.
• Оптимізація продуктивності: Підтримує AOT-компіляцію, tree-shaking та інші технології для підвищення швидкодії.

Завдяки Angular і стабільному середовищу ServBay розробники можуть повністю зосередитись на бізнес-логіці.

Передумови

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

1. Встановлено ServBay: Ви вже інсталювали та запустили ServBay (підтримуються macOS і Windows).
2. Увімкнено пакет Node.js: У панелі керування ServBay встановлено та активовано потрібну версію Node.js. ServBay дозволяє легко перемикатися між кількома версіями Node.js.

Налаштування та запуск Angular-проєкту в ServBay

Ми створимо та запустимо Angular-проєкт за допомогою середовища Node.js від ServBay. У режимі розробки скористаємося функцією зворотного проксі для доступу через домен, у продакшн — налаштуємо сервіс статичних файлів.

1. Створення Angular-проєкту

Почнемо із генерації нового проєкту через Angular CLI.

1. Встановлення Angular CLI: Відкрийте ваш термінал і глобально встановіть Angular CLI через Node.js від ServBay. Якщо середовище Node.js не підключене автоматично до PATH, оберіть його вручну. Як правило, ServBay сам додає Node.js до системного PATH.

   npm install -g @angular/cli

   Тепер ви маєте команду ng для глобального використання Angular CLI.

2. Створення нового проєкту: Перейдіть до кореневої директорії сайтів ServBay і запустіть створення нового Angular-проєкту. Радимо використовувати назву з брендом ServBay, наприклад servbay-angular-app.

   macOS:

   cd /Applications/ServBay/www
   ng new servbay-angular-app

   Windows:

   cd C:\ServBay\www
   ng new servbay-angular-app

   Під час генерації CLI поставить декілька уточнюючих питань. Виберіть або введіть ваші варіанти:

   ? Would you like to add Angular routing? Yes  # Додати маршрутизацію? Рекомендуємо Yes
   ? Which stylesheet format would you like to use? CSS # Вибір формату стилів, наприклад CSS

   Після виконання команди Angular CLI створить папку servbay-angular-app у корені сайтів:

   • macOS: /Applications/ServBay/www/servbay-angular-app
   • Windows: C:\ServBay\www\servbay-angular-app

3. Встановлення залежностей проекту: Зайдіть у створену директорію проєкту і встановіть локальні залежності.

   cd servbay-angular-app
   npm install

   npm install прочитає всі залежності з package.json та згенерує їх у папці node_modules.

2. Редагування контенту Angular-проєкту (необов'язково)

Щоб перевірити запуск проекту, змініть контент домашньої сторінки.

1. Редагування src/app/app.component.html: Відкрийте файл servbay-angular-app/src/app/app.component.html у редакторі й змініть/видаліть контент, залишивши простий заголовок, наприклад “Hello ServBay!”.

   <div style="text-align:center">
     <h1>Hello ServBay!</h1>
     <p>Це ваш Angular-додаток, запущений через ServBay!</p>
   </div>

3. Запуск проекту в режимі розробки

У процесі розробки зазвичай використовують локальний сервер Angular (ng serve) із “гарячим” перезавантаженням. Для доступу через домен налаштуйте зворотний проксі у ServBay.

1. Запуск Angular Dev-сервера: У кореневій директорії проекту запустіть сервер на вибраному порту (наприклад, 8585 — не співпадає з портом ServBay).

   macOS:

   cd /Applications/ServBay/www/servbay-angular-app
   ng serve --port 8585

   Windows:

   cd C:\ServBay\www\servbay-angular-app
   ng serve --port 8585

   Сервер запуститься на http://localhost:8585/. Залиште термінал відкритим, щоб він продовжував працювати.

2. Налаштування сайту ServBay (зворотний проксі): Відкрийте панель керування ServBay → “Сайти” (“Хости”). Створіть новий сайт із проксі-доменом:

   • Назва: Наприклад, My Angular Dev Site (для внутрішнього відображення в ServBay)
   • Домен: Радимо, наприклад, servbay-angular-dev.servbay.demo. ServBay автоматично прив’язує .servbay.demo до 127.0.0.1.
   • Тип сайту: Зворотний проксі
   • Адреса проксі: 127.0.0.1
   • Порт проксі: ваш порт із ng serve, наприклад 8585

   Збережіть і застосуйте зміни.

3. Доступ до сайту в режимі розробки: Відкрийте браузер і зайдіть на ваш домен https://servbay-angular-dev.servbay.demo.

   Через ServBay ви автоматично отримаєте локальний SSL (через ServBay User CA або Public CA), й доступ до сайта відбувається по HTTPS. Це моделює реальний продакшн і допоможе виявити проблеми на ранньому етапі.

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

Після завершення розробки виконайте збірку оптимізованої версії для реального розміщення. ServBay дозволяє швидко налаштувати статичний сервер для цих файлів.

1. Збірка продакшн-версії: У каталозі проекту виконайте команду:

   macOS:

   cd /Applications/ServBay/www/servbay-angular-app
   ng build --prod
   # або для нових версій Angular CLI:
   # ng build

   Windows:

   cd C:\ServBay\www\servbay-angular-app
   ng build --prod
   # або для нових версій Angular CLI:
   # ng build

   Прапорець --prod (у нових версіях використовується за замовчуванням) вмикає всі оптимізації. Зібрані статичні файли міститимуться у папці dist/servbay-angular-app (або проектній, якщо ім’я змінено).

2. Налаштування сайту ServBay (статичний сервер): Відкрийте панель керування ServBay → “Сайти”. Додайте новий сайт з типом “Статичний”, вкажіть директорію із dist/servbay-angular-app.

   • Назва: Наприклад, My Angular Production Site

   • Домен: Наприклад, servbay-angular-prod.servbay.demo

   • Тип сайту: Статичний

   • Коренева директорія: шлях до збірки

     • macOS: /Applications/ServBay/www/servbay-angular-app/dist/servbay-angular-app
     • Windows: C:\ServBay\www\servbay-angular-app\dist\servbay-angular-app

     Обов’язково вкажіть директорію з файлом index.html.

   Збережіть налаштування.

3. Доступ до сайту у продакшн-режимі: Відкрийте браузер й перейдіть до домену https://servbay-angular-prod.servbay.demo.

   Ви побачите продакшн-версію вашого Angular-проєкту через високопродуктивний веб-сервер ServBay (Caddy або Nginx, залежно від конфігурації), як статичний сайт. SSL-сертифікати налаштовуються автоматично.

Переваги ServBay у Angular-розробці

• Інтегроване середовище: Просте встановлення й управління версіями Node.js без складної конфігурації змінних середовища.
• Гнучке управління сайтами: Легка настройка проксі та статичних серверів — миттєве перемикання між режимами розробки й продакшну.
• Вбудована підтримка SSL: Автоматична генерація та налаштування SSL для локальної розробки — HTTPS як у продакшн.
• Підтримка багатьох стеків: Якщо ваш проект також містить бекенд API (Node.js Express, Python Django/Flask, PHP Laravel/Symfony, Go Gin/Echo, Java Spring Boot тощо) або бази даних (MySQL, PostgreSQL, MongoDB, Redis), ServBay легко інтегрує ці сервіси й постійно оновлює. Тепер всі функції — навіть ті, що раніше були недоступні — підтримуються.
• Резервне копіювання й відновлення: Зручний backup всіх налаштувань, сайтів, баз даних і SSL-сертифікатів — ваші дані під захистом.
• Скидання паролів БД: Вбудована функція для скидання root-паролів MySQL, MariaDB, PostgreSQL — вирішення типових труднощів для розробника.

Поширені запитання (FAQ)

• Q: Після запуску ng new або ng serve команда не знайдена (command not found: ng). Що робити? A: Angular CLI або не встановлений, або не доданий у PATH. Переконайтеся в глобальній інсталяції @angular/cli (npm install -g @angular/cli) та вірному підключенні Node.js через ServBay у PATH. Перезапустіть термінал або ServBay.
• Q: Неможливо запустити ng serve, порт зайнятий. A: Порт (наприклад, 8585) зайнятий іншою програмою. Вкажіть інший порт у команді, наприклад, ng serve --port 8586, і оновіть проксі-конфігурацію в ServBay.
• Q: Сайт у ServBay налаштовано, але сторінка не завантажується? A: Перевірте: * Чи запущений ServBay. * У режимі розробки — чи працює ng serve і чи співпадає порт проксі із портом сервера. * У продакшн — чи правильно вказана коренева директорія сайту (має містити файл index.html у dist/your-project-name). * Перевірте лог-файли ServBay для деталей. * Домен, який ви відкриваєте, має точно відповідати налаштуванням сайту.
• Q: Чи можна використати різні веб-сервери ServBay (Caddy/Nginx/Apache) для розміщення Angular у продакшн? A: Так, ServBay підтримує Caddy, Nginx і Apache як статичні сервери. Він автоматично використовує активний сервер — всі вони ефективно працюють із Angular.

Підсумок

Згідно цього гайду ви змогли створити і запустити Angular додаток в оточенні ServBay: використовувати проксі для локального домену у розробці й статичний сервер для продакшн. Об'єднавши потужності Node.js, зручне управління сайтами та автоматичний SSL, ви отримаєте максимально ефективну розробку. А багатостекова підтримка ServBay стане ґрунтом для ваших найскладніших фулстек-проектів.