Ejercicio: Integración de una aplicación web de ASP.NET Core existente

  • 8 minutos

Ahora vamos a explorar cómo agregar .NET Aspire a una aplicación web de ASP.NET Core existente. A lo largo del proceso, aprenderá a agregar la pila de .NET Aspire a una aplicación web de ASP.NET Core existente y, a continuación, ejecutar la aplicación. También verá cómo llamar a microservicios desde la aplicación ASP.NET Core.

Configurar el entorno

Para agregar .NET Aspire a una aplicación web de ASP.NET Core de demostración existente, primero debe obtener la aplicación existente.

En una ventana de terminal:

  1. Establezca el directorio de trabajo actual en el que desea almacenar el código.

  2. Clone el repositorio en una nueva carpeta denominada ExampleApp:

    git clone https://github.com/MicrosoftDocs/mslearn-aspire-starter ExampleApp

Exploración de la aplicación de ejemplo

Use Visual Studio para explorar la aplicación de demostración.

  1. Abra Visual Studio y, a continuación, seleccione Abrir un proyecto o solución.

  2. En el cuadro de diálogo Abrir proyecto o solución, vaya a la carpeta ExampleApp/eShopAdmin y después seleccione EShopAdmin.sln.

  3. Seleccione Open (Abrir).

    Captura de pantalla de Visual Studio en la que se muestran los tres proyectos de la solución de demostración.

    La aplicación de demostración es una solución de .NET 8 con tres proyectos:

    • Entidades de datos. Una biblioteca de clases que define la clase Product usada en la aplicación web y la API Web.
    • Productos. Una API Web que devuelve una lista de productos del catálogo con sus propiedades.
    • Tienda. Una aplicación web de Blazor muestra estos productos a los visitantes del sitio web.

Para ejecutar correctamente la aplicación, cambie los proyectos que se inician:

  1. En el menú, seleccione Proyecto>Configurar proyectos de inicio....

  2. En el cuadro de diálogo Páginas de propiedades de la solución, seleccione Múltiples proyectos de inicio.

    Captura de pantalla del cuadro de diálogo para elegir proyectos de inicio. Productos y Tienda se establecen en Inicio.

  3. En la columna Acción, establezca Productos y Tienda en Inicio.

  4. Seleccione Aceptar.

  5. Ejecute la aplicación pulsando F5, o seleccionando Iniciar en la barra de herramientas.

    La aplicación abre dos instancias del explorador web predeterminado. Una muestra la salida JSON de la API Web, y la otra muestra la aplicación web de Blazor.

  6. En la aplicación web, seleccione Productos en el menú. Debería ver este error.

    Captura de pantalla que muestra que los productos no se pueden cargar.

  7. Detenga la aplicación presionando Mayús+F5, o seleccione Detener depuración en la barra de herramientas.

Esta aplicación es nueva para usted. No está seguro de cómo se configuran los puntos de conexión y los servicios. Vamos a agregar la orquestación de .NET Aspire y ver si puede ayudar a diagnosticar el problema.

Inscriba la aplicación existente en la orquestación de .NET Aspire

En Visual Studio:

  1. En Explorador de soluciones, haga clic con el botón derecho en el proyecto Tienda, después seleccione Agregar>Soporte para orquestador de .NET Aspire....

    Captura de pantalla del cuadro de diálogo de orquestación en Visual Studio.

  2. En el cuadro de diálogo Agregar compatibilidad con orquestador de .NET Aspire, seleccione Aceptar.

    Ahora puede ver que los proyectos AppHost y ServiceDefaults están agregados a la solución. También se establece el proyecto AppHost como proyecto de inicio.

  3. Ejecute la aplicación pulsando F5, o seleccionando Iniciar en la barra de herramientas.

    Esta vez, la solución abre una sola ventana del explorador que muestra el panel de .NET Aspire.

    Captura de pantalla del panel de .NET Aspire.

  4. Seleccione el punto de conexión del proyecto Tienda y, después, seleccione Productos. Debería ver el mismo error que antes.

  5. Vuelva al panel.

    Captura de pantalla que muestra una notificación de error en el proyecto de tienda.

  6. Seleccione la notificación de error roja junto a En ejecución y después, en la columna Detalles, seleccione Vista.

    Captura de pantalla del panel que muestra los detalles del error.

  7. Desplácese por los detalles del error hasta que vea el exception.message. La aplicación web tiene problemas para conectarse a localhost:5200. El puerto 5200 es el puerto en el que el front-end cree que se ejecuta la API de productos.

  8. Detenga la aplicación presionando Mayús+F5, o seleccione Detener depuración en la barra de herramientas.

