¿Cómo usé AWS Amplify para desplegar mis microfrontends?
-
Primero empecemos hablando sobre ¿qué son los microfrontends?
Es la misma idea que existe en el backend con los microservicios pero trasladadas al front; es decir, tendremos BD, backend y front independientes.
Por ejemplo si tuviéramos una tienda de e-commerce tendríamos las siguientes aplicaciones:
Para el registro/login del usuario: sería una micro-aplicación que puede estar en React
Para el producto: sería una micro-aplicación que puede estar en Angular
Para el carrito de compras: sería una micro-aplicación que puede estar en Vue
Para el checkout: esta micro-aplicación podría estar en React
¿Que ventajas nos ofrecen los microfrontends?
Es ideal porque te permite reutilizar los microfrontends en otras aplicaciones, manteniendo un solo código.
Cada microfrontend tiene su propio repositorio de código, su propio archivo package.json y su propia configuración de implementación de compilación. De esta manera, cada microfrontend tiene un proceso de compilación independiente y una implementación/CI independiente. Lo que nos brinda tiempos de construcción rápidos.
En un futuro todo el frontend en las grandes empresas, con equipos alrededor del mundo irán usando este enfoque, para aplicaciones muy grandes que requiere que diferentes equipos hagas diferentes cosas
¿Cómo orquestar los microfrontends?
Para esta solución se ha usado Single SPA
Single SPA es un framework que trabaja como orquestador de microfronts, gestiona tu microfronts con frameworks y librerías como React, Vue, y Angular, lo que nos permite usarlos en la misma página sin tener tener que actualizarla.
El proyecto
Ahora que ya tenemos más claro, que son los microfronts, vamos a comentar sobre la solución de esta oportunidad: es un proyecto que consume algunas API’s para mostrar información de personajes de Rick and Morty y Harry Potter.
Para los microfrontends se utilizó React y se crearon 5 microfrontends, los cuales se alojan en repos diferentes, los cuales los puedes descargar desde los siguientes enlaces:
Ahora para su despliegue utilice AWS Amplify
¿Qué es AWS Amplify?
Es un framework que nos ayuda en todo el ciclo de vida de nuestras aplicaciones en la nube.
Tiene diferentes componentes que podemos usar, en este caso usaremos el componente de hosting. El cual nos permitirá desplegar todos los micro-frontends en S3 y CloudFront.
¿Cómo desplegar nuestro microfrontends usando AWS Amplify?
Para la configuración podemos seguir la documentación
Una vez listo, podemos continuar con nuestro siguiente paso para crear los recursos necesarios para desplegar nuestra aplicación con AWS Amplify
Primero nos ubicaremos en la carpeta de nuestro microfront padre (fr-shell) y ejecutaremos el siguiente comando:
amplify init
El cual nos pedirá ingresar información sobre el proyecto. Podemos revisar más detalles en la documentación
Tomará un tiempo hasta que el despliegue de los recursos termine. Luego de ello tendremos una aplicación creada dentro del panel de AWS Amplify.
Así como una pila de CloudFormation con un bucket S3 con archivos de metadatos de Amplify y dos roles de IAM
El comando anterior, nos crea esta estructura de proyecto
Como mencione anteriormente, AWSAmplify nos permite agregar hosting, para ello dentro de nuestro proyecto (fr-shell) ejecutaremos el siguiente comando:
amplify add hosting
Y seleccionaremos la opción de Amazon CloudFront and S3
Nos pedirá ingresar el nombre de nuestro bucket S3. Y una vez completado, la estructura de nuestro proyecto se actualizará con una nueva carpeta con el nombre hosting dentro de la carpeta amplify/backend.
Este hosting que hemos agregado, permitirá acceder al bucket S3 solo a través de la distribución de CloudFront, mediante la creación de una Identidad de acceso de origen (OAI) de CloudFront.
Ahora queda publicar nuestros cambios
amplify publish
Este comando además de subir nuestros cambios al bucket S3 y crear la distribución de CloudFront, también genera el build del proyecto.
Una vez completado el proceso, nos arrojará el endpoint de la distribución de CloudFront que usaremos para acceder a nuestro sitio web.
Pero eso no termina aquí, necesitamos desplegar los otros microfrontends que tenemos (en total son 5). Así que repetiremos los pasos previamente para cada uno de los microfrontends:
amplify init
amplify add hosting
amplify publish
Tomaremos nota de cada uno de los endpoints de la distribuciones de CloudFront de cada microfrontend.
Luego en el archivo fr-shell/src/index.ejs pueden configurar sus entornos, en mi caso solo tengo local y prod, por ese motivo es que le pondré un else y el valor sería el endpoint de la distribución de CloudFront que corresponda.
Una vez hecho el cambio haremos nuevamente un amplify publish sobre nuestro microfrontend fr-shell
Como necesitamos acceder a archivos distribuidos en CloudFront directamente en el código, debemos configurar los ajustes de CORS, para ello entraremos en cada distribución de CloudFront y haremos la siguiente configuración:
¡Listo! Podemos acceder a nuestros microfrontends desplegados, usando el endpoint de fr-shell. Teniendo el siguiente resultado
To cloud and beyond! 🚀
