Создание и запуск проекта Angular в ServBay
Обзор
Этот документ подробно объясняет, как создать, настроить и запустить проект Angular в локальной web-среде разработки ServBay. Вы сможете легко развернуть проект, максимально используя мощную среду Node.js и гибкое управление сайтами в ServBay как для разработки, так и для продакшн-режима, а также организовать безопасный доступ через собственные домены и SSL-сертификаты. ServBay интегрирует необходимые пакеты для разработки (Node.js, PHP, Python, Go, Java, базы данных и др.), обеспечивая идеальную платформу для локальной full-stack разработки.
Что такое Angular?
Angular — это современный open-source фреймворк для фронтенд-разработки, поддерживаемый Google, предназначенный для создания высокопроизводительных одностраничных приложений (SPA). Построен на TypeScript и предоставляет структурированный подход, а также набор профессиональных инструментов для разработки масштабируемых корпоративных решений.
Основные особенности и преимущества Angular
- Архитектура на основе компонентов: Позволяет строить интерфейс с помощью переиспользуемых компонентов, что повышает удобство поддержки и расширяемость кода.
- Поддержка 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. В режиме разработки настроим обратный прокси для dev-сервера Angular, в продакшн-режиме — сервис статических файлов.
1. Создание проекта Angular
Начнем с создания нового проекта с помощью Angular CLI.
Установка Angular CLI: Откройте терминал и глобально установите Angular CLI через Node.js из ServBay. Если Node.js из ServBay не добавлен в PATH автоматически, может потребоваться ручное переключение среды. Обычно ServBay делает это сам.
bashnpm install -g @angular/cli
1Эта команда устанавливает
ng
и позволяет запускать Angular CLI глобально.Создание нового Angular-проекта: Перейдите в корневую папку сайтов ServBay и создайте шаблон нового проекта. Рекомендуем использовать название с брендингом 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
2Angular CLI задаст несколько вопросов о настройке:
? Would you like to add Angular routing? Yes # Добавить роутинг — рекомендуется выбрать Yes ? Which stylesheet format would you like to use? CSS # Формат стилей, например CSS
1
2Дождитесь завершения процесса. В корне сайта будет создана папка
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
2Команда
npm install
установит все пакеты из файлаpackage.json
в папкуnode_modules
.
2. Изменение стартовой страницы Angular (по желанию)
Для проверки корректной работы проекта можно поменять содержимое главной страницы.
Редактирование файла
src/app/app.component.html
: Откройте файлservbay-angular-app/src/app/app.component.html
в редакторе и замените содержимое на простой пример, например:html<div style="text-align:center"> <h1>Hello ServBay!</h1> <p>Это ваше Angular-приложение, работающее через ServBay!</p> </div>
1
2
3
4
3. Запуск проекта в режиме разработки
Обычно в процессе разработки используется dev-сервер Angular CLI (ng serve
) с поддержкой hot-reload. Затем настраивается обратный прокси в ServBay для доступа через локальный домен.
Запуск dev-сервера Angular: В корне проекта выполните команду для запуска сервера на порту, отличном от стандартного (например,
8585
):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, перейдите к разделу "Сайты" и добавьте новую конфигурацию:
- Имя (Name): Например,
My Angular Dev Site
(отображается только внутри ServBay) - Домен (Domain): Рекомендуется домен вроде
servbay-angular-dev.servbay.demo
. ServBay автоматически направит.servbay.demo
на 127.0.0.1. - Тип сайта (Website Type): Выберите
Reverse Proxy
(обратный прокси). - Proxy Address (адрес прокси):
127.0.0.1
- Proxy Port (порт прокси): тот же, что в
ng serve
, например8585
.
Сохраните и примените изменения.
- Имя (Name): Например,
Доступ к dev-сайту: В браузере перейдите на
https://servbay-angular-dev.servbay.demo
.Через ServBay можно безопасно работать по HTTPS благодаря автоматической генерации SSL-сертификата (ServBay User CA или ServBay Public CA), что позволяет проверить работу приложения в условиях, максимально приближенных к продакшн.
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 # Или: # ng build
1
2
3
4Флаг
--prod
включает оптимизацию (AOT, минификацию, tree-shaking и др.), а результат помещается в папкуdist/servbay-angular-app
(имя может отличаться по настройкам).Настройка сайта ServBay (статический сайт): В панели ServBay добавьте сайт с таким параметрами:
Имя (Name): Например,
My Angular Production Site
Домен (Domain): Например,
servbay-angular-prod.servbay.demo
Тип сайта (Website Type): Выберите
Static
(статический сайт).Корень сайта (Website Root Directory): укажите папку со скомпилированными файлами:
- 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
.Теперь продакшн-версия проекта доступна через высокопроизводительный web-сервер ServBay (Caddy, Nginx и др.). SSL-сертификаты также настраиваются автоматически для надежного HTTPS-доступа.
Преимущества использования ServBay для Angular-разработки
- Интегрированная среда: Легкая установка и управление версиями Node.js, без ручной настройки переменных среды.
- Гибкое управление сайтами: Настройка обратного прокси и статической подачи файлов через удобный интерфейс, быстрое переключение между dev и prod.
- Встроенная поддержка SSL: Бесплатные автоматические SSL-сертификаты для локальной разработки, полное соответствие продакшн-стандартам, нет проблемы смешанного контента.
- Мультистековая поддержка: Легкая интеграция с backend (Node.js Express, Python Django/Flask, PHP Laravel/Symfony, Go Gin/Echo, Java Spring Boot и др.) и базами данных (MySQL, PostgreSQL, MongoDB, Redis). ServBay быстро обновляет пакеты и поддерживает даже те функции, которые ранее были недоступны.
- Бэкап и восстановление: Удобные инструменты для резервного копирования конфигураций, сайтов, баз данных и 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
должен быть активен, а порт совпадать с прокси. - Для продакшн — корень сайта ServBay точно совпадает с папкой, где есть ваш
index.html
(dist/имя-вашего-проекта
). - Ознакомьтесь с логами ServBay для подробностей.
- Домен сайта точно соответствует настройкам в панели ServBay.
- Q: Можно ли применять разные web-серверы (Caddy/Nginx/Apache) для продакшн Angular в ServBay? A: Да, ServBay поддерживает Caddy, Nginx и Apache для обслуживания статических файлов. После настройки сайта сервер будет выбран автоматически из активных в системе.
Заключение
Следуя инструкции, вы сможете создать и запустить Angular-проект в локальной среде ServBay, получить опыт работы с обратным прокси и статическим размещением на собственных доменах, использовать SSL для безопасного доступа и быстро переключаться между режимами разработки и продакшн. Комбинируя возможности Node.js, удобное управление сайтами и автоматическую систему сертификатов SSL, вы значительно увеличите скорость и комфорт разработки локальных Angular-приложений. А широкий технологический стек ServBay поможет реализовать любые задачи full-stack-разработки.