Створення та запуск 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 розробники можуть повністю зосередитись на бізнес-логіці.
Передумови
Перед початком переконайтеся, що ви виконали наступне:
- Встановлено ServBay: Ви вже інсталювали та запустили ServBay (підтримуються macOS і Windows).
- Увімкнено пакет Node.js: У панелі керування ServBay встановлено та активовано потрібну версію Node.js. ServBay дозволяє легко перемикатися між кількома версіями Node.js.
Налаштування та запуск Angular-проєкту в ServBay
Ми створимо та запустимо Angular-проєкт за допомогою середовища Node.js від ServBay. У режимі розробки скористаємося функцією зворотного проксі для доступу через домен, у продакшн — налаштуємо сервіс статичних файлів.
1. Створення Angular-проєкту
Почнемо із генерації нового проєкту через Angular CLI.
Встановлення Angular CLI: Відкрийте ваш термінал і глобально встановіть Angular CLI через Node.js від ServBay. Якщо середовище Node.js не підключене автоматично до PATH, оберіть його вручну. Як правило, ServBay сам додає Node.js до системного PATH.
bashnpm install -g @angular/cli
1Тепер ви маєте команду
ng
для глобального використання Angular CLI.Створення нового проєкту: Перейдіть до кореневої директорії сайтів ServBay і запустіть створення нового Angular-проєкту. Радимо використовувати назву з брендом ServBay, наприклад
servbay-angular-app
.macOS:
bashcd /Applications/ServBay/www ng new servbay-angular-app
1
2Windows:
bashcd C:\ServBay\www ng new servbay-angular-app
1
2Під час генерації CLI поставить декілька уточнюючих питань. Виберіть або введіть ваші варіанти:
? Would you like to add Angular routing? Yes # Додати маршрутизацію? Рекомендуємо Yes ? Which stylesheet format would you like to use? CSS # Вибір формату стилів, наприклад CSS
1
2Після виконання команди Angular CLI створить папку
servbay-angular-app
у корені сайтів:- macOS:
/Applications/ServBay/www/servbay-angular-app
- Windows:
C:\ServBay\www\servbay-angular-app
- macOS:
Встановлення залежностей проекту: Зайдіть у створену директорію проєкту і встановіть локальні залежності.
bashcd servbay-angular-app npm install
1
2npm install
прочитає всі залежності зpackage.json
та згенерує їх у папціnode_modules
.
2. Редагування контенту Angular-проєкту (необов'язково)
Щоб перевірити запуск проекту, змініть контент домашньої сторінки.
Редагування
src/app/app.component.html
: Відкрийте файлservbay-angular-app/src/app/app.component.html
у редакторі й змініть/видаліть контент, залишивши простий заголовок, наприклад “Hello ServBay!”.html<div style="text-align:center"> <h1>Hello ServBay!</h1> <p>Це ваш Angular-додаток, запущений через ServBay!</p> </div>
1
2
3
4
3. Запуск проекту в режимі розробки
У процесі розробки зазвичай використовують локальний сервер Angular (ng serve
) із “гарячим” перезавантаженням. Для доступу через домен налаштуйте зворотний проксі у ServBay.
Запуск Angular Dev-сервера: У кореневій директорії проекту запустіть сервер на вибраному порту (наприклад,
8585
— не співпадає з портом ServBay).macOS:
bashcd /Applications/ServBay/www/servbay-angular-app ng serve --port 8585
1
2Windows:
bashcd C:\ServBay\www\servbay-angular-app ng serve --port 8585
1
2Сервер запуститься на
http://localhost:8585/
. Залиште термінал відкритим, щоб він продовжував працювати.Налаштування сайту 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
Збережіть і застосуйте зміни.
- Назва: Наприклад,
Доступ до сайту в режимі розробки: Відкрийте браузер і зайдіть на ваш домен
https://servbay-angular-dev.servbay.demo
.Через ServBay ви автоматично отримаєте локальний SSL (через ServBay User CA або Public CA), й доступ до сайта відбувається по HTTPS. Це моделює реальний продакшн і допоможе виявити проблеми на ранньому етапі.
4. Збірка й запуск продакшн-версії
Після завершення розробки виконайте збірку оптимізованої версії для реального розміщення. ServBay дозволяє швидко налаштувати статичний сервер для цих файлів.
Збірка продакшн-версії: У каталозі проекту виконайте команду:
macOS:
bashcd /Applications/ServBay/www/servbay-angular-app ng build --prod # або для нових версій Angular CLI: # ng build
1
2
3
4Windows:
bashcd C:\ServBay\www\servbay-angular-app ng build --prod # або для нових версій Angular CLI: # ng build
1
2
3
4Прапорець
--prod
(у нових версіях використовується за замовчуванням) вмикає всі оптимізації. Зібрані статичні файли міститимуться у папціdist/servbay-angular-app
(або проектній, якщо ім’я змінено).Налаштування сайту 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
.- macOS:
Збережіть налаштування.
Доступ до сайту у продакшн-режимі: Відкрийте браузер й перейдіть до домену
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 стане ґрунтом для ваших найскладніших фулстек-проектів.