ServBay

Русский

English
简体中文
繁體中文
Español
العربية
Português
日本語
Deutsch
Français
Tiếng Việt
Türkçe
Italiano
हिन्दी
Bahasa Indonesia
Bahasa Melayu
Polski
Nederlands
Українська
ไทย
한국어

Русский

English
简体中文
繁體中文
Español
العربية
Português
日本語
Deutsch
Français
Tiếng Việt
Türkçe
Italiano
हिन्दी
Bahasa Indonesia
Bahasa Melayu
Polski
Nederlands
Українська
ไทย
한국어

Appearance

Создание и запуск Angular-проекта в ServBay ​

Обзор ​

Данный документ содержит пошаговую инструкцию по созданию, настройке и запуску Angular-проекта в локальной веб‑среде разработки ServBay. Мы воспользуемся мощной средой Node.js, предоставляемой ServBay, а также гибкой системой управления сайтами (ранее — "хостами") для быстрой настройки среды разработки и продакшна с доступом через собственные домены и SSL‑сертификаты. ServBay интегрирует множество необходимых для разработки пакетов ("служб"): Node.js, PHP, Python, Go, Java, базы данных и др. — это идеальное решение для полного локального стека разработки.

Что такое Angular? ​

Angular — это поддерживаемый Google открытый фреймворк для фронтенда, предназначенный для построения высокопроизводительных, динамических одностраничных приложений (SPA). Angular построен на TypeScript и предлагает широкий инструментальный набор и структурированный подход к разработке, отлично подходит для масштабируемых корпоративных приложений.

Ключевые особенности и преимущества Angular ​

  • Компонентная архитектура: Строительство интерфейса через переиспользуемые компоненты повышает поддержку и масштабируемость кода.
  • Поддержка TypeScript: Статическая типизация и мощные ООП-возможности повышают качество и продуктивность разработки.
  • Внедрение зависимостей: Компоненты проще тестировать и управлять их зависимостями.
  • Мощный 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. Для разработки используем обратный прокси на сайт разворачиваемого через ng serve сервера; для продакшна — сборку и раздачу статических файлов через функционал сайта ServBay.

1. Создание проекта Angular ​

Для начала создаём новый проект с помощью Angular CLI.

  1. Установка Angular CLI: Откройте терминал и установите Angular CLI глобально в среде Node.js от ServBay. Если Node.js не добавлен автоматически в PATH системы, предварительно переключитесь на среду Node.js ServBay (обычно это делается автоматически).

    bash
    npm install -g @angular/cli

    Теперь команда ng должна быть доступна по всему вашему окружению.

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

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

    Angular CLI задаст несколько вопросов о настройках. Ответьте согласно своим предпочтениям:

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

    После выполнения команды в директории /Applications/ServBay/www появится папка servbay-angular-app с базовой структурой проекта.

  3. Установка зависимостей проекта: Перейдите в новый каталог проекта и установите все локальные пакетные зависимости:

    bash
    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 и удалите или измените существующее содержимое, например, замените его простым заголовком:

    html
    <div style="text-align:center">
  <h1>Hello ServBay!</h1>
  <p>Это ваше Angular-приложение, работающее через ServBay!</p>
</div>

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

Обычно на время разработки используется dev‑сервер Angular CLI (ng serve) — он поддерживает hot reload и ускоряет тестирование. С помощью обратного прокси сайта ServBay вы сможете получить к нему доступ по доменному имени.

  1. Запуск dev‑сервера Angular: В корне проекта (/Applications/ServBay/www/servbay-angular-app) выполните команду для запуска сервера, указав порт (например, 8585), чтобы избежать конфликта с основным веб‑сервером ServBay.

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

    Проект скомпилируется и сервер будет доступен по адресу http://localhost:8585/. Не закрывайте терминал — сервер должен быть всегда запущен для работы сайта.

  2. Настройка сайта ServBay (обратный прокси): Откройте панель управления ServBay и добавьте новый сайт через интерфейс "Сайты" (ранее — "Хосты"). Настройте обратный прокси на ваш ng serve:

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

    Сохраните и примените изменения.

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

    Благодаря реализации в ServBay, для каждого локального сайта автоматически создается и настраивается SSL-сертификат (через ServBay User CA или ServBay Public CA). То есть можно сразу работать через защищённый HTTPS, что имитирует условия продакшна и помогает выявлять потенциальные проблемы на ранних стадиях.

