Ejercicio: Ejecución y depuración de aplicaciones de Azure Functions y Angular

Completado

En este ejercicio, ejecutará y depurará la aplicación de Angular y la aplicación de Azure Functions juntas. Establecerá puntos de interrupción en el código de Angular que muestra la aplicación web en el explorador y en el código de Functions que captura y representa las vacaciones. Después, usará los puntos de interrupción de Angular y Functions para recorrer el código de Functions y Angular con el depurador.

Nota:

Los archivos .vscode/launch.json y .vscode/tasks.json son esenciales para la experiencia de depuración de este proyecto.

Inicio de Azurite para el almacenamiento de funciones locales

Azure Functions usa Azure Storage para almacenar sus datos. Puede usar Azurite, un emulador local para Azure Storage, para ejecutar la aplicación de Functions localmente. Azurite proporciona un entorno local que emula Blob service, Queue service y Table service de Azure para tareas de desarrollo.

1. Abra un nuevo terminal en Visual Studio Code.

2. Ejecute el comando siguiente para iniciar Azurite.

   npx -y azurite --location ./.azurite/data --debug ./.azurite/logs
   

   Este comando instala Azurite y lo inicia en el directorio actual. La marca --location especifica la ubicación de los datos, y la marca --debug especifica la ubicación de los registros.

3. Abra el archivo .gitignore y agregue la siguiente línea para ignorar los datos y registros de Azurite.

   .azurite
   

   Esta línea garantiza que los datos y registros de Azurite no se confirmen en el repositorio.

Establecimiento de puntos de interrupción

Cuando se inicia la aplicación completa, el cliente de front-end de Angular solicita los datos de las vacaciones a la aplicación de back-end de Funciones. Las dos aplicaciones funcionan de manera conjunta para obtener los datos y representarlos en el explorador.

Para mostrar una lista de vacaciones, la aplicación de Angular ejecuta la función getVacations() en el archivo vacations.component.ts, que llama al punto de conexión vacations en la API de Azure Functions. El archivo functions/getVacations.ts define la ruta del punto de conexión. Establezca puntos de interrupción en estos archivos, de modo que, durante la depuración, pueda recorrer el código que captura las vacaciones.

1. En Visual Studio Code, abra el archivo src/app/vacations/vacations.component.ts de la aplicación y busque la función getVacations().

2. Para establecer un punto de interrupción, seleccione el medianil del editor situado a la izquierda de la primera línea de código, this.vacationService.getAll();, dentro de la función getVacations().

   

3. Abra el archivo functions/src/functions/getVacations.ts y establezca un punto de interrupción seleccionando el margen del editor a la izquierda de la línea try {.

Ejecución y depuración de la aplicación

Ahora que tiene puntos de interrupción en las aplicaciones de Angular y Functions, puede recorrerlas y depurarlas juntas.

Nota:

Todavía no ejecuta las funciones en Azure. Está usando Azure Functions Core Tools (CLI) para ejecutar y depurar localmente.

Redirección mediante proxy de las solicitudes de Angular a Functions

La API de Azure Functions se ejecuta en el puerto 7071, mientras que la aplicación de Angular se ejecuta en el puerto 4200. La aplicación de Angular no puede realizar solicitudes entre dominios a la aplicación de Functions, por lo que redirige mediante proxy las llamadas de la aplicación de Angular a la aplicación de Functions.

Para permitir que la aplicación de Angular se comunique con la aplicación de Functions y redirigir las solicitudes mediante proxy a esta última, abra el archivo proxy.conf.json y cambie el puerto a 7071.

{
  "/api": {
    "target": "http://localhost:7071",
    "secure": false
  }
}

Nota

La aplicación de Node.js Express usaba el puerto 7070. Si ha quitado la aplicación de Node.js Express, también puede usar el puerto 7070 para la aplicación de Functions. Sin embargo, con fines de aprendizaje, va a mantener ambas aplicaciones.

Depuración de ambas aplicaciones

Al ejecutar y depurar las aplicaciones juntas, la aplicación se detiene en los puntos de interrupción, por lo que tiene la oportunidad de ver cómo funcionan estas aplicaciones juntas.

1. Presione F1 para abrir la paleta de comandos de Visual Studio Code.

2. Escriba y seleccione Ver: Mostrar ejecución y depuración.

3. En la parte superior del panel Ejecución y depuración, seleccione Depurar Functions y Angular en la lista desplegable.

4. Presione F5 para iniciar el depurador.

   Se inicia la aplicación para obtener la lista de vacaciones. El elemento VacationComponent de Angular inicia la solicitud HTTP para obtener las vacaciones. Cuando se abre el explorador, la ejecución del código se detiene en el primer punto de interrupción del archivo vacations.component.ts en la función getVacations().

   

5. Para reanudar la ejecución, presione la tecla F5.

6. El código se detiene en el segundo punto de interrupción del archivo functions/vacations-get/index.ts, porque la aplicación de Angular alcanza la ruta vacations de Functions. Para reanudar la ejecución, presione la tecla F5.

7. Hay dos procesos de depuración ejecutándose: uno para la aplicación de Angular y otro para la de Azure Functions. Presione Mayús + F5 para detener el depurador activo.

8. Vuelva a presionar Mayús + F5 para detener el otro depurador.