React Academy · Lektion

Unabhängiges Deployment und CI-Pipelines für MFEs

Richten Sie separate CI/CD-Pipelines ein, damit jedes Micro-Frontend ohne Abstimmung bereitgestellt werden kann.

Lektion 4 von 413 Schritte

Unabhängiges Deployment und CI-Pipelines für MFEs ist eine kostenlose React Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des React Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.

Das Ziel: unabhängige Bereitstellung

Jedes Micro-Frontend sollte unabhängig bereitgestellt werden können, ohne Abstimmung mit anderen Teams. Dafür sind separate Repositories (oder Nx/Turborepo), separate CI-Pipelines und separates Hosting erforderlich.

Repository-Strategien

Es gibt zwei Ansätze: Polyrepo (ein Repository pro MFE, wirklich unabhängig) und Monorepo (alle MFEs in einem Repository, gemeinsame Werkzeuge mit CI auf Basis betroffener Projekte). Mit einem Monorepo ist der Einstieg oft einfacher.

Strategie für Remote-Entry-URLs

Jedes MFE stellt eine remoteEntry.js unter einer vorhersehbaren URL bereit. Stellen Sie es unter einem versionierten Pfad bereit oder verwenden Sie eine Manifest-Datei zur dynamischen Ermittlung.

// 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 ein Remote

Eine typische CI-Pipeline für ein Micro-Frontend: testen, erstellen, in ein CDN hochladen und den Host optional über die Aktualisierung seines Manifests informieren.

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

Umgebungsspezifische Remote-URLs

Verwenden Sie Umgebungsvariablen in der Webpack-Konfiguration oder im Manifest des Hosts, um auf Remotes für Staging bzw. Produktion zu verweisen.

// 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 Monorepos

In einem Nx-Monorepo erstellt und veröffentlicht nx affected nur die geänderten MFEs und nicht alle – dadurch wird CI-Zeit eingespart.

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

Contract Testing

Wenn ein Remote die API eines bereitgestellten Moduls ändert, schlagen Consumer fehl. Contract Testing (Pact) überprüft vor der Bereitstellung, dass Producer und Consumer dieselbe Schnittstelle verwenden.

Canary-Bereitstellungen

Stellen Sie eine neue Remote-Version zunächst für einen kleinen Prozentsatz der Benutzer bereit. Überwachen Sie die Fehlerraten, bevor Sie sie für alle Benutzer freigeben – so wird der Wirkungsradius fehlerhafter Änderungen reduziert.

Rollback-Strategie

Behalten Sie die remoteEntry.js der vorherigen Remote-Version im CDN. Für ein Rollback reicht eine Manifest-Aktualisierung, die auf die alte Version verweist.

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

CDN-Caching für Remote-Entries

Setzen Sie für remoteEntry.js eine kurze TTL (oder deaktivieren Sie den Cache), damit Hosts immer die neueste Version übernehmen. Verwenden Sie lange TTLs für versionierte Chunk-Dateien.

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

Smoke-Tests nach der Bereitstellung

Führen Sie nach jeder Bereitstellung einen minimalen Playwright-Smoke-Test aus, um zu überprüfen, dass das Remote im Kontext der Shell korrekt geladen und gerendert wird.

Kurztest

Was ist der entscheidende Vorteil einer versionierten Manifest-Datei für Remote-URLs gegenüber fest codierten URLs in der Webpack-Konfiguration des Hosts?

Beantworte es in der interaktiven Lektion

Zusammenfassung

Jedes MFE verfügt über eine eigene CI-Pipeline: testen → erstellen → in ein CDN hochladen. Verwenden Sie versionierte oder manifestbasierte Remote-URLs, um Rollbacks zu ermöglichen. Setzen Sie für remoteEntry.js eine kurze Cache-TTL, damit Hosts die Änderungen sofort übernehmen. Verwenden Sie in Nx-Monorepos nx affected, um nur geänderte MFEs bereitzustellen.

Kostenlos starten

Lerne React mit einem KI-Tutor — kostenlos

Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.

Kurse: 88
Lektionen: 324

Kostenlos lernen Den vollständigen Kurs ansehen

Häufig gestellte Fragen

Ist die Lektion „Unabhängiges Deployment und CI-Pipelines für MFEs“ kostenlos?

Ja — der vollständige Text von „Unabhängiges Deployment und CI-Pipelines für MFEs“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des React Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Unabhängiges Deployment und CI-Pipelines für MFEs“?

Richten Sie separate CI/CD-Pipelines ein, damit jedes Micro-Frontend ohne Abstimmung bereitgestellt werden kann. Du übst React Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um React Academy zu starten?

Keine Vorkenntnisse erforderlich. React Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Unabhängiges Deployment und CI-Pipelines für MFEs“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser React Academy-Lektion Code schreiben und ausführen?

Ja. Jede React Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

Micro-Frontend-Konzepte und Abwägungen
Module Federation mit Webpack 5
Gemeinsamer State und Routing zwischen MFEs
Unabhängiges Deployment und CI-Pipelines für MFEs

← Zurück zu React Academy