Ejercicio: Creación de un proyecto de .NET Aspire

  • 10 minutos

Antes de empezar a trabajar en un nuevo servicio para el proyecto más reciente de su empresa, quiere comprobar que el sistema tiene todos los requisitos previos para .NET Aspire. La mejor manera de comprobar es crear un nuevo proyecto de .NET Aspire con una plantilla de inicio.

En el ejercicio, instalará todos los requisitos previos y, a continuación, creará una aplicación .NET Aspire Starter. A continuación, verá cómo agregar un componente de almacenamiento en caché mediante Redis a la aplicación. Finalmente, probará la aplicación y explorará rápidamente el panel de Aspire.

Elija esta pestaña para ver los pasos de este ejercicio para Visual Studio.

Requisitos previos de instalación

Hemos analizado los requisitos previos en la unidad anterior. Veamos cómo instalarlos ahora.

Instalación de .NET 8

Siga este vínculo de .NET 8 y seleccione el instalador correcto para el sistema operativo. Por ejemplo, si usa Windows 11 y un procesador moderno, seleccione el SDK de .NET 8 para Windows x64.

Una vez completada la descarga, ejecute el instalador y siga las instrucciones. En una ventana de terminal, ejecute el siguiente comando para comprobar que la instalación se realizó correctamente:

dotnet --version

Debería ver el número de versión del SDK de .NET que instaló. Por ejemplo:

8.0.300-preview.24203.14

Instalación de Visual Studio 2022 Preview

Siga este vínculo de Visual Studio 2022 Preview y seleccione Descargar versión preliminar. Una vez completada la descarga, ejecute el instalador y siga las instrucciones.

Instalar Docker Desktop

Siga este vínculo de Docker Desktop y seleccione el instalador correcto para el sistema operativo. Una vez completada la descarga, ejecute el instalador y siga las instrucciones.

Abra la aplicación Docker Desktop y acepte el contrato de servicio.

Instalación de la carga de trabajo de .NET Aspire

Instale la carga de trabajo de .NET Aspire mediante Visual Studio:

  1. Abra el Instalador de Visual Studio.

  2. Seleccione Modificar junto a Visual Studio.

  3. Seleccione la carga de trabajo de ASP .NET y desarrollo web.

  4. En el panel Detalles de instalación, seleccione SDK de .NET Aspire (versión preliminar).

  5. Seleccione Modificar para instalar el componente .NET Aspire.

  6. Compruebe que está instalada la versión más reciente de .NET Aspire y, en una nueva ventana de terminal, ejecute este comando:

    dotnet workload list

Después de instalar la carga de trabajo, verá lo siguiente:

Installed Workload Id      Manifest Version      Installation Source
---------------------------------------------------------------------------------------------
aspire                     8.0.0/8.0.100         SDK 8.0.300-preview.24203, VS 17.10.34902.84

Use `dotnet workload search` to find additional workloads to install.

Creación de una aplicación .NET Aspire Starter nueva

Ahora que los requisitos previos están instalados, vamos a crear una nueva aplicación.

  1. Abra Visual Studio. Seleccione Crear un proyecto en el cuadro de diálogo.

  2. En el cuadro Buscar plantillas, escriba Aspire.

  3. Seleccione Aplicación .NET Aspire Starter y, a continuación, seleccione Siguiente.

  4. En el cuadro Nombre de la solución, escriba AspireTestApp.

  5. En el cuadro Ubicación, escriba la carpeta donde desea crear la nueva aplicación.

  6. Seleccione Siguiente.

  7. Deje el valor predeterminado .NET 8.0 (compatibilidad a largo plazo) seleccionado.

  8. Desactive Usar Redis para el almacenamiento en caché (requiere un entorno de ejecución de contenedor compatible).

    Agregará manualmente la compatibilidad con Redis en los pasos siguientes.

  9. Seleccione Crear.

  10. En el menú, seleccione Depurar y, después, seleccione Iniciar depuración (como alternativa, presione F5).

  11. Si se le pide que inicie el motor de Docker, seleccione Sí.

El panel se abre en el explorador web predeterminado.

Captura de pantalla del panel de Aspire donde se muestran los servicios de API y aplicación de Blazor.

Seleccione la dirección URL del punto de conexión webfrontend. El puerto se asigna aleatoriamente para que el panel no coincida.

Captura de pantalla del front-end de la aplicación web Blazor.

La aplicación Blazor tiene una página de contador simple y una página Weather que llama al servicio de API de back-end para obtener los datos de previsión que se van a mostrar.

Cierre las pestañas del explorador para la aplicación Blazor y el panel de .NET Aspire. En Visual Studio, detenga la depuración.

Adición de un componente de almacenamiento en caché a un proyecto de .NET Aspire

