Övning – Skapa ett nytt .NET Aspire-projekt

  • 10 minuter

Innan du börjar arbeta med en ny tjänst för företagets senaste projekt vill du kontrollera att systemet har alla förutsättningar för .NET Aspire. Det bästa sättet att kontrollera är att skapa ett nytt .NET Aspire-projekt med en startmall.

I övningen installerar du alla förutsättningar och sedan skapar du en ny .NET Aspire Starter-app. Sedan får du se hur du lägger till en cachelagringskomponent med Hjälp av Redis i appen. Slutligen testar du programmet och utforskar snabbt Aspire-instrumentpanelen.

Välj den här fliken om du vill se stegen i den här övningen för Visual Studio.

Installationskrav

Vi diskuterade förutsättningarna i föregående lektion. Nu ska vi gå igenom hur du installerar dem.

Installera .NET 8

Följ den här .NET 8-länken och välj rätt installationsprogram för operativsystemet. Om du till exempel använder Windows 11 och en modern processor väljer du X64 .NET 8 SDK för Windows.

När nedladdningen är klar kör du installationsprogrammet och följer anvisningarna. I ett terminalfönster kör du följande kommando för att kontrollera att installationen lyckades:

dotnet --version

Du bör se versionsnumret för .NET SDK som du har installerat. Till exempel:

8.0.300-preview.24203.14

Installera Visual Studio 2022 Preview

Följ den här Visual Studio 2022 Preview-länken och välj Ladda ned förhandsversion. När nedladdningen är klar kör du installationsprogrammet och följer anvisningarna.

Installera Docker Desktop

Följ den här Docker Desktop-länken och välj rätt installationsprogram för operativsystemet. När nedladdningen är klar kör du installationsprogrammet och följer anvisningarna.

Öppna Docker Desktop-programmet och godkänn tjänstavtalet.

Installera .NET Aspire-arbetsbelastningen

Installera .NET Aspire-arbetsbelastningen med Visual Studio:

  1. Öppna Installationsprogrammet för Visual Studio.

  2. Välj Ändra bredvid Visual Studio.

  3. Välj arbetsbelastningen ASP.NET och webbutveckling .

  4. På panelen Installationsinformation väljer du .NET Aspire SDK (förhandsversion).

  5. Välj Ändra för att installera .NET Aspire-komponenten.

  6. Kontrollera att den senaste versionen av .NET Aspire är installerad i en ny terminal och kör det här kommandot:

    dotnet workload list

När du har installerat arbetsbelastningen ser du:

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.

Skapa en ny .NET Aspire Starter-app

Nu när förutsättningarna har installerats ska vi skapa en ny app.

  1. Öppna Visual Studio. I dialogrutan väljer du Skapa ett nytt projekt.

  2. I rutan Sök efter mallar anger du aspire.

  3. Välj .NET Aspire Starter-program och välj sedan Nästa.

  4. I rutan Lösningsnamn anger du AspireTestApp.

  5. I rutan Plats anger du mappen där du vill skapa den nya appen.

  6. Välj Nästa.

  7. Låt standardinställningen .NET 8.0 (långsiktig support) vara markerad.

  8. Avmarkera Använd Redis för cachelagring (kräver en containerkörning som stöds).

    Du kommer att lägga till Redis-stöd manuellt i nästa steg.

  9. Välj Skapa.

  10. Välj Felsök på menyn och välj sedan Starta felsökning (du kan också trycka på F5).

  11. Om du uppmanas att starta Docker Engine väljer du Ja.

Instrumentpanelen öppnas i standardwebbläsaren.

En skärmbild av Aspire-instrumentpanelen som visar Blazor-appen och API-tjänsterna.

Välj url:en för webfrontend-slutpunkten . Porten tilldelas slumpmässigt så instrumentpanelen kanske inte matchar.

En skärmbild av Blazor-webbappens klientdel.

Blazor-appen har en enkel räknare och en vädersida som anropar serverdels-API-tjänsten för att hämta prognosdata att visa.

Stäng webbläsarflikarna för Blazor-appen och .NET Aspire-instrumentpanelen. Sluta felsöka i Visual Studio.

Lägga till en cachelagringskomponent i ett .NET Aspire-projekt

