Compartir vía

Ejecución y depuración de aplicaciones habilitadas para Azure Developer CLI

  • Artículo

Ejecute y depure aplicaciones en el equipo local mediante la extensión de Visual Studio Code para la CLI para desarrolladores de Azure (azd). En esta guía, usará React Web App con node.js API y MongoDB en la plantilla de Azure . Puede aplicar los principios que aprenderá en este artículo a cualquiera de las plantillas de la CLI para desarrolladores de Azure.

Requisitos previos

Instalación de la extensión de Visual Studio Code para la CLI para desarrolladores de Azure

A través de Visual Studio Code

  1. Abra Visual Studio Code.

  2. En el menú Ver , seleccione Extensiones.

  3. En el campo de búsqueda, escriba Azure Developer CLI.

  4. Seleccione Instalar.

A través de Marketplace

  1. Con el explorador, vaya a la página CLI para desarrolladores de Azure: extensión de VS Code.

  2. Seleccione Instalar.

Inicialización de una nueva aplicación

  1. Cree y abra un directorio en Visual Studio Code.

  2. En el menú Ver, seleccione Paleta de comandos....

  3. Escriba y elija Azure Developer: init.

    Screenshot of the option to initialize a new app.

  4. Seleccione la plantilla Azure-Samples/todo-nodejs-mongo.

    Screenshot of selecting the todo-nodejs-mongo sample template.

Explore los siguientes archivos incluidos en el .vscode directorio:

Archivo Descripción
launch.json Define las configuraciones de depuración, como Depurar Web y Depurar API. para ver las opciones de configuración de depuración, seleccione Ejecutar en el menú Ver. Las configuraciones de depuración disponibles se muestran en la parte superior del panel. Para obtener más información sobre la depuración en Visual Studio Code, consulte Depuración.
tasks.json Define las configuraciones para iniciar el servidor web o de API. Para ver estas opciones de configuración, abra la paleta de comandos y ejecute tarea: ejecutar tarea. Para obtener más información sobre las tareas de Visual Studio Code, consulte Integración con herramientas externas a través de tareas.

Nota:

Si usa la plantilla MS SQL swa-func de C#, deberá iniciar manualmente la tarea Iniciar API y, a continuación, depurar API (F5). Cuando se le pida que elija de una lista de procesos de .NET en ejecución, busque el nombre de la aplicación y selecciónelo.

aprovisionar los recursos de Azure

Antes de iniciar la depuración, aprovisione los recursos de Azure necesarios.

  1. Abra la paleta de comandos.

  2. Escriba Desarrollador de Azure: aprovisionar recursos de Azure.

    Screenshot of option to provision the Azure resources for a new app.

Depuración de una API

La API de depuración de configuración de depuración ejecuta automáticamente el servidor de API y adjunta el depurador. Para probar este patrón, siga estos pasos:

  1. En el directorio del src/api/src/routes proyecto, abra lists.ts.

  2. Establezca un punto de interrupción en la línea 16.

  3. En la barra de actividades, seleccione Ejecutar y depurar>configuración de depuración de la API de depuración Iniciar depuración.>

    Screenshot of setting the debug configuration to Debug API.

  4. En el menú Ver , seleccione Consola de depuración.

  5. Espere al mensaje que indica que el depurador está escuchando en el puerto 3100.

    Screenshot of the message in the Debug Console indicating the debugger is listening on port 3100.

  6. En el shell de terminal preferido, escriba el siguiente comando: curl http://localhost:3100/lists

    Screenshot of using cURL to connect to the API server.

  7. Cuando se alcanza el punto de interrupción establecido anteriormente, la ejecución de la aplicación se pausará. En este momento, puede realizar tareas de depuración estándar, como:

    • Inspeccionar variables
    • Examine la pila de llamadas.
    • Establezca otros puntos de interrupción.

  8. Presione <F5> para continuar ejecutando la aplicación. La aplicación de ejemplo devuelve una lista vacía.

Depuración de una aplicación de front-end de React

Para usar la configuración web de depuración, debe iniciar ambas:

  • El servidor de API
  • El servidor web de desarrollo

Para probar este patrón, siga estos pasos:

  1. Abra la paleta de comandos y ejecute la tarea: Ejecutar tarea.

    Screenshot of running a Visual Studio Code Task.

  2. Escriba y seleccione Iniciar API y Web.

    Screenshot of selecting the option to Start API and Web.

    Para comprobar si el servidor web local se está ejecutando, vaya a la siguiente dirección URL en un explorador web: http://localhost:3000.

  3. En el directorio del src/web/src/components proyecto, abra todoItemListPane.tsx.

  4. Establezca un punto de interrupción en la línea 150 (la primera línea de la deleteItems función).

  5. En la barra de actividad, seleccione Ejecutar y depurar depuración>Configuración de depuración > web la flecha Iniciar depuración.

    Screenshot of setting the debug configuration to Debug Web.

  6. La ejecución de la aplicación web hará que el explorador predeterminado abra la siguiente dirección URL: http://localhost:3000. Ahora puede depurar la aplicación agregando un elemento, selecciónelo en la lista y seleccionando Eliminar.

    Screenshot of the sample Node JS Mongo DB app.

  7. Cuando se alcanza el punto de interrupción establecido anteriormente, la ejecución de la aplicación se pausará. En este punto, puede realizar tareas de depuración estándar, como:

    • Inspeccionar variables
    • Examine la pila de llamadas.
    • Establecer otros puntos de interrupción

  8. Presione <F5> para continuar ejecutando la aplicación y se eliminará el elemento seleccionado.

