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 в локальной 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, разработчики могут сосредоточиться на реализации бизнес-логики.

Предварительные условия ​

Перед началом работы убедитесь, что выполнены следующие требования:

  1. ServBay установлен: ServBay успешно инсталлирован и запущен (работает на macOS и Windows).
  2. Node.js активирован: В панели управления ServBay установите и активируйте необходимую версию пакета Node.js. ServBay позволяет устанавливать и переключаться между несколькими версиями Node.js.

Настройка и запуск Angular-проекта в ServBay ​

Дальнейшие шаги описывают, как создать и запустить Angular-проект, используя Node.js из ServBay. В режиме разработки настроим обратный прокси для dev-сервера Angular, в продакшн-режиме — сервис статических файлов.

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

Начнем с создания нового проекта с помощью Angular CLI.

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

    bash
    npm install -g @angular/cli

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

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

    macOS:

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

    Windows:

    bash
    cd C:\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

    Дождитесь завершения процесса. В корне сайта будет создана папка servbay-angular-app с базовой структурой проекта:

    • macOS: /Applications/ServBay/www/servbay-angular-app
    • Windows: C:\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: В корне проекта выполните команду для запуска сервера на порту, отличном от стандартного (например, 8585):

    macOS:

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

    Windows:

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

    Проект скомпилируется и станет доступен на http://localhost:8585/. Терминал должен оставаться открытым для работы сервера.

  2. Настройка сайта 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.

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

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

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

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

После завершения разработки пора собрать оптимизированную версию приложения для размещения через статический сервер ServBay.

  1. Сборка продакшн-версии: В корне проекта выполните команду:

    macOS:

    bash
    cd /Applications/ServBay/www/servbay-angular-app
ng build --prod
# В новых версиях Angular CLI можно просто использовать:
# ng build

    Windows:

    bash
    cd C:\ServBay\www\servbay-angular-app
ng build --prod
# Или:
# ng build

    Флаг --prod включает оптимизацию (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): укажите папку со скомпилированными файлами:

      • 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.

    Теперь продакшн-версия проекта доступна через высокопроизводительный 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-разработки.