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

Огляд

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

Що таке Angular?

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

Ключові особливості й переваги Angular

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

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

Передумови

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

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

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

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

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

Спочатку використаємо Angular CLI для запуску нового проєкту.

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

   npm install -g @angular/cli

   Це встановить команду ng для глобального використання CLI Angular у вашому середовищі.

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

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

   CLI Angular поставить кілька запитань про налаштування майбутнього проєкту. Оберіть відповідне для вас:

   ? Would you like to add Angular routing? Yes  # Додати роути? Рекомендуємо Yes
   ? Which stylesheet format would you like to use? CSS # Формат стилів, рекомендовано CSS

   Дочекайтесь завершення, і в папці /Applications/ServBay/www буде створено проєкт із базовою структурою.

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. Запуск у режимі розробки

Зазвичай для розробки користуються встроєним dev-сервером Angular CLI (ng serve) з "гарячим" перезавантаженням для зручності дебагу. Далі налаштовуємо в ServBay проксі, щоб отримати доступ через локальний домен.

1. Запуск dev-сервера Angular: У корені проєкту (/Applications/ServBay/www/servbay-angular-app) виконайте:

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

   Програма скомпілює додаток і підніме сервер на http://localhost:8585/. Тримайте цей термінал відкритим для безперервної роботи сервера.

2. Налаштуйте сайт у ServBay (реверс-проксі): Відкрийте панель ServBay, перейдіть до розділу “Сайти” (колишнє “хости”) і створіть нову конфігурацію для реверс-проксі на ваш dev-сервер.

   • Назва (Name): Наприклад, My Angular Dev Site (видно лише в ServBay)
   • Домен (Domain): Радимо щось на кшталт servbay-angular-dev.servbay.demo — домени із закінченням .servbay.demo автоматично резолвляться у 127.0.0.1.
   • Тип сайту (Website Type): Вкажіть Реверс-проксі (Reverse Proxy).
   • Адреса проксі (Proxy Address): Введіть 127.0.0.1.
   • Порт проксі (Proxy Port): Вкажіть порт, який передали у ng serve, наприклад, 8585.

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

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

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

4. Побудова та запуск production-версії

Коли розробка завершена і ви готові до релізу, необхідно створити оптимізовану збірку для продакшну. Це буде набір статичних файлів, які можна віддати будь-яким статичним сервером. В ServBay для цього передбачена функція “статичний сайт”.

1. Побудуйте production-версію: Переконайтесь, що ви у корені проєкту (/Applications/ServBay/www/servbay-angular-app) і виконайте:

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

   Прапорець --prod (у нових CLI не обов'язковий — оптимізація за замовчуванням) допоможе застосувати production-оптимізації: AOT-компіляція, мінімізація, tree-shaking тощо. Після завершення, статичні файли будуть у теці dist/servbay-angular-app (реальна назва залежить від ваших налаштувань, зазвичай — ім'я проєкту).

2. Налаштуйте сайт у ServBay (статичний): У панелі ServBay створіть новий сайт із типом “Статичний”, що вказує на директорію зі згенерованими файлами.

   • Назва (Name): Наприклад, My Angular Production Site
   • Домен (Domain): Радимо, наприклад, servbay-angular-prod.servbay.demo.
   • Тип сайту (Website Type): Оберіть Статичний (Static).
   • Коренева папка сайту (Website Root Directory): Вкажіть шлях до build-папки з вашим index.html, зазвичай це /Applications/ServBay/www/servbay-angular-app/dist/servbay-angular-app.

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

3. Перевірте production-сайт: Відкрийте браузер і перейдіть за посиланням: https://servbay-angular-prod.servbay.demo.

   Тепер ви бачите роботу production-збірки через високопродуктивний вебсервер ServBay (Caddy чи Nginx — залежить від вашої конфігурації). SSL також буде налаштовано автоматично для захищеного з’єднання.

Переваги ServBay для Angular-розробки

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

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

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

Підсумок

Завдяки цій інструкції ви дізналися, як створити та запустити Angular-проєкт у середовищі ServBay: у режимі розробки — налаштовувати реверс-проксі для доступу через локальний домен до dev-сервера, а для продакшн — як будувати оптимізовану версію і хостити її як статичний сайт. Завдяки середовищу Node.js, гнучкому сайто-менеджменту та авто SSL від ServBay, ви зможете суттєво пришвидшити і полегшити локальну Angular-розробку. А повна підтримка стеку дозволить гармонійно інтегрувати front-end та back-end у одному зручному інструменті.