Ejecute y depure aplicaciones basadas en la máquina local mediante Visual Studio y la CLI para desarrolladores de Azure (azd). En esta guía, usará React Web App con la API de C# y MongoDB en la plantilla de Azure . Puede aplicar los principios que aprenderá en este artículo a cualquiera de las plantillas de la CLI para desarrolladores de Azure.

Requisitos previos

Instalación y habilitación de la característica en versión preliminar

  1. Instalación de La versión preliminar de Visual Studio

    Nota:

    Esto es diferente de Visual Studio. Si tiene la versión no preliminar de Visual Studio, deberá instalarla.

  2. Abra La versión preliminar de Visual Studio.

  3. En el menú Herramientas , seleccione Opciones>Características de vista previa.

  4. Asegúrese de que la integración con azd, la CLI para desarrolladores de Azure está habilitada.

    Screenshot of the Visual Studio option to turn on integration with the Azure Developer CLI.

Apertura de la solución de API

  1. Abra la Todo.Api.sln solución en el /src/api directorio .

    Si ha habilitado la azd característica de integración, se detecta el azure.yaml archivo. Visual Studio inicializa automáticamente el modelo de aplicación y ejecuta azd env refresh.

  2. Expanda Servicios Conectar para ver todas las dependencias.

    Aunque el front-end web que se ejecuta en App de Azure Service no forma parte de la solución de API, se detecta e incluye en Dependencias de servicio.

    Screenshot of the message indicating the Azure Developer CLI is initialized.

Ejecución y depuración

  1. En el directorio del src/api proyecto, abra ListController.cs.

  2. Establezca un punto de interrupción en la línea 20.

    Screenshot of the breakpoint set in the sample code.

  3. Presione <F5>.

  4. Espere al mensaje que indica que el servidor web está escuchando en el puerto 3101.

    Screenshot of the status bar message indicating the debugger is listening on port 3101.

  5. En el explorador preferido, escriba la siguiente dirección: https://localhost:3101/lists

  6. Cuando se alcanza el punto de interrupción establecido anteriormente, la ejecución de la aplicación se pausará. En este momento, puede realizar tareas de depuración estándar, como:

    • Inspeccionar variables
    • Examine la pila de llamadas.
    • Establecer otros puntos de interrupción

  7. Presione <F5> para continuar ejecutando la aplicación.

    La aplicación de ejemplo devuelve una lista (o una lista vacía [] si no ha iniciado el front-end web antes):

    [{"id":"fb9c1cb3811349b993421fc0e815c4c1","name":"My List","description":null,"createdDate":"2022-06-27T01:10:16.7721172+00:00","updatedDate":null}]

Otras azd integraciones

Administración del azd entorno

Para administrar el azd entorno:

  1. Seleccione ... en la esquina superior derecha del panel Dependencias de servicio.

  2. Seleccione una de las siguientes opciones en el menú desplegable:

    • Crear un nuevo entorno
    • Seleccione y establezca un entorno específico como el entorno activo actual.
    • Desaprovisionamiento de un entorno

    Screenshot of the options to manage the Azure Developer CLI environment in Visual Studio.

Aprovisionamiento de recursos de entorno

Puede aprovisionar recursos de Azure en su entorno.

  1. En servicios Conectar, haga clic en el icono de la parte superior derecha para restaurar o aprovisionar recursos del entorno.

    Screenshot of option to provision Azure Developer CLI environment resources in Visual Studio.

  2. Confirme el nombre del entorno, la suscripción y la ubicación.

Publicar la aplicación

Si realiza actualizaciones, puede publicar la aplicación siguiendo estos pasos:

  1. En el Explorador de soluciones, expanda Servicios Conectar.

  2. Seleccione Publicar.

  3. Seleccione Agregar un perfil de publicación.

  4. Seleccione un destino de Azure y seleccione Siguiente.

  5. Seleccione Entorno de la CLI para desarrolladores de Azure y seleccione Siguiente.

    Screenshot of message in Debug Console indicating debugger is listening on port 3100.

  6. Seleccione el entorno.

  7. Seleccione Finalizar.

Otros recursos

Solicitar ayuda

Para obtener información sobre cómo archivar un error, solicitar ayuda o proponer una nueva característica para la CLI para desarrolladores de Azure, visite la página de solución de problemas y soporte técnico .

Pasos siguientes

Configuración de una canalización e inserción de actualizaciones mediante Acciones de GitHub