Развертывание в облачных сервисах

Развертывание Angular-приложений в облаке включает подготовку проекта, настройку сборки и публикацию на платформу. Важным аспектом является корректная конфигурация маршрутизации и статических файлов.

Сборка проекта

Для подготовки к развертыванию используется команда:

ng build --prod
  • --prod активирует оптимизацию: минимизация кода, сжатие стилей и скриптов, tree-shaking.
  • Output path — папка dist/<project-name> содержит готовые к раздаче файлы.

Настройка маршрутизации

При использовании Angular Router необходимо обеспечить корректную работу при прямых переходах по URL. Для этого создаются правила переадресации на сервере или конфигурация файла index.html для обработки всех маршрутов.

Пример для Nginx:

location / {
  try_files $uri $uri/ /index.html;
}

Публикация на популярных облачных платформах

  1. Firebase Hosting

    • Установка CLI: npm install -g firebase-tools
    • Авторизация: firebase login
    • Инициализация: firebase init hosting
    • Деплой: firebase deploy

  2. AWS S3 + CloudFront

    • Создание бакета S3 с публичным доступом.
    • Загрузка файлов сборки в бакет.
    • Настройка CloudFront для распределённого кэширования и HTTPS.

  3. Azure Static Web Apps

    • Подключение репозитория (GitHub или Azure DevOps).
    • Конфигурация сборки через workflow файл.
    • Автоматический деплой после коммитов в ветку.

  4. Netlify

    • Drag & drop папки dist или подключение репозитория.
    • Настройка redirect rules для Angular Router: _redirects файл с содержимым /index.html 200.

Оптимизация для облака

  • Lazy loading модулей уменьшает объём начальной загрузки.
  • Кэширование статических ресурсов через заголовки HTTP или CDN.
  • Минимизация bundle size с помощью Angular CLI и дополнительных плагинов.
  • Service Worker и PWA для офлайн-доступа и ускоренной загрузки.

Развертывание Angular-приложений в облаке требует точной настройки сборки, маршрутизации и кэширования, что обеспечивает стабильную работу приложения на любых устройствах и в любых условиях сети.

Оглавление