Anterior

Siguientes

Ejercicio: Modificación de la imagen y reimplementación de la aplicación web

Completado

En esta unidad, va a configurar la implementación continua para la aplicación web y crear un webhook que vincula con el registro que contiene la imagen de Docker. Después, va a realizar un cambio en el código fuente de una aplicación web y recompilará la imagen. Visitará nuevamente el sitio web que hospeda la aplicación web de ejemplo y comprobará que la versión más reciente se ejecute.

Nota:

En este ejercicio no se crea una tarea de Azure Container Registry. En su lugar, deberá recompilar manualmente la imagen de Docker para la aplicación de ejemplo. El webhook se abrirá cuando se cree la nueva imagen de Docker.

Configuración de la implementación continua y creación de un webhook

1. Vuelva a Azure Portal y seleccione la aplicación web. Aparece el panel App Service para la aplicación web.

2. En el panel de menús de la izquierda, en Implementación, seleccione Centro de implementación. Aparece el panel Centro de implementación para el servicio de la aplicación (aplicación web).

3. En la pestaña Configuración, en Configuración del registro, establezca Implementación continua en Activado y, después, seleccione Guardar en la barra de menús superior. En esta configuración se va a configurar un webhook que Container Registry puede usar para alertar a la aplicación web de que la imagen de Docker ha cambiado.

   

Actualización de la aplicación web y prueba del webhook

1. En Azure Cloud Shell, vaya a la carpeta dotnet/SampleWeb/Pages. Esta carpeta contiene el código fuente de las páginas HTML que se muestran por la aplicación web.

   cd ~/mslearn-deploy-run-container-app-service/dotnet/SampleWeb/Pages
   

2. Ejecute los siguientes comandos para reemplazar la página predeterminada en la aplicación web (Index.cshtml) por una nueva versión que tenga un elemento adicional en el control del carrusel. Estos comandos simulan el desarrollo continuo de la aplicación y agregan una nueva página al carrusel.

   mv Index.cshtml Index.cshtml.old
   mv Index.cshtml.new Index.cshtml
   

3. Ejecute el siguiente conjunto de comandos para recompilar la imagen para la aplicación web e insertarla en Container Registry. Reemplace <container_registry_name> por el nombre del registro. No olvide el . al final del segundo comando. Espere a que la compilación finalice.

   cd ~/mslearn-deploy-run-container-app-service/dotnet
   az acr build --registry <container_registry_name> --image webimage .
   

4. Vuelva a la página principal de Azure Portal. Seleccione el registro de contenedor en el área Recursos recientes. Aparecerá el panel Container Registry.

5. En el panel de menús de la izquierda, en Servicios, seleccione Webhooks. Aparece el panel Webhooks de la instancia de Container Registry.

6. Seleccione el webhook único de la lista. Aparecerá el panel Webhook de la instancia de Container Registry.

7. Fíjese en el registro del webhook que acaba de activarse en respuesta a la compilación y a la inserción realizada.

   

Prueba de la aplicación web de nuevo

1. Vaya a la aplicación web en el explorador. Si ha cerrado la pestaña anteriormente, puede dirigirse a la página Información general de la aplicación en Azure Portal y seleccionar Examinar. Habrá un retraso de arranque en frío mientras la aplicación web carga la nueva imagen de Container Registry.

2. Revise los elementos del control de carrusel. Tenga en cuenta que el control ahora contiene cuatro páginas. La nueva página se parece a la de la imagen siguiente:

   

La aplicación web se ha actualizado y se ha vuelto a implementar automáticamente a partir de la nueva imagen. El servicio webhook del registro ha notificado a la aplicación web que la imagen de contenedor se había modificado, lo que ha desencadenado una actualización.

1. En Azure Cloud Shell, vaya a la carpeta node/routes. Esta carpeta contiene el código fuente que genera las páginas que muestra la aplicación web.

   cd ~/mslearn-deploy-run-container-app-service/node/routes
   

2. Abra index.js en el editor de Cloud Shell.

   code index.js
   

3. En el editor, modifique el código para cambiar el valor de la propiedad title pasada a la vista de Express a Microsoft Learn.

   ...
   res.render('index', { title: 'Microsoft Learn' });
   ...
   

   Asegúrese de guardar el archivo cuando haya terminado.

4. En Cloud Shell, ejecute el siguiente conjunto de comandos para recompilar la imagen para la aplicación web e insertarla en Container Registry. Reemplace <container_registry_name> por el nombre del registro. No olvide el . al final del segundo comando. Espere a que la compilación finalice.

   cd ~/mslearn-deploy-run-container-app-service/node
   az acr build --registry <container_registry_name> --image webimage .
   

5. En el panel de menús de la izquierda, en Servicios, seleccione Webhooks. En el panel Webhooks del registro de contenedor, seleccione el webhook individual de la lista.

6. Fíjese en que hay un registro del webhook que acaba de activarse en respuesta a la compilación y a la inserción realizada.

   

Prueba de la aplicación web de nuevo

1. Vaya a la aplicación web en el explorador. Si ha cerrado la pestaña anteriormente, puede dirigirse a la página Información general de la aplicación web en Azure Portal y, en la barra de menús superior, seleccionar Examinar. Habrá un retraso de arranque en frío mientras la aplicación web carga la nueva imagen de Container Registry.

2. Tenga en cuenta que el contenido de la página ha cambiado para reflejar las actualizaciones realizadas en la imagen de contenedor.

   

La aplicación web se ha actualizado y se ha vuelto a implementar automáticamente a partir de la nueva imagen. El servicio webhook del registro ha notificado a la aplicación web que la imagen de contenedor se había modificado, lo que ha desencadenado una actualización.

Continuar