0Pricing
React Academy · Lekcja

Niezależne wdrażanie i potoki CI dla MFE

Konfigurowanie oddzielnych potoków CI/CD, aby każdy mikrofrontend można było wdrażać niezależnie.

Niezależne wdrażanie i potoki CI dla MFE to bezpłatna lekcja React Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej React Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs React Academy zawiera 4 lekcji w sumie.

Cel: niezależne wdrażanie

Każdy mikrofrontend powinien być wdrażany niezależnie, bez koordynacji z innymi zespołami. Wymaga to osobnych repozytoriów (lub Nx/Turborepo), osobnych potoków CI i osobnego hostingu.

Strategie repozytoriów

Istnieją dwa podejścia: Polyrepo (jedno repozytorium na MFE, prawdziwie niezależne) oraz Monorepo (wszystkie MFE w jednym repozytorium, współdzielone narzędzia i CI oparte na zmienionych elementach). Monorepo jest często prostsze na początek.

Strategia adresu URL remote entry

Każdy MFE udostępnia plik remoteEntry.js pod przewidywalnym adresem URL. Należy wdrażać go pod wersjonowaną ścieżką lub użyć pliku manifestu do dynamicznego wykrywania.

// 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' }

Potok GitHub Actions dla aplikacji remote

Typowy potok CI dla mikrofrontendu obejmuje testowanie, budowanie, przesłanie do CDN i opcjonalne powiadomienie hosta o konieczności zaktualizowania manifestu.

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

Adresy URL aplikacji remote zależne od środowiska

Należy używać zmiennych środowiskowych w konfiguracji webpacka hosta lub w manifeście, aby wskazywać aplikacje remote w środowisku testowym lub produkcyjnym.

// 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 dla monorepozytoriów

W monorepozytorium Nx polecenie nx affected buduje i wdraża tylko te MFE, które uległy zmianie, a nie wszystkie — oszczędzając czas CI.

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

Testowanie kontraktowe

Gdy remote zmienia interfejs API udostępnianego modułu, konsumenci przestają działać. Testowanie kontraktowe (Pact) sprawdza, czy producent i konsument uzgadniają interfejs przed wdrożeniem.

Wdrożenia kanarkowe

Najpierw należy wdrożyć nową wersję remote niewielkiemu odsetkowi użytkowników. Przed udostępnieniem jej wszystkim użytkownikom trzeba monitorować współczynnik błędów — ogranicza to zakres skutków niekompatybilnych zmian.

Strategia wycofywania zmian

Poprzednią wersję pliku remoteEntry.js należy zachować na CDN. Do wycofania zmian wystarczy zaktualizować manifest tak, aby wskazywał starą wersję.

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

Buforowanie wpisów remote w CDN

Dla pliku remoteEntry.js należy ustawić krótki TTL (lub wyłączyć buforowanie), aby hosty zawsze pobierały najnowszą wersję. Długie wartości TTL należy stosować dla wersjonowanych plików chunków.

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

Testy dymne po wdrożeniu

Po każdym wdrożeniu należy uruchomić minimalny test dymny w Playwright, aby sprawdzić, czy remote ładuje się i renderuje poprawnie w kontekście aplikacji shell.

Szybki test

Jaka jest główna zaleta używania wersjonowanego pliku manifestu dla adresów URL remote zamiast wpisywania ich na stałe w konfiguracji webpacka hosta?

Podsumowanie

Każdy MFE ma własny potok CI: testowanie → budowanie → przesłanie do CDN. Wersjonowane adresy URL remote lub adresy oparte na manifeście umożliwiają wycofywanie zmian. Dla remoteEntry.js należy ustawić krótki TTL, aby hosty natychmiast pobierały nową wersję. W monorepozytoriach Nx należy używać nx affected, aby wdrażać tylko zmienione MFE.

Często zadawane pytania

Czy lekcja „Niezależne wdrażanie i potoki CI dla MFE” jest bezpłatna?

Tak — pełny tekst „Niezależne wdrażanie i potoki CI dla MFE” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu React Academy, przejdź na CoddyKit PRO. Kurs React Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Niezależne wdrażanie i potoki CI dla MFE”?

Konfigurowanie oddzielnych potoków CI/CD, aby każdy mikrofrontend można było wdrażać niezależnie. Ćwiczysz React Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć React Academy?

Nie wymagamy żadnego doświadczenia. React Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Niezależne wdrażanie i potoki CI dla MFE”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji React Academy?

Tak. Każda lekcja React Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Koncepcje mikrofrontendów i kompromisy
  2. Module Federation z Webpack 5
  3. Współdzielony stan i routing między MFE
  4. Niezależne wdrażanie i potoki CI dla MFE
← Powrót do React Academy