Actualice la orquestación para incluir la API de productos.

Hay tres maneras de resolver este problema. Podría explorar el código, averiguar cómo está configurado el front-end, editar el código o cambiar los archivos launchSettings.json o appsettings.json.

Con .NET Aspire, puede cambiar la orquestación para que la API de productos responda en el puerto 5200.

En Visual Studio:

  1. Para agregar el proyecto Productos a la orquestación, en Explorador de soluciones, haga clic con el botón derecho en el proyecto Productos, después seleccione Agregar>Soporte de orquestación de .NET Aspire....

    Captura de pantalla del cuadro de diálogo de Visual Studio. Ya existe un proyecto de orquestador de .NET Aspire en la solución.

  2. En el cuadro de diálogo, seleccione Aceptar.

  3. En Explorador de soluciones, abra el proyecto AppHost, después abra el archivo Program.cs.

    Explore el código y vea cómo se agrega el proyecto Productos a la orquestación:

    var builder = DistributedApplication.CreateBuilder(args);

builder.AddProject<Projects.Store>("store");

builder.AddProject<Projects.Products>("products");

builder.Build().Run();

    A continuación, configure .NET Aspire para agregar un nuevo punto de conexión para la API de productos.

  4. Reemplace la línea builder.AddProject<Projects.Products>("products"); por este código:

    builder.AddProject<Projects.Products>("products")
       .WithHttpEndpoint(port: 5200, name: "products");

  5. Ejecute la aplicación pulsando F5, o seleccionando Iniciar en la barra de herramientas.

    El proyecto productos aparece ahora en la lista del panel con dos puntos de conexión.

    Recorte de pantalla del panel que muestra los productos y los proyectos de la tienda.

  6. Seleccione el punto de conexión del proyecto Tienda y, después, seleccione Productos.

    Los productos se muestran ahora en la aplicación web.

    Captura de pantalla que muestra los productos en la aplicación web.

  7. Detenga la aplicación presionando Mayús+F5, o seleccione Detener depuración en la barra de herramientas.

Este enfoque resuelve el problema de configuración, pero no es la mejor manera de solucionar el problema. Si decide usar .NET Aspire, también debe usar la detección de servicios de .NET Aspire.

Actualización de la aplicación web para usar la detección de servicios de .NET Aspire

En Visual Studio:

  1. En Explorador de soluciones, abra el proyecto AppHost, después abra el archivo Program.cs.

  2. Reemplace el código del archivo por el siguiente:

    var builder = DistributedApplication.CreateBuilder(args);

var products = builder.AddProject<Projects.Products>("products");

builder.AddProject<Projects.Store>("store")
       .WithReference(products);

builder.Build().Run();

    El código anterior reordena los proyectos. La API de productos se pasa ahora como referencia de proyecto a la aplicación web de la Tienda de front-end.

  3. En Explorador de soluciones, abra el proyecto Tienda, después abra el archivo appsettings.json.

  4. Elimine las líneas de configuración del punto de conexión:

    "ProductEndpoint": "http://localhost:5200",
"ProductEndpointHttps": "https://localhost:5200"

    La configuración ahora es:

    {
  "DetailedErrors": true,
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*"
}

  5. En Explorador de soluciones, en el proyecto Tienda, abra el archivo Program.cs.

  6. Reemplace esta línea:

    var url = builder.Configuration["ProductEndpoint"] 
     ?? throw new InvalidOperationException("ProductEndpoint is not set");

    por esta otra:

    var url = "http://products";

  7. Ejecute la aplicación pulsando F5, o seleccionando Iniciar en la barra de herramientas.

  8. Seleccione el punto de conexión del proyecto Tienda y, después, seleccione Productos.

La aplicación sigue funcionando como se esperaba, pero el front-end está usando ahora la detección de servicios de .NET Aspire para obtener información sobre el punto de conexión de la API de productos.