Ejercicio: Desplegar una Aplicación Federada en la Nube

Tipo de lección: Video

Concepto clave

Desplegar una aplicacion federada en la nube implica gestionar multiples micro-frontends independientes que se ensamblan en tiempo de ejecucion. Imagina una ciudad donde cada edificio (micro-frontend) tiene su propio equipo de construccion y mantenimiento, pero todos comparten servicios publicos (infraestructura en la nube). La clave es coordinar el despliegue para que los cambios en un edificio no afecten a los demas, manteniendo la ciudad funcional.

En este contexto, el Module Federation de Webpack permite que cada micro-frontend se compile y despliegue por separado, mientras que un host o contenedor los une dinamicamente. Esto es similar a como una plataforma de streaming carga peliculas desde diferentes servidores: cada pelicula (micro-frontend) esta almacenada en su propio servidor, pero el usuario ve una interfaz unificada. La nube proporciona escalabilidad y resiliencia, esencial para aplicaciones empresariales.

Como funciona en la practica

El proceso comienza con la configuracion de Webpack en cada micro-frontend para exponer modulos federados. Luego, se despliegan en servicios en la nube como AWS S3, Google Cloud Storage o Azure Blob Storage, con CDN para optimizar la entrega. El host se despliega por separado y referencia las URLs de los micro-frontends en tiempo de ejecucion.

Paso a paso: primero, compila cada micro-frontend con Module Federation habilitado, generando archivos estaticos. Segundo, sube esos archivos a buckets en la nube, configurando politicas de CORS y cache. Tercero, actualiza el host con las nuevas URLs de los micro-frontends. Cuarto, prueba la integracion en un entorno de staging antes de produccion. Esto asegura que los cambios sean graduales y controlados.

Codigo en accion

Configuracion de Webpack para un micro-frontend (product-list) que expone un modulo:

// webpack.config.js para product-list
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  output: {
    publicPath: 'https://cdn.tudominio.com/product-list/', // URL en la nube
    uniqueName: 'productList'
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'productList',
      filename: 'remoteEntry.js',
      exposes: {
        './ProductList': './src/ProductList.jsx'
      },
      shared: ['react', 'react-dom']
    })
  ]
};

Configuracion del host que consume el micro-frontend:

// webpack.config.js para el host
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'host',
      remotes: {
        productList: 'productList@https://cdn.tudominio.com/product-list/remoteEntry.js'
      },
      shared: ['react', 'react-dom']
    })
  ]
};

Errores comunes

• Versionado inconsistente: Desplegar micro-frontends con versiones incompatibles de dependencias compartidas (ej., React 17 vs 18). Solucion: Usar shared en Module Federation para forzar una version unica o usar rangos semanticos.
• Fallas de CORS: No configurar politicas de CORS en los buckets de la nube, bloqueando las peticiones del host. Solucion: Asegurar que el origen del host este permitido en la configuracion del bucket.
• Cache agresivo: La CDN cachea versiones antiguas de remoteEntry.js, impidiendo actualizaciones. Solucion: Usar estrategias de cache-busting como hashes en los nombres de archivo o headers de cache-control.
• Despliegue no atomico: Actualizar el host antes que los micro-frontends, causando errores de referencia. Solucion: Implementar un despliegue coordinado con scripts o herramientas como CI/CD pipelines.
• Monitoreo insuficiente: No rastrear errores de carga de micro-frontends en produccion. Solucion: Integrar herramientas como Sentry o logs en la nube para detectar fallos rapidamente.

Checklist de dominio

1. Configurar Module Federation en todos los micro-frontends con publicPath apuntando a URLs en la nube.
2. Desplegar archivos estaticos a buckets en la nube con CORS habilitado y CDN configurado.
3. Actualizar el host con las URLs correctas de los remotes y probar en un entorno de staging.
4. Implementar versionado semantico para dependencias compartidas y micro-frontends.
5. Establecer una estrategia de cache que permita actualizaciones sin downtime.
6. Automatizar el despliegue con CI/CD para garantizar consistencia.
7. Configurar monitoreo y alertas para errores de carga de micro-frontends en produccion.

Desplegar un micro-frontend en AWS S3 y consumirlo desde un host

En este ejercicio, desplegaras un micro-frontend simple en AWS S3 y lo integraras en un host local para simular un entorno de produccion.

1. Prepara un micro-frontend basico (ej., un componente React que muestra "Hola desde Micro-frontend") con Module Federation configurado para exponerlo.
2. Compila el micro-frontend y sube los archivos generados (incluyendo remoteEntry.js) a un bucket de S3. Configura el bucket para acceso publico y CORS que permita origenes locales (http://localhost:3000).
3. Crea un host simple (una app React) que use Module Federation para consumir el micro-frontend desde la URL de S3.
4. Ejecuta el host localmente y verifica que el micro-frontend se cargue correctamente desde la nube.
5. Modifica el micro-frontend, recompila, sube la nueva version a S3, y actualiza el host para reflejar los cambios sin recargar la pagina (usando hot reload si es posible).

Pistas

• Usa AWS CLI o la consola de S3 para subir archivos rapidamente.
• Asegurate de que la publicPath en la configuracion de Webpack apunte a la URL de tu bucket de S3.
• Prueba con herramientas como ngrok para exponer localmente si necesitas HTTPS.

Evalua tu comprension

Completa el quiz interactivo de arriba para ganar XP.