7. Deployment of Host and Remote App over Vercel | Microfrontend Communication | Amar Kumar Ram

Summary

En este video, Amar Kumar Ram guía a los espectadores a través del proceso de despliegue de una interfaz de usuario Angular en Versal, una plataforma que ofrece un servicio gratuito con ciertas limitaciones, como la ausencia de entornos ilimitados y la necesidad de conectar con un repositorio de GitHub para activar una tubería CI/CD. Se destaca la compatibilidad de Versal con más de 35 frameworks, incluyendo Angular, lo que es ideal para las aplicaciones desarrolladas en dicho lenguaje. La demostración incluye la creación de un proyecto en Versal, la conexión con repositorios de GitHub, la configuración de variables de entorno y la actualización de la URL de la aplicación remota para asegurar la comunicación entre la aplicación principal y la remota. Finalmente, se muestra la aplicación desplegada en producción y se invita a los espectadores a probarla y hacer preguntas en los comentarios.

Takeaways

• 🚀 Amar Kumar Ram está enseñando cómo desplegar una interfaz de usuario Angular en Versal utilizando la versión gratuita.
• 🔑 Versal ofrece un entorno de producción (prod) en su versión gratuita, sin entornos ilimitados que se encuentran en la versión Pro.
• 🤖 Se necesita conectar Versal con un repositorio de GitHub para activar automáticamente la canalización CI/CD.
• 🌐 Versal admite más de 35 frameworks, incluyendo Angular, lo cual es perfecto para las aplicaciones desarrolladas en este tutorial.
• 📝 Durante el proceso de registro, Versal pedirá que elijas un plan (en este caso, la versión gratuita) y conectará con la cuenta de GitHub.
• 🔄 Al hacer clic en el botón 'Import', Versal detectará automáticamente el framework y el nombre del proyecto.
• 🛠️ Se pueden configurar ajustes de compilación y salida, y definir variables de entorno, pero en la versión gratuita, las variables de entorno se aplican solo a producción.
• 🔄 Al hacer clic en 'Deploy', Versal mostrará el progreso de la implementación y, al finalizar, se puede ver una captura de pantalla de la aplicación desplegada.
• 🔗 Es importante actualizar la URL del código de la aplicación host para apuntar a la URL del dominio en lugar de localhost para que la aplicación remota se cargue correctamente.
• 📌 Al realizar cambios en la rama master de GitHub y empujarlos, Versal detectará automáticamente los cambios y desencadenará la canalización CI/CD para desplegarlos.
• 🔍 Se puede inspeccionar la página y la pestaña de red para ver los errores y ajustes necesarios para la comunicación entre la aplicación host y la aplicación remota.
• 🎉 Después de realizar los cambios y desplegar, se confirma que tanto la aplicación host como la aplicación remota están funcionando correctamente y se han desplegado en producción.

Q & A

¿Qué plataforma se utiliza para desplegar la aplicación front-end mencionada en el script?

Versal se utiliza para desplegar la aplicación front-end.

¿Cuál es la limitación principal de la versión gratuita de Versal en términos de entornos?

La versión gratuita de Versal no ofrece entornos ilimitados y solo proporciona el entorno de producción (prod).

¿Cómo se desencadena la canalización CI/CD en Versal?

La canalización CI/CD se desencadena automáticamente cuando Versal detecta un cambio en la rama maestra del repositorio de GitHub conectado.

¿Qué frameworks son compatibles con la versión gratuita de Versal?

La versión gratuita de Versal admite más de 35 frameworks, incluido Angular.

¿Cómo se conecta Versal con el repositorio de GitHub?

Después de registrarse en Versal, se conecta con GitHub haciendo clic en 'Continuar con GitHub' y completando el proceso de autenticación.

¿Qué información se proporciona para importar un proyecto desde GitHub?

Se hace clic en el botón 'Importar' y se seleccionan los repositorios deseados (host app y remote app) para importarlos a Versal.

¿Cómo se pueden ajustar los ajustes de compilación y salida de un proyecto en Versal?

Se pueden ajustar los ajustes de compilación y salida habilitando el botón 'Anular' y realizando los cambios necesarios.

¿Qué sucede si se agregan variables de entorno en la versión gratuita de Versal?

Las variables de entorno agregadas en la versión gratuita de Versal solo se agregarán para el entorno de producción.

¿Cómo se resuelve el problema de la aplicación host al intentar cargar la aplicación remote desde 'Local Host'?

Se actualiza la URL en el código de la aplicación host para apuntar al dominio correcto de la aplicación remote en lugar de 'Local Host'.

¿Qué sucede cuando se realiza un push de cambios a la rama maestra del repositorio de GitHub conectado a Versal?

Versal detecta automáticamente los cambios y desencadena la canalización CI/CD para desplegar los cambios nuevos.

¿Cómo se puede verificar si la comunicación entre la aplicación host y la aplicación remote funciona correctamente?

Se pueden realizar pruebas interactuando con los botones y controles de ambas aplicaciones para verificar que los cambios se reflejen correctamente de una a otra.

¿Dónde se proporcionará el enlace para probar la aplicación desplegada después del éxito del despliegue?

El enlace se proporcionará en la descripción del video para que los espectadores puedan probar la aplicación.