Övning – Använda .NET Aspire eShop

  • 10 minuter

Vi kan använda det senaste eShop-referensprogrammet, som innehåller .NET Aspire-stacken, för att illustrera en komplett och komplex molnbaserad app.

Tänk dig att du arbetar för ett kläd- och utrustningsföretag utomhus. Ditt utvecklingsteam har arbetat med .NET Aspire för att skapa en ny eShop-webbapp för den huvudsakliga kundinriktade webbplatsen. Du vill förstå arkitekturen för den här appen och testa dess funktioner innan du distribuerar den.

I den här lektionen installerar du .NET Aspire och dess förutsättningar och använder sedan eShop-appen för att undersöka och köra .NET Aspire.

Installationskrav

Förutsättningarna för den här .NET Aspire-övningen är:

  • .NET 8
  • Förhandsversion av Visual Studio 2022
  • Docker Desktop
  • .NET Aspire-arbetsbelastning i Visual Studio

Om du redan har installerat dessa kan du gå vidare och utforska eShop-programmet.

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. Använd WSL 2-serverdelen för bästa prestanda och kompatibilitet.

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

Installera .NET Aspire-arbetsbelastningen i Visual Studio

Installera .NET Aspire-arbetsbelastningen med .NET CLI:

  1. Öppna en terminal.

  2. Uppdatera .NET-arbetsbelastningar med det här kommandot:

    dotnet workload update

    Du bör se ett meddelande om att arbetsbelastningarna har uppdaterats.

    No workloads installed for this feature band. To update workloads installed with earlier SDK versions, include the --from-previous-sdk option.
Updated advertising manifest microsoft.net.sdk.ios.
Updated advertising manifest microsoft.net.workload.mono.toolchain.net6.
Updated advertising manifest microsoft.net.sdk.android.
Updated advertising manifest microsoft.net.workload.emscripten.net7.
Updated advertising manifest microsoft.net.workload.emscripten.net6.
Updated advertising manifest microsoft.net.sdk.macos.
Updated advertising manifest microsoft.net.workload.emscripten.current.
Updated advertising manifest microsoft.net.workload.mono.toolchain.current.
Updated advertising manifest microsoft.net.sdk.maui.
Updated advertising manifest microsoft.net.workload.mono.toolchain.net7.
Updated advertising manifest microsoft.net.sdk.maccatalyst.
Updated advertising manifest microsoft.net.sdk.tvos.
Updated advertising manifest microsoft.net.sdk.aspire.
No workloads installed for this feature band. To update workloads installed with earlier SDK versions, include the --from-previous-sdk option.

Successfully updated workload(s): .

  3. Installera .NET Aspire-arbetsbelastningen med det här kommandot:

    dotnet workload install aspire

    Du bör se ett meddelande om att .NET Aspire-arbetsbelastningen har installerats.

    Installing Aspire.Hosting.Sdk.Msi.x64 ...... Done
Installing Aspire.ProjectTemplates.Msi.x64 ..... Done
Installing Aspire.Hosting.Orchestration.win-x64.Msi.x64 ............. Done
Installing Aspire.Hosting.Msi.x64 ..... Done
Installing Aspire.Dashboard.Sdk.win-x64.Msi.x64 ....... Done

Successfully installed workload(s) aspire.

  4. Kontrollera att .NET Aspire-arbetsbelastningen är installerad med det här kommandot:

    dotnet workload list

    Du bör se information om arbetsbelastningen aspire.

    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.

Utforska .NET Aspire eShop-koden

Nu ska vi använda eShop-referensprogrammet för att demonstrera .NET Aspire-stacken. Vi klonar koden från GitHub och undersöker den i Visual Studio:

  1. På kommandoraden bläddrar du till en mapp där du kan arbeta med kod.

  2. Kör följande kommando för att klona eShop-exempelprogrammet:

    git clone https://github.com/dotnet/eShop.git

  3. Starta Visual Studio och välj sedan Öppna ett projekt eller en lösning.

  4. Bläddra till mappen där du klonade eShop, välj filen eShop.Web.snlf och välj sedan Öppna.

  5. Granska lösningsstrukturen i Solution Explorer. På den översta nivån innehåller eShop-koden mappar för tester, GitHub-åtgärder och lösningsobjekt. Expandera mappen src, som innehåller källkod för mikrotjänsterna:

    Skärmbild som visar strukturen för eShop-lösningen i Visual Studio Solution Explorer.

  6. Observera att:

    • Mappen src innehåller projekten .NET Aspire AppHost och ServiceDefaults .
    • AppHost-projektet anges som startprojekt för lösningen.

  7. Expandera AppHost-projektet och välj sedan filen eShop.AppHost/Program.cs.

  8. Observera följande i filen Program.cs :

    • Komponenter i programmet läggs till i ett DistributedApplicationBuilder objekt med namnet builder.
    • Stödtjänster, till exempel en Redis-cache, en RabbitMQ-meddelandetjänst och en PostgreSQL-databas, läggs till i byggaren. Var och en etableras i en Docker-container.
    • Varje mikrotjänst läggs till i byggaren med hjälp builder.AddProject() av metoden .
    • Referenser till säkerhetskopieringstjänsterna matas in i varje mikrotjänst med hjälp .WithReference() av metoden .

Redigera kod i .NET Aspire eShop

Vi gör en enkel ändring i källkoden som ska testas när vi kör appen:

  1. Expandera mappen src/WebApp/Components/Pages/Catalog i Solution Explorer och välj sedan sidan Catalog.razor.

  2. Leta upp den här kodraden:

    <SectionContent SectionName="page-header-subtitle">Start the season with the latest in clothing and equipment.</SectionContent>

  3. Ersätt raden med den här texten eller skapa en egen underrubrik för sidan:

    <SectionContent SectionName="page-header-subtitle">Bringing you the latest in clothing and equipment.</SectionContent>

Kör .NET Aspire eShop

Vi kör appen och använder instrumentpanelen .NET Aspire för att undersöka en begäran:

  1. Tryck på F5 i Visual Studio eller välj Starta felsökning på felsökningsmenyn. Visual Studio bygger containrarna för eShop.

  2. Om dialogrutan Starta Docker Desktop visas väljer du Ja.

  3. När eShop skapas och distribueras till Docker visas .NET Aspire-instrumentpanelen i standardwebbläsaren.

  4. Om du vill bläddra till startsidan går du till raden för webbappprojektet och väljer portlänken>https://localhost:<:

    Skärmbild som visar .NET Aspire-instrumentpanelen för eShop-lösningen

  5. Startsidan för eShop visas på en ny webbläsarflik. Observera att underrubriken visas.

  6. Välj produkten Adventurer GPS Watch:

    Skärmbild som visar startsidan för eShop-webbappen.

  7. Växla till webbläsarfliken som visar instrumentpanelen .NET Aspire och välj sedan Spårningar i den vänstra menyn.

  8. Rulla längst ned på sidan och leta upp en spårning med namnet webapp: GET /item/{itemId:int}.

  9. I kolumnen Information väljer du Visa:

    Skärmbild som visar sidan Spårningar på instrumentpanelen .NET Aspire.

  10. Instrumentpanelen visar spårningen för Adventurer GPS Watch, som innehåller ett anrop till katalogens mikrotjänst:

    Skärmbild som visar en spårning på .NET Aspire-instrumentpanelen.

  11. Om du vill stoppa felsökningssessionen trycker du på Skift + F5 i Visual Studio eller på felsökningsmenyn och väljer Stoppa felsökning.

  12. Stäng Visual Studio.

Läs mer