Nu ska vi lägga till en Redis-cachelagringskomponent i .NET Aspire-projektet. Vi börjar med appvärden:

  1. Högerklicka på projektet AspireTestApp.AppHost i Solution Explorer och välj Hantera NuGet-paket.
  2. Välj fliken Bläddra och välj Inkludera förhandsversion.
  3. Sök efter aspire redis och välj paketet Aspire.Hosting.Redis .
  4. I den högra rutan för Version väljer du den senaste 8.0.0 och väljer sedan Installera.
  5. I dialogrutan Godkännande av licens väljer du Jag accepterar.

  1. Om du vill lägga till Redis-konfigurationen i appvärdprojektet öppnar du filen AspireTestApp.AppHost/Program.cs och lägger till den här koden:

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

    Den här koden konfigurerar orkestreringen för att skapa en lokal Redis-containerinstans.

  2. Ändra den aktuella webfrontend-tjänsten så att den använder Redis-cachen. Ändra den här koden:

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

    Till den här koden:

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

    Tilläggsmetoden WithReference konfigurerar användargränssnittet att använda Redis automatiskt för cachelagring av utdata.

    Sedan kan vi använda Redis i det tidskrävande projektet.

  1. Högerklicka på projektet AspireTestApp.Web i Solution Explorer och välj Hantera NuGet-paket.
  2. Välj fliken Bläddra och välj Inkludera förhandsversion.
  3. Sök efter aspire redis och välj paketet Aspire.StackExchange.Redis.OutputCaching .
  4. I den högra rutan för Version väljer du den senaste 8.0.0 och väljer sedan Installera.
  5. I dialogrutan Godkännande av licens väljer du Jag accepterar.

Använd nu Visual Studio för att lägga till kod för att använda Redis-komponenten.

  1. Om du behöver det öppnar du Lösningen AspireTestApp i Visual Studio.

  2. I Solution Explorer går du till projektet AspireTestApp.Web och väljer Program.cs.

  3. Lägg till den här koden under var builder = WebApplication.CreateBuilder(args);:

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

    Den här koden:

    • Konfigurerar cachelagring av ASP.NET Core-utdata för att använda en Redis-instans med det angivna anslutningsnamnet.
    • Aktiverar automatiskt motsvarande hälsokontroller, loggning och telemetri.

  4. Ersätt innehållet i AspireTestApp.Web/Components/Pages/Home.razor med följande kod:

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

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app on @DateTime.Now

    I föregående kod OutputCache anger attributet en varaktighet på 10 sekunder. När sidan har cachelagrats tar varje efterföljande begäran i 10-sekundersfönstret emot de cachelagrade utdata.

Du kan se att Aspire är utformat för att göra det enkelt att lägga till nya komponenter i ditt program. Du lägger till en ny komponent i ditt program genom att lägga till ett NuGet-paket och sedan lägga till några rader kod i Program.cs-filen i webb - och AppHost-projekten . Aspire konfigurerar sedan redis-containern automatiskt och cachelagring av utdata åt dig.

Testa programmet

Nu ska vi köra programmet för att se cachelagringen i praktiken. I Visual Studio:

  1. Välj Felsök på menyn och välj sedan Starta felsökning (du kan också trycka på F5). Lösningen byggs och Aspire-instrumentpanelen öppnas i standardwebbläsaren.

  2. Välj slutpunkts-URL:en för webfrontend-tjänsten för att visa programmets startsida.

  3. Uppdatera sidan några gånger i webbläsaren. Tiden på sidan ändras inte inom 10 sekunders cachevaraktighet.

    En skärmbild av den uppdaterade Aspire Starter-mallen med cachelagring på startsidan.

    Lösningen skapar en Redis-container. Öppna Docker Desktop för att se containern som körs.

    En skärmbild av Redis-containern som körs i Docker Desktop.

  4. Tryck på Skift+F5 för att stoppa lösningen som körs i Visual Studio.

  5. Öppna Docker Desktop och välj Containrar/appar. Du bör se att redis:latest inte längre körs.

Du har sett hur enkelt det är att lägga till en ny cachelagringskomponent i ett program med hjälp av .NET Aspire. Du har lagt till ett NuGet-paket och sedan lagt till några rader kod. .NET Aspire konfigurerade automatiskt Redis-containern och cachelagring av utdata åt dig.