7. Deployment of Host and Remote App over Vercel | Microfrontend Communication | Amar Kumar Ram
Summary
TLDREn 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.
Outlines
🚀 Despliegue de la aplicación Angular con Versal
Amar Kumar Ram, creador del canal, introduce el tema del video: el despliegue de una interfaz de usuario de Angular utilizando Versal. Se menciona que se utilizará la versión gratuita de Versal, la cual tiene limitaciones como la falta de entornos ilimitados y solo ofrece un entorno de producción (PRD). Además, se destaca la necesidad de conectar Versal con el repositorio de GitHub para activar una tubería de CI/CD que desencadene automáticamente el proceso de despliegue cuando se realicen cambios en la rama maestra. Finalmente, se menciona que Versal es compatible con más de 35 frameworks, incluyendo Angular, lo que es ideal para la aplicación desarrollada en el canal.
🔗 Conexión de GitHub con Versal y despliegue
Se describe el proceso de registro en Versal y la conexión del repositorio de GitHub. Se detalla cómo importar proyectos desde GitHub y seleccionar aquellos que se desean desplegar. Se destaca que Versal detecta automáticamente el framework de Angular y permite ajustes en la configuración de compilación y salida. También se menciona la posibilidad de definir variables de entorno, aunque en la versión gratuita solo se aplican al entorno de producción. Seguidamente, se muestra el progreso del despliegue y la verificación de que la aplicación se ha desplegado correctamente. Se resalta la necesidad de actualizar la URL en el código para que la aplicación host pueda cargar la aplicación remota desplegada. Finalmente, se muestra cómo Versal detecta automáticamente los cambios en la rama maestra y desencadena la tubería de CI/CD para desplegar las actualizaciones. Se concluye con una demostración de la comunicación entre la aplicación host y la aplicación remota, y se ofrece el enlace para que el espectador pueda probar la aplicación desplegada.
Mindmap
Keywords
💡Versal
💡Despliegue
💡GitHub
💡CICD
💡Framework
💡Angular
💡Rama Master
💡Variables de entorno
💡Versión Gratuita
💡Aplicación Host
💡Aplicación Remote
Highlights
Amar Kumar Ram explains how to deploy a micro front end using Versal.
Versal's free version is used, which has limitations such as no unlimited environments.
Only the prod environment is available in the free package, meaning any deployment goes directly to production.
Versal needs to be connected with a GitHub repo to enable an automatic CI/CD pipeline.
Changes in the master branch of the connected GitHub repo will automatically trigger the CI/CD pipeline.
The free version of Versal supports over 35 frameworks, including Angular.
A step-by-step sign-up process is provided for connecting a GitHub repo with Versal.
Demonstration of deploying both a host application and a remote application on Versal.
The process includes selecting repos, importing projects, and configuring build and output settings.
Environment variables can be defined directly in Versal, but only for the production environment in the free version.
A successful deployment leads to a page showing the application screenshot and providing a link to the live site.
Testing the deployed remote application by increasing the counter value confirms its functionality.
Deployment of the host application involves creating a new project and importing the app into Versal.
An issue with loading the remote application from localhost is identified and resolved by updating the URL in the code.
After updating the URL and committing the changes, Versal automatically detects and deploys the new changes due to CI/CD.
The host application is tested to ensure that the communication between the host and remote applications is functioning correctly.
The video concludes with a demonstration that both applications have been successfully deployed on production.
Amar Kumar Ram provides the deployment URLs in the video description for viewers to test the applications.
The video encourages viewers to ask questions in the comments section if they have any queries.
Transcripts
[Music]
hello everyone this is Amar Kumar Ram
welcome back to my Channel today we are
going to understand how to deploy micr
front end that we have created in the
series before going into the repo let me
tell you that we are going to use versal
to deploy our code we are going to use
the free version of it so let's go to
the pricing
section here we can see the limitations
that we are not going to get un limited
environments that is in the pro package
so what environment we are going to get
in the free package we are going to get
only the prad environment so whatever we
will Deploy on versal it will directly
be deployed on prod second thing we need
to understand that we need to connect
versal with our GitHub repo so that
automatic cicd pipeline can be triggered
what I mean by that suppose we select
our Master Branch to be deployed then
versal will detect any change that will
be made in the master branch of our
connected repo and will trigger the cicd
pipeline automatically I'll come to that
when we'll do the deployment last thing
we need to understand is the free
version supports 35 Plus Frameworks
which includes angular also as we
developed our host application and
remote application in angular only we
are good to go with versel now let's go
through the sign up process on how to
connect our GitHub repo with versel but
before that let's have a look on our
GitHub repos so here I have an example
of multi repo where remote app and host
app are in separated repos now we will
deploy this host app and remote app over
versal and these are the same code that
we have done in this series till now now
let's connect this remote app and host
app repo with versal for that we'll
click on the signup button then the
portal will ask us to choose the plan
type and we will go with the free
version that is Hobby one also it will
ask to put our name so let's put our
name in my case it is Amar Kumar Ram
and we'll click on
continue on the next step it will ask to
connect our GitHub gitlab or bit bucket
whatever you use I'm using GitHub so
I'll click on continue with GitHub after
connecting with GitHub it will
authenticate you if you have enabled the
two steps verification in your GitHub
account after successful sign up it will
automatically redirect you to the
dashboard page where you can click on
the import button to import your project
as the description is ADD a repo from
your git provider so let's click on
import button on the next step it will
show all repos that I have over GitHub
among all I need to select only host app
and remote app because we are going to
work with those repo only I'll provide
the link of remote app and host app repo
Link in the description of this video so
that you can clone those project and
practice the deployment process now
let's click on the import button of host
app and remote app we'll start with
remote app
first after clicking on import button we
can see that versal has automatically
detected the framework that is angular
and our project name that is remote
iPhone app we also have an option to
change the root directory if needed by
clicking on the edit button in our case
it is not required so we'll proceed
further in the next step we have build
and output settings which we can change
by enabling the override button but in
our case we'll go with the default
settings that has been picked by versal
also if you have some environment
variables you can just directly defined
in this environment variable accordion
by putting the key and the value and
clicking on the add button please note
that since it's a free version so
whatever environment variables you will
add it will be added for the production
only but if you want to add environment
variables for different environments
such as Dave QA uat perf Etc then you
need to go and upgrade your plan on
versus I do not have any environment
variable so I'll just minimize this and
click on deploy so it will show us that
the deployment progress status currently
project is in the build phase after
successful deployment we will land on
this page where a screenshot of our
application will be shown here and we
can also check this website by clicking
on the image itself so let's click on
this and we can see that our remote
application has been successfully
deployed I'll provide this link in the
description of the video so that you can
also test it as we know that in our
remote application if I click on the
counter button then the counter value
will increase so let's test it if I
click on the counter it is increasing
the counter value so everything is
working fine here now let's deploy the
host application for that we'll go to
the versal we'll click on continue to
dashboard or we can click on this arrow
button and hover on Amar Kumar Ram's
project then it will show me the
projects that have been deployed
currently I have only one project that
is remote app which is deployed our
production now we will create another
project so let's click on create project
now we'll import the host application
here and keeping the default settings
we'll click on deploy button again now
deployment process has been started we
can see the logs by opening the building
phase we can see the logs
here so our host application is
successfully deployed however the
screenshot is not available maybe
because it is loading the remote
application ad hoc so let's click on the
screenshot of it
as we can see our host application is
rendering successfully where we have
this button control MF counter value but
we are not able to load the remote
application that has been deployed here
on remote hyphen app hyph ior doval
doapp it is because we are trying to
face the remote application from The
Local Host so we need to update the URL
in the code and commit it again let me
show you how it is failing for that I'll
inspect this page P we'll go to the
network Tab and then if I reload the
page we can see that there is a remote
application.js
file which is hitting on Local Host 4300
but it should hit this domain that is
remote hyph app hyph i.v. app and after
that we can have forward slash remote
entry. JS if I press enter we can see
that remote entry has been successfully
created at the remote side so we need to
point to this URL inad of Local Host so
let's go to the host app code and do the
necessary change and see if that is
working fine or not so this is our host
application here we'll go to the source
folder then app folder then app hyph
routing. module. TS file here we are
pointing to Local Host 4300 and we can
also see that we are on the master
branch of our host app repo that is in
the GitHub now let's update this remote
entry URL for that we'll copy this UR
URL and paste it here in the remote
entry value now we'll save the file now
we'll open the G bash and in the changes
section we can see that there is a
change in the app routing module file
which will add and put in the staged
changes after that we'll commit
it remote app URL changed now before
pushing the new changes into the master
branch of this host app repo I just want
you to recall one important feature of
versal that is as soon as we'll push
changes in the master Branch it will be
detected by versal and automatic cicd
pipeline will be triggered to deploy the
new changes to observe that let's go to
the versal portal here we'll click on
the continue to dashboard button in the
production deployment section I can see
that the last deployment is done on host
app repo and to trigger the automatic
cicd pipeline it is saying that to
update your production deployment push
to the master Branch so let's try it
I'll push the code
now
code has been pushed and we can see on
versal that it has detected the changes
and the comment that I have made is
remote app URL change is now picked by
versal and it is building the changes
now so I do not need to do anything
versal will take care everything if your
GitHub repo is connected with the versal
so new changes has been deployed
successfully let's check over the portal
now I'll refresh the
page and we can see that we are able to
load the remote application and remote
entry. JS file is coming from remote
hyphen appy
i.v. apppp SL remote entry. JS now we
will test the host application and
remote application whether it is working
as expected or not as we know from our
development Journey if I click on the
counter button it will increase the
counter value so let's click on the
counter button and it is increasing the
value of counter so I have increased
till three now if I click on control MF
counter value it should increase the
counter value to four and it is working
fine see if I clicking again and again
it is increasing the counter value so
that is the event trigger from the host
application to the remote application
now we'll do the vice versa so if I type
anything and click outside the same text
will appear in place of this text that
is this is host application so I'll
write here we have
successfully deployed the code and I'll
click outside so the text in the host
application has been changed now and by
this we can confirm that the
communication between the host
application and the remote application
is working perfectly fine and we have
successfully deployed the host
application and the remote application
on production now I will paste this URL
in the description of the video so that
you can also test it and if you have any
query then please do ask in the comment
section so let's meet in the next video
till that be happy take care signing
[Music]
off
関連動画をさらに表示
2. Installed Custom Builder Package in Multi Repo Angular Project | Micro-frontend | Amar Kumar Ram
Dockerize an Angular Application using Nginx
Securing Swagger API Documentation with an API Key (JWT) | FREE COURSE
[MOOC] - Apps para dispositivos móviles (ed. 2016) - iOS. Desarrollo de una App
Road to Module Federation | Sumit Arora & Abdella Ali | ng-conf 2023
🌏 Cómo Hacer CONEXIÓN via SSH Desde WINDOWS a LINUX ✅
5.0 / 5 (0 votes)