Ahora vamos a agregar un componente de almacenamiento en caché de Redis al proyecto de .NET Aspire. Comenzaremos con el host de la aplicación:

  1. En el Explorador de soluciones, haga clic con el botón derecho en el proyecto AspireTestApp.AppHost y seleccione Administrar paquetes NuGet.
  2. Seleccione la pestaña Examinar y, luego, Incluir versión previa.
  3. Busque aspire redis y seleccione el paquete Aspire.Hosting.Redis.
  4. En el panel derecho, para Versión seleccione la 8.0.0 más reciente y, a continuación, seleccione Instalar.
  5. En el diálogo Aceptación de licencia, seleccione Acepto.

  1. Para agregar la configuración de Redis al proyecto de host de la aplicación, abra el archivo AspireTestApp.AppHost/Program.cs y agregue este código:

    // Add Redis
var redis = builder.AddRedis("cache");

    Este código configura la orquestación para crear una instancia de contenedor de Redis local.

  2. Cambie el servicio webfrontend actual para que use la caché de Redis. Cambie este código:

    builder.AddProject<Projects.AspireTestApp_Web>("webfrontend")
    .WithExternalHttpEndpoints()
    .WithReference(apiService);

    Por este código:

    builder.AddProject<Projects.AspireTestApp_Web>("webfrontend")
    .WithExternalHttpEndpoints()
    .WithReference(apiService)
    .WithReference(redis);

    El método de extensión WithReference configura la interfaz de usuario para usar Redis automáticamente para el almacenamiento en caché de salida.

    A continuación, podemos usar Redis en el proyecto de consumo.

  1. En el Explorador de soluciones, haga clic con el botón derecho en el proyecto AspireTestApp.Web y seleccione Administrar paquetes NuGet.
  2. Seleccione la pestaña Examinar y, luego, Incluir versión previa.
  3. Busque aspire redis y seleccione el paquete Aspire.StackExchange.Redis.OutputCaching.
  4. En el panel derecho, para Versión seleccione la 8.0.0 más reciente y, a continuación, seleccione Instalar.
  5. En el diálogo Aceptación de licencia, seleccione Acepto.

Ahora use Visual Studio para agregar código para usar el componente Redis.

  1. Si es necesario, abra la solución AspireTestApp en Visual Studio.

  2. En el Explorador de soluciones, en el proyecto AspireTestApp.Web, seleccione Program.cs.

  3. Agregue este código bajo var builder = WebApplication.CreateBuilder(args);:

    // Add Redis caching
builder.AddRedisOutputCache("cache");

    Este código:

    • Configura el almacenamiento en caché de salida de ASP.NET Core para usar una instancia de Redis con el nombre de conexión especificado.
    • Habilita automáticamente las comprobaciones de estado, registro y telemetría correspondientes.

  4. Reemplace el contenido de AspireTestApp.Web/Components/Pages/Home.razor por el código siguiente:

    @page "/"
@attribute [OutputCache(Duration = 10)]

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app on @DateTime.Now

    En el código anterior, el atributo OutputCache especifica una duración de 10 segundos. Una vez almacenada en caché la página, cada solicitud subsiguiente dentro de la ventana de 10 segundos recibe la salida almacenada en caché.

Puede ver que Aspire está diseñado para facilitar la adición de nuevos componentes a la aplicación. Agregue un nuevo componente a la aplicación agregando un paquete de NuGet y, a continuación, agregue algunas líneas de código al archivo Program.cs en los proyectos Web y AppHost. Aspire configura automáticamente el contenedor de Redis y el almacenamiento en caché de salida.

Prueba de la aplicación

Ahora vamos a ejecutar la aplicación para ver el almacenamiento en caché en acción. En Visual Studio:

  1. En el menú, seleccione Depurar y, después, seleccione Iniciar depuración (como alternativa, presione F5). La solución se compila y el panel de Aspire se abre en el explorador web predeterminado.

  2. Seleccione la dirección URL del Punto de conexión para el servicio webfrontend para ver la página principal de la aplicación.

  3. En el explorador, actualice la página varias veces. La hora de la página no cambia dentro de la duración de la caché de 10 segundos.

    Captura de pantalla de la plantilla de Aspire Starter actualizada con almacenamiento en caché en la página principal.

    La solución crea un contenedor de Redis. Abra Docker Desktop para ver el contenedor en ejecución.

    Captura de pantalla del contenedor de Redis ejecutándose en Docker Desktop.

  4. Para detener la solución que se ejecuta en Visual Studio, presione Mayús+F5.

  5. Abra Docker Desktop y seleccione Containers/Apps. Debería ver que redis:latest ya no se está ejecutando.

Ha visto lo fácil que es agregar un nuevo componente de almacenamiento en caché a una aplicación mediante .NET Aspire. Ha agregado un paquete NuGet y, a continuación, ha agregado algunas líneas de código. .NET Aspire configura automáticamente el contenedor de Redis y el almacenamiento en caché de salida.