React Academy · leksjon

Uavhengig utrulling og CI-pipelines for MFE-er

Sett opp separate CI/CD-pipelines, slik at hver mikrofrontend kan rulles ut uten koordinering.

Leksjon 4 av 413 trinn

Uavhengig utrulling og CI-pipelines for MFE-er er en gratis leksjon i React Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Academy inneholder totalt 4 leksjoner.

Målet: uavhengig distribusjon

Hver micro-frontend bør kunne distribueres uavhengig, uten koordinering med andre team. Dette krever separate repoer (eller Nx/Turborepo), separate CI-pipelines og separat hosting.

Strategier for repoer

To tilnærminger: Polyrepo (ett repo per MFE, virkelig uavhengig) og Monorepo (alle MFE-er i ett repo, med delte verktøy og CI basert på berørte prosjekter). Monorepo er ofte enklere å starte med.

Strategi for URL-er til remote entry

Hver MFE eksponerer en remoteEntry.js på en forutsigbar URL. Distribuer til en versjonert bane, eller bruk en manifestfil for dynamisk oppdagelse.

// 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-pipeline for en remote

En typisk CI-pipeline for en micro-frontend består av testing, bygging, opplasting til CDN og eventuelt varsling av host-en om at manifestet må oppdateres.

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

Remote-URL-er for ulike miljøer

Bruk miljøvariabler i host-ens webpack-konfigurasjon eller manifest for å peke til remotes i staging- og produksjonsmiljøet.

// 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 for monorepoer

I et Nx-monorepo bygger og distribuerer nx affected bare MFE-ene som er endret, ikke alle – dermed sparer De CI-tid.

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

Kontrakttesting

Når en remote endrer API-et til en eksponert modul, slutter konsumentene å fungere. Kontrakttesting (Pact) kontrollerer at produsenten og konsumenten er enige om grensesnittet før distribusjon.

Canary-distribusjoner

Distribuer først en ny remote-versjon til en liten prosentandel av brukerne. Overvåk feilratene før De ruller den ut til alle brukere – dette reduserer konsekvensene av brytende endringer.

Strategi for tilbakerulling

Behold remoteEntry.js fra den forrige remote-versjonen på CDN-et. En manifestoppdatering som peker tilbake på den gamle versjonen, er alt som trengs for å rulle tilbake.

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

CDN-bufring for remote entries

Angi en kort TTL (eller ingen bufring) for remoteEntry.js, slik at host-er alltid henter den nyeste versjonen. Bruk lange TTL-er for versjonerte chunk-filer.

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

Smoke-tester etter distribusjon

Kjør en minimal Playwright-smoketest etter hver distribusjon for å kontrollere at remoten lastes inn og gjengis riktig i shell-ens kontekst.

Hurtigsjekk

Hva er den viktigste fordelen ved å bruke en versjonert manifestfil for remote-URL-er i stedet for å hardkode dem i host-ens webpack-konfigurasjon?

Besvar den i den interaktive leksjonen

Oppsummering

Hver MFE har sin egen CI-pipeline: test → bygg → last opp til CDN. Bruk versjonerte eller manifestbaserte remote-URL-er for å kunne rulle tilbake. Angi en kort TTL for remoteEntry.js slik at den nye versjonen hentes umiddelbart. I Nx-monorepoer bruker De nx affected for å bare distribuere endrede MFE-er.

Gratis å komme i gang

Lær deg React med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 88
Leksjoner: 324

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Uavhengig utrulling og CI-pipelines for MFE-er» gratis?

Ja – hele teksten i «Uavhengig utrulling og CI-pipelines for MFE-er» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av React Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i React Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Uavhengig utrulling og CI-pipelines for MFE-er»?

Sett opp separate CI/CD-pipelines, slik at hver mikrofrontend kan rulles ut uten koordinering. Du øver på React Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med React Academy?

Ingen tidligere erfaring er nødvendig. React Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.

Hvor lang tid tar leksjonen «Uavhengig utrulling og CI-pipelines for MFE-er»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne React Academy-leksjonen?

Ja. Alle React Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Mikrofrontend-konsepter og avveininger
Module Federation med Webpack 5
Delt state og ruting mellom MFE-er
Uavhengig utrulling og CI-pipelines for MFE-er

← Tilbake til React Academy