Despliegue independiente y pipelines de CI para MFEs
Configure pipelines de CI/CD independientes para que cada micro-frontend se despliegue sin coordinación.
Despliegue independiente y pipelines de CI para MFEs es una lección gratuita de React Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 4 lecciones en total.
El objetivo: despliegue independiente
Cada micro-frontend debe poder desplegarse de forma independiente, sin coordinación con otros equipos. Para ello se necesitan repositorios independientes (o Nx/Turborepo), canalizaciones de CI independientes y alojamiento independiente.
Estrategias de repositorio
Hay dos enfoques: Polyrepo (un repositorio por MFE, verdaderamente independiente) y Monorepo (todos los MFE en un repositorio, con herramientas compartidas y CI basada en los proyectos afectados). El monorepo suele ser más sencillo para empezar.
Estrategia de URL del remote entry
Cada MFE expone un remoteEntry.js en una URL predecible. Despliéguelo en una ruta versionada o utilice un archivo de manifiesto para descubrirlo dinámicamente.
// 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' }Canalización de GitHub Actions para un remote
Una canalización de CI habitual para un micro-frontend consiste en probar, compilar, subir a una CDN y, opcionalmente, notificar al host para que actualice su manifiesto.
# .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/ --deleteURL de remotes específicas del entorno
Utilice variables de entorno en la configuración de webpack del host o en el manifiesto para apuntar a los remotes de staging o de producción.
// 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 para monorepos
En un monorepo de Nx, nx affected solo compila y despliega los MFE que han cambiado, no todos, lo que ahorra tiempo de CI.
# Only build MFEs affected by the current PR
npx nx affected:build --base=origin/main
npx nx affected:test --base=origin/mainPruebas de contrato
Cuando un remote cambia la API de un módulo expuesto, los consumidores dejan de funcionar. Las pruebas de contrato (Pact) verifican que el productor y el consumidor coinciden en la interfaz antes del despliegue.
Despliegues canario
Despliegue primero la nueva versión de un remote a un pequeño porcentaje de usuarios. Supervise las tasas de error antes de ampliarlo a todos los usuarios; así se reduce el alcance de los cambios incompatibles.
Estrategia de reversión
Conserve en la CDN el remoteEntry.js de la versión anterior del remote. Para revertir, basta con actualizar el manifiesto para que apunte de nuevo a la versión antigua.
// Rollback: update manifest to previous version
await updateManifest({ products: 'https://cdn/products/1.1.0/remoteEntry.js' });Caché de CDN para remote entries
Establezca un TTL corto (o desactive la caché) para remoteEntry.js, de modo que los hosts siempre obtengan la versión más reciente. Utilice TTL largos para los archivos de chunks versionados.
# CloudFront cache behavior:
# remoteEntry.js → Cache-Control: no-cache, max-age=0
# *.chunk.js → Cache-Control: max-age=31536000, immutablePruebas smoke posteriores al despliegue
Ejecute una prueba smoke mínima con Playwright después de cada despliegue para verificar que el remote se carga y se renderiza correctamente en el contexto de la shell.
Comprobación rápida
¿Cuál es la principal ventaja de utilizar un archivo de manifiesto versionado para las URL de los remotes en lugar de codificarlas directamente en la configuración de webpack del host?
Resumen
Cada MFE tiene su propia canalización de CI: probar → compilar → subir a la CDN. Utilice URL de remotes versionadas o basadas en manifiestos para poder revertir los cambios. Establezca un TTL de caché corto en remoteEntry.js para obtener las actualizaciones de inmediato. En los monorepos de Nx, use nx affected para desplegar únicamente los MFE modificados.
Preguntas frecuentes
¿La lección «Despliegue independiente y pipelines de CI para MFEs» es gratis?
Sí — el texto completo de «Despliegue independiente y pipelines de CI para MFEs» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Despliegue independiente y pipelines de CI para MFEs»?
Configure pipelines de CI/CD independientes para que cada micro-frontend se despliegue sin coordinación. Practicas React Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar React Academy?
No se requiere experiencia previa. React Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Despliegue independiente y pipelines de CI para MFEs»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de React Academy?
Sí. Cada lección de React Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Conceptos y compromisos de los micro-frontends
- Module Federation con Webpack 5
- Estado compartido y routing entre MFEs
- Despliegue independiente y pipelines de CI para MFEs