React Academy · Lektion

Oberoende driftsättning och CI-pipelines för MFE:er

Konfigurera separata CI/CD-pipelines så att varje mikrofrontend kan driftsättas utan samordning.

Lektion 4 av 413 steg

Oberoende driftsättning och CI-pipelines för MFE:er är en gratis lektion i React Academy på CoddyKit. Detta är lektion 4 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för React Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Academy innehåller totalt 4 lektioner.

Målet: oberoende driftsättning

Varje microfrontend ska kunna driftsättas oberoende utan samordning med andra team. Det kräver separata kodarkiv (eller Nx/Turborepo), separata CI-pipelines och separat hosting.

Strategier för kodarkiv

Det finns två tillvägagångssätt: Polyrepo (ett kodarkiv per MFE, verkligt oberoende) och Monorepo (alla MFE:er i ett kodarkiv, med delade verktyg och CI baserad på berörda projekt). Monorepo är ofta enklare att börja med.

Strategi för remoteEntry-URL

Varje MFE exponerar en remoteEntry.js på en förutsägbar URL. Driftsätt till en versionshanterad sökväg eller använd en manifestfil för dynamisk upptäckt.

// 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 för en remote

En typisk CI-pipeline för en microfrontend är: testa, bygg, ladda upp till CDN och meddela eventuellt host-appen att dess manifest ska uppdateras.

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

Miljöspecifika remote-URL:er

Använd miljövariabler i host-appens webpack-konfiguration eller manifest för att hänvisa till remotes i staging respektive produktion.

// 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 för monorepon

I ett Nx-monorepo bygger och driftsätter nx affected endast de MFE:er som har ändrats, inte alla — vilket sparar CI-tid.

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

Kontraktstestning

När en remote ändrar API:t för en exponerad modul går konsumenterna sönder. Kontraktstestning (Pact) verifierar att producenten och konsumenten är överens om gränssnittet innan driftsättning.

Kanarieutrullningar

Driftsätt först en ny remote-version till en liten andel av användarna. Övervaka felfrekvensen innan versionen rullas ut till alla — det minskar konsekvenserna av inkompatibla ändringar.

Strategi för återställning

Behåll den tidigare remote-versionens remoteEntry.js på CDN:et. Det enda som behövs för att återställa versionen är att uppdatera manifestet så att det pekar tillbaka på den gamla versionen.

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

CDN-cachning för remote entries

Ange en kort TTL (eller ingen cachning) för remoteEntry.js så att hosts alltid hämtar den senaste versionen. Använd långa TTL-värden för versionshanterade chunk-filer.

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

Smoke-tester efter driftsättning

Kör ett minimalt Playwright-smoketest efter varje driftsättning för att verifiera att remoten läses in och renderas korrekt i shell-appens kontext.

Snabbtest

Vilken är den viktigaste fördelen med att använda en versionshanterad manifestfil för remote-URL:er i stället för att hårdkoda dem i host-appens webpack-konfiguration?

Besvara frågan i den interaktiva lektionen

Sammanfattning

Varje MFE har sin egen CI-pipeline: testa → bygg → ladda upp till CDN. Använd versionshanterade eller manifestbaserade remote-URL:er för att möjliggöra återställning. Ange en kort cache-TTL för remoteEntry.js så att nya versioner hämtas omedelbart. Använd nx affected i Nx-monorepon för att endast driftsätta ändrade MFE:er.

Gratis att börja

Lär dig React med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 88
Lektioner: 324

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Oberoende driftsättning och CI-pipelines för MFE:er” gratis?

Ja – hela texten till ”Oberoende driftsättning och CI-pipelines för MFE:er” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i React Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i React Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Oberoende driftsättning och CI-pipelines för MFE:er”?

Konfigurera separata CI/CD-pipelines så att varje mikrofrontend kan driftsättas utan samordning. Ni övar på React Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig React Academy?

Du behöver inga förkunskaper. Utbildningen i React Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.

Hur lång tid tar lektionen ”Oberoende driftsättning och CI-pipelines för MFE:er”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här React Academy-lektionen?

Ja. Varje React Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

Mikrofrontend-koncept och avvägningar
Module Federation med Webpack 5
Delad state och routing mellan MFE:er
Oberoende driftsättning och CI-pipelines för MFE:er

← Tillbaka till React Academy