0Pricing
React Academy · Урок

Независимое развёртывание и конвейеры CI для MFE

Настройте отдельные конвейеры CI/CD, чтобы каждый микрофронтенд развёртывался независимо.

«Независимое развёртывание и конвейеры CI для MFE» — бесплатный урок React Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Academy содержит 4 уроков всего.

Цель: независимое развёртывание

Каждый микрофронтенд должен развёртываться независимо, без координации с другими командами. Для этого нужны отдельные репозитории (или Nx/Turborepo), отдельные конвейеры CI и отдельный хостинг.

Стратегии организации репозиториев

Есть два подхода: Polyrepo (один репозиторий на MFE, настоящая независимость) и Monorepo (все MFE в одном репозитории, общие инструменты и CI на основе затронутых проектов). С монорепозиторием часто проще начать.

Стратегия URL точки входа удалённого приложения

Каждый MFE предоставляет remoteEntry.js по предсказуемому URL. Развёртывайте его по версионированному пути или используйте файл манифеста для динамического обнаружения.

// Versioned URL strategy:
https://cdn.example.com/products/1.2.3/remoteEntry.js

// Latest URL strategy (simpler, no host update needed):
https://cdn.example.com/products/latest/remoteEntry.js

// Dynamic manifest:
https://cdn.example.com/manifest.json
// { products: 'https://cdn.example.com/products/1.2.3/remoteEntry.js' }

Конвейер GitHub Actions для удалённого приложения

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

# .github/workflows/deploy.yml
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm ci
      - run: npm test
      - run: npm run build
      - uses: aws-actions/configure-aws-credentials@v4
        with:
          aws-access-key-id: ${{ secrets.AWS_KEY }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET }}
          aws-region: us-east-1
      - run: aws s3 sync dist/ s3://cdn-bucket/products/ --delete

URL удалённых приложений для конкретных окружений

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

// Host webpack.config.js
const PRODUCTS_URL = process.env.PRODUCTS_REMOTE_URL ?? 'https://cdn.example.com/products/latest/remoteEntry.js';

new ModuleFederationPlugin({
  remotes: { products: `products@${PRODUCTS_URL}` },
});

Nx Affected для монорепозиториев

В монорепозитории Nx команда nx affected собирает и развёртывает только изменившиеся MFE, а не все сразу, экономя время CI.

# Only build MFEs affected by the current PR
npx nx affected:build --base=origin/main
npx nx affected:test --base=origin/main

Контрактное тестирование

Если удалённое приложение изменяет API предоставляемого модуля, потребители перестают работать. Контрактное тестирование (Pact) проверяет согласованность интерфейса у производителя и потребителя до развёртывания.

Канареечные развёртывания

Сначала разверните новую версию удалённого приложения для небольшой доли пользователей. Следите за частотой ошибок перед распространением на всех пользователей — это уменьшает масштаб последствий несовместимых изменений.

Стратегия отката

Храните предыдущую версию удалённого приложения с файлом remoteEntry.js в CDN. Для отката достаточно обновить манифест, указав в нём старую версию.

// Rollback: update manifest to previous version
await updateManifest({ products: 'https://cdn/products/1.1.0/remoteEntry.js' });

Кэширование CDN записей удалённых приложений

Установите короткий TTL (или отключите кэширование) для remoteEntry.js, чтобы хосты всегда получали последнюю версию. Для версионированных файлов частей пакета используйте длительный TTL.

# CloudFront cache behavior:
# remoteEntry.js → Cache-Control: no-cache, max-age=0
# *.chunk.js     → Cache-Control: max-age=31536000, immutable

Дымовые тесты после развёртывания

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

Быстрая проверка

Каково ключевое преимущество использования версионируемого файла манифеста для URL удалённых приложений по сравнению с их жёстким заданием в конфигурации webpack хоста?

Итоги

У каждого MFE есть собственный конвейер CI: тестирование → сборка → загрузка в CDN. Используйте версионированные URL удалённых приложений или URL на основе манифеста, чтобы обеспечить возможность отката. Установите короткий TTL кэша для remoteEntry.js и получайте обновления немедленно. В монорепозиториях Nx используйте nx affected, чтобы развёртывать только изменившиеся MFE.

Часто задаваемые вопросы

Урок «Независимое развёртывание и конвейеры CI для MFE» бесплатный?

Да — полный текст урока «Независимое развёртывание и конвейеры CI для MFE» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Academy, подпишись на CoddyKit PRO. Курс React Academy содержит 4 уроков всего.

Чему я научусь в уроке «Независимое развёртывание и конвейеры CI для MFE»?

Настройте отдельные конвейеры CI/CD, чтобы каждый микрофронтенд развёртывался независимо. Ты практикуешь React Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать React Academy?

Предыдущий опыт не требуется. React Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Независимое развёртывание и конвейеры CI для MFE»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке React Academy?

Да. Каждый урок React Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Концепции микрофронтендов и компромиссы
  2. Module Federation с Webpack 5
  3. Общее состояние и маршрутизация между MFE
  4. Независимое развёртывание и конвейеры CI для MFE
← Назад к React Academy