4. Сборка и запуск продакшн-версии ​

Когда разработка закончена, пора собрать оптимизированный продакшн-бандл и предоставить его как статические файлы через функционал статического сайта ServBay.

  1. Сборка продакшн-версии: В корне проекта (/Applications/ServBay/www/servbay-angular-app) выполните:

    bash
    cd /Applications/ServBay/www/servbay-angular-app
ng build --prod
# Или в более новой версии Angular CLI:
# ng build

    Флаг --prod (в новых версиях по умолчанию) включает все оптимизации: AOT-компиляция, минимизация, tree-shaking и прочее. Файлы для раздачи будут в каталоге dist/servbay-angular-app (или с другим именем в зависимости от конфигурации).

  2. Настройка сайта ServBay (статические файлы): В панели управления ServBay добавьте новый сайт, направляющий избранный домен на папку со статикой:

    • Имя: Например, My Angular Production Site
    • Домен: Тестовый брендированный домен, например servbay-angular-prod.servbay.demo
    • Тип сайта: Статический (Static)
    • Корневая директория сайта: Укажите путь до итоговой директории статических файлов — обычно это /Applications/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, без ручной настройки переменных окружения.
  • Гибкое управление сайтами: Настройка обратного прокси и статической раздачи через понятный GUI, мгновенное переключение между режимами разработки и продакшна.
  • Встроенная поддержка SSL: Бесплатные, автоматически настраиваемые SSL-сертификаты для локальных сайтов — как в реальном продакшне, чтобы избегать проблем смешанного контента.
  • Поддержка полного стека: Если проект требует backend (Node.js Express, Python Django/Flask, PHP Laravel/Symfony, Go Gin/Echo, Java Spring Boot) или СУБД (MySQL, PostgreSQL, MongoDB, Redis) — ServBay легко объединяет всё это в рамках одного локального окружения. Платформа регулярно обновляет и дорабатывает все пакеты, включая те, которые ранее могли недоставать функциональности.
  • Бэкап и восстановление: Удобное резервное копирование и рестор сайтов, баз данных, сертификатов и конфигураций на случай сбоев.
  • Сброс паролей баз данных: Встроенный функционал сброса пароля root для MySQL, MariaDB и PostgreSQL — ещё одна классическая "боль" разработчика теперь решена.

Часто задаваемые вопросы (FAQ) ​

  • В: При выполнении ng new или ng serve появляется ошибка command not found: ng. Что делать? О: Angular CLI не установлен или не прописан в системном PATH. Установите @angular/cli глобально (npm install -g @angular/cli), убедитесь что среда Node.js от ServBay действительно активна. Попробуйте перезапустить терминал или сам ServBay.
  • В: ng serve не запускается, пишет, что порт занят. Как быть? О: Указанный порт (например, 8585) уже используется. Запустите сервер с другим свободным портом: ng serve --port 8586, после чего обновите порт прокси в настройках сайта ServBay.
  • В: После настройки сайта ServBay по доменному имени сайт не открывается. О: Проверьте:
    • ServBay действительно запущен.
    • Для разработки работает ли команда ng serve и совпадают ли порты с настройками обратного прокси.
    • Для продакшна — правильно ли проставлен путь к корню сайта (должен содержать index.html).
    • Логи ServBay могут содержать дополнительную информацию о конкретных ошибках.
    • Доменное имя полностью совпадает с тем, что прописано в настройках сайта.
  • В: Могу ли я раздавать продакшн-версию Angular через различные веб-серверы (Caddy, Nginx, Apache) в ServBay? О: Да, ServBay поддерживает Caddy, Nginx и Apache для работы со статикой. Система автоматически выберет активный сервер для обслуживания вашего сайта.

Итог ​

Применяя рекомендации из этого руководства, вы сможете без особых усилий развернуть и запустить Angular‑проект в среде ServBay: от разработки с использованием обратного прокси до размещения оптимизированной статики под безопасным HTTPS. Node.js, простой интерфейс для управления сайтами и автоматическое применение SSL помогут сделать процесс разработки максимально эффективным и удобным, а широкий стек поддерживаемых технологий ServBay обеспечит профессиональную платформу для локальной fullstack‑разработки.