React Academy · Lektion

Uafhængig deployment og CI-pipelines til MFE’er

Opsæt separate CI/CD-pipelines, så hver mikrofrontend kan deployes uden koordinering.

Lektion 4 af 413 trin

Uafhængig deployment og CI-pipelines til MFE’er er en gratis React Academy-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i React Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. React Academy-kurset indeholder 4 lektioner i alt.

Målet: Uafhængig udrulning

Hver mikrofrontend bør kunne udrulles uafhængigt uden koordinering med andre teams. Det kræver separate repositories (eller Nx/Turborepo), separate CI-arbejdsgange og separat drift.

Strategier for repositories

Der er to tilgange: Polyrepo (ét repository pr. MFE, ægte uafhængighed) og Monorepo (alle MFE'er i ét repository med delte værktøjer og CI baseret på berørte projekter). Monorepo er ofte enklere at komme i gang med.

Strategi for URL'er til fjernappens entry-fil

Hver MFE eksponerer en remoteEntry.js på en forudsigelig URL. Udrul til en versionsstyret sti, eller brug en manifestfil til dynamisk registrering.

// 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-arbejdsgang for en fjernapp

En typisk CI-arbejdsgang for en mikrofrontend er: test, byg, overfør til CDN og giv eventuelt værtsappen besked om at opdatere sit manifest.

# .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øspecifikke URL'er til fjernapps

Brug miljøvariabler i værtsappens webpack-konfiguration eller manifest til at pege på fjernapps i testmiljøet eller produktionen.

// 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 til monorepos

I et Nx-monorepo bygger og udruller nx affected kun de MFE'er, der er ændret, i stedet for dem alle — det sparer CI-tid.

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

Kontrakttest

Når en fjernapp ændrer API'et for et eksponeret modul, går forbrugerne i stykker. Kontrakttest (Pact) kontrollerer, at producenten og forbrugeren er enige om grænsefladen, før modulet udrulles.

Canary-udrulninger

Udrul først en ny version af fjernappen til en lille procentdel af brugerne. Overvåg fejlraten, før du udruller den til alle brugere — det begrænser omfanget af fejl ved ændringer, der bryder noget.

Tilbagerulningsstrategi

Behold den tidligere version af fjernappens remoteEntry.js på CDN'et. Det eneste, der kræves for at rulle tilbage, er en manifestopdatering, der peger på den gamle version.

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

Cachelagring af fjernappens entry-filer på CDN

Indstil en kort TTL (eller ingen cache) på remoteEntry.js, så værtsapps altid henter den nyeste version. Brug lange TTL-værdier til versionsstyrede chunk-filer.

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

Smoke-tests efter udrulning

Kør en minimal Playwright-smoketest efter hver udrulning for at kontrollere, at fjernappen indlæses og gengives korrekt i skallen.

Hurtigt tjek

Hvad er den vigtigste fordel ved at bruge en versionsstyret manifestfil til fjernappens URL'er i stedet for at hardkode dem i værtsappens webpack-konfiguration?

Besvar den i den interaktive lektion

Opsummering

Hver MFE har sin egen CI-arbejdsgang: test → byg → overfør til CDN. Brug versionsstyrede eller manifestbaserede URL'er til fjernapps, så du kan rulle tilbage. Indstil en kort cache-TTL på remoteEntry.js, så den nyeste version hentes med det samme. Brug nx affected i Nx-monorepos til kun at udrulle ændrede MFE'er.

Gratis at komme i gang

Lær React med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 88
Lektioner: 324

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Uafhængig deployment og CI-pipelines til MFE’er” gratis?

Ja — hele teksten til “Uafhængig deployment og CI-pipelines til MFE’er” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af React Academy-kurset, skal du opgradere til CoddyKit PRO. React Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Uafhængig deployment og CI-pipelines til MFE’er”?

Opsæt separate CI/CD-pipelines, så hver mikrofrontend kan deployes uden koordinering. Du øver dig i React Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på React Academy?

Der kræves ingen tidligere erfaring. React Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 4 af 4.

Hvor lang tid tager lektionen “Uafhængig deployment og CI-pipelines til MFE’er”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne React Academy-lektion?

Ja. Alle React Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

Mikrofrontend-koncepter og afvejninger
Module Federation med Webpack 5
Delt tilstand og routing mellem MFE’er
Uafhængig deployment og CI-pipelines til MFE’er

← Tilbage til React Academy