Развертывание микрофронтендов

Микрофронтенд-архитектура предполагает разбиение большого фронтенд-приложения на независимые части, каждая из которых может разрабатываться, тестироваться и развёртываться отдельно. Angular хорошо подходит для этой модели благодаря модульности и поддержке современных стандартов сборки.

Архитектурные подходы

На практике применяются несколько стратегий:

  • Module Federation (Webpack 5)
  • Single-SPA
  • Web Components

Наиболее распространённый вариант — Module Federation, так как он интегрируется в стандартный Angular CLI.

Настройка Module Federation

Для каждого микрофронтенда используется отдельный Angular-проект. В webpack.config.js настраивается экспорт модулей:

new ModuleFederationPlugin({
  name: 'orders',
  filename: 'remoteEntry.js',
  exposes: {
    './Module': './src/app/orders/orders.module.ts'
  },
  shared: {
    '@angular/core': { singleton: true },
    '@angular/common': { singleton: true },
    '@angular/router': { singleton: true }
  }
})

Главное приложение (host) подключает удалённые модули динамически.

Ленивое подключение микрофронтендов

Маршрутизация строится через loadChildren:

{
  path: 'orders',
  loadChildren: () =>
    loadRemoteModule({
      remoteEntry: 'https://orders.app/remoteEntry.js',
      remoteName: 'orders',
      exposedModule: './Module'
    }).then(m => m.OrdersModule)
}

Такой механизм позволяет загружать код только при необходимости, снижая начальный размер бандла.

Независимое развертывание

Каждый микрофронтенд собирается и деплоится отдельно:

  • собственный CI/CD
  • отдельный домен или поддомен
  • независимые версии

Главное приложение знает только URL remoteEntry.js, что позволяет обновлять части системы без пересборки хоста.

Управление общими зависимостями

Критически важно избегать дублирования Angular-библиотек. Используются:

  • singleton: true
  • strictVersion: true
  • согласованные версии package.json

Это предотвращает конфликты зон, инжекторов и роутеров.

Изоляция стилей и состояния

Для предотвращения побочных эффектов применяются:

  • ViewEncapsulation (Emulated или ShadowDom)
  • локальные state-менеджеры (ComponentStore)
  • минимизация глобальных сервисов

Каждый микрофронтенд должен рассматриваться как автономное приложение внутри общего контейнера.

Стратегии обновления и отката

Часто используется схема:

  • деплой новой версии микрофронтенда
  • переключение URL через конфигурацию
  • мгновенный откат при ошибке

Host-приложение остаётся неизменным, что снижает риски при обновлениях.

Производительность и мониторинг

Для контроля используются:

  • lazy loading
  • prefetch удалённых entry-файлов
  • метрики загрузки по каждому микрофронтенду

Разделение ответственности упрощает диагностику проблем и масштабирование команды.

Микрофронтенды в Angular позволяют строить крупные системы с высокой степенью независимости, сохраняя при этом единый технологический стек и согласованный пользовательский опыт.

Оглавление