React Academy · Leçon

Déploiement indépendant et pipelines CI pour les MFE

Configurez des pipelines CI/CD séparés afin que chaque micro-frontend soit déployé sans coordination.

Leçon 4 sur 413 étapes

Déploiement indépendant et pipelines CI pour les MFE est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 4 leçons au total.

L’objectif : le déploiement indépendant

Chaque micro-interface doit être déployée indépendamment, sans coordination avec les autres équipes. Cela nécessite des dépôts distincts (ou Nx/Turborepo), des chaînes d’intégration continue distinctes et un hébergement distinct.

Stratégies de dépôt

Deux approches sont possibles : polydépôt (un dépôt par MFE, véritablement indépendant) et monodépôt (toutes les MFE dans un seul dépôt, avec des outils partagés et une intégration continue basée sur les projets affectés). Le monodépôt est souvent plus simple pour commencer.

Stratégie d’adresse d’entrée du module distant

Chaque MFE expose un fichier remoteEntry.js à une adresse prévisible. Déployez-le dans un chemin versionné ou utilisez un fichier manifeste pour une découverte dynamique.

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

Chaîne d’intégration GitHub Actions pour un module distant

Une chaîne d’intégration continue typique pour une micro-interface consiste à exécuter les tests, compiler, téléverser vers CDN et éventuellement avertir l’hôte de mettre à jour son manifeste.

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

Adresses de modules distants propres à l’environnement

Utilisez des variables d’environnement dans la configuration Webpack de l’hôte ou dans le manifeste pour pointer vers les modules distants de préproduction ou de production.

// 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}` },
});

Projets affectés avec Nx

Dans un monodépôt Nx, nx affected compile et déploie uniquement les MFE qui ont changé, et non toutes les MFE, ce qui réduit le temps d’intégration continue.

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

Tests de contrat

Lorsqu’un module distant modifie l’interface d’un module exposé, les consommateurs cessent de fonctionner. Les tests de contrat (Pact) vérifient que le producteur et le consommateur sont d’accord sur l’interface avant le déploiement.

Déploiements canari

Déployez d’abord la nouvelle version d’un module distant auprès d’un faible pourcentage d’utilisateurs. Surveillez le taux d’erreurs avant de la généraliser : cela réduit la portée des changements incompatibles.

Stratégie de restauration

Conservez sur le CDN le fichier remoteEntry.js de la version précédente du module distant. Il suffit de mettre à jour le manifeste pour pointer vers l’ancienne version et effectuer la restauration.

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

Mise en cache CDN des fichiers d’entrée distants

Définissez un TTL court (ou désactivez la mise en cache) pour remoteEntry.js afin que les hôtes récupèrent toujours la dernière version. Utilisez des TTL longs pour les fichiers de fragments versionnés.

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

Tests de fumée après déploiement

Exécutez un test de fumée Playwright minimal après chaque déploiement afin de vérifier que le module distant se charge et s’affiche correctement dans le contexte de l’application conteneur.

Vérification rapide

Quel est le principal avantage d’utiliser un fichier manifeste versionné pour les adresses des modules distants au lieu de les coder en dur dans la configuration Webpack de l’hôte ?

Réponds-y dans la leçon interactive

Récapitulatif

Chaque MFE possède sa propre chaîne d’intégration continue : tests → compilation → téléversement vers CDN. Utilisez des adresses de modules distants versionnées ou fondées sur un manifeste pour permettre la restauration. Définissez un TTL de mise en cache court sur remoteEntry.js pour récupérer immédiatement les mises à jour. Dans les monodépôts Nx, utilisez nx affected pour ne déployer que les MFE modifiées.

Gratuit pour commencer

Apprends React avec un tuteur IA — gratuit

Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.

Cours: 88
Leçons: 324

Commencer gratuitement Voir le cours complet

Questions Fréquemment Posées

La leçon « Déploiement indépendant et pipelines CI pour les MFE » est-elle gratuite ?

Oui — le texte complet de « Déploiement indépendant et pipelines CI pour les MFE » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Déploiement indépendant et pipelines CI pour les MFE » ?

Configurez des pipelines CI/CD séparés afin que chaque micro-frontend soit déployé sans coordination. Tu pratiques React Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer React Academy ?

Aucune expérience préalable n'est requise. React Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Déploiement indépendant et pipelines CI pour les MFE » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon React Academy ?

Oui. Chaque leçon React Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Concepts des micro-frontends et compromis
Fédération de modules avec Webpack 5
État partagé et routage entre MFE
Déploiement indépendant et pipelines CI pour les MFE

← Retour à React Academy