Övning – Integrera en befintlig ASP.NET Core-webbapp

  • 8 minuter

Nu ska vi utforska hur du lägger till .NET Aspire i en befintlig ASP.NET Core-webbapp. Längs vägen får du lära dig hur du lägger till .NET Aspire-stacken i en befintlig ASP.NET Core-webbapp och sedan kör appen. Du ser också hur du anropar mikrotjänster från ASP.NET Core-appen.

Konfigurera din miljö

Om du vill lägga till .NET Aspire i en befintlig demo ASP.NET Core-webbappen måste du först hämta den befintliga appen.

I ett terminalfönster:

  1. Ange den aktuella arbetskatalogen till den där du vill lagra koden.

  2. Klona lagringsplatsen till en ny mapp med namnet ExampleApp:

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

Utforska exempelappen

Använd Visual Studio för att utforska demoappen.

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

  2. I dialogrutan Öppna projekt/lösning navigerar du till mappen ExampleApp/eShopAdmin och väljer sedan EShopAdmin.sln.

  3. Välj Öppna.

    En skärmbild av Visual Studio som visar de tre projekten i demolösningen.

    Demoappen är en .NET 8-lösning med tre projekt:

    • Dataentiteter. Ett klassbibliotek som definierar den produktklass som används i webbappen och webb-API:et.
    • Produkter. Ett webb-API som returnerar en lista över produkter i katalogen med sina egenskaper.
    • Lagra. En Blazor-webbapp visar dessa produkter för webbplatsbesökare.

Om du vill köra appen ändrar du de projekt som startas:

  1. På menyn väljer du Projekt>Konfigurera startprojekt....

  2. I dialogrutan Lösningsegenskapssidor väljer du Flera startprojekt.

    En skärmbild av dialogrutan för att välja startprojekt. Produkter och Store är inställda på Start.

  3. I kolumnen Åtgärd anger du Produkter och Arkiv till Start.

  4. Välj OK.

  5. Kör appen genom att trycka på F5 eller genom att välja Starta i verktygsfältet.

    Appen öppnar två instanser av standardwebbläsaren. Den ena visar JSON-utdata för webb-API:et och den andra visar Blazor Web App.

  6. I webbappen väljer du Produkter på menyn. Du bör se det här felet.

    En skärmbild som visar att produkterna inte kan läsas in.

  7. Stoppa appen genom att trycka på Skift+F5 eller välj Stoppa felsökning i verktygsfältet.

Den här appen är ny för dig. Du är inte säker på hur slutpunkterna och tjänsterna konfigureras. Nu ska vi lägga till .NET Aspire-orkestrering och se om det kan hjälpa dig att diagnostisera problemet.

Registrera den befintliga appen i .NET Aspire-orkestrering

I Visual Studio:

  1. Högerklicka på Store-projektet i Solution Explorer och välj sedan Lägg till.NET> Aspire Orchestrator-stöd....

    En skärmbild av orkestreringsdialogrutan i Visual Studio.

  2. I dialogrutan Lägg till .NET Aspire Orchestrator Support väljer du OK.

    Nu kan du se att AppHost - och ServiceDefaults-projekten läggs till i lösningen. AppHost-projektet anges också som startprojekt.

  3. Kör appen genom att trycka på F5 eller genom att välja Starta i verktygsfältet.

    Den här gången öppnar lösningen ett enda webbläsarfönster med instrumentpanelen .NET Aspire.

    En skärmbild av .NET Aspire-instrumentpanelen.

  4. Välj slutpunkten för butiksprojektet och välj sedan Produkter. Du bör se samma fel som tidigare.

  5. Gå tillbaka till instrumentpanelen.

    En skärmbild som visar ett felmeddelande i butiksprojektet.

  6. Välj det röda felmeddelandet bredvid Körs och välj sedan Visa i kolumnen Information.

    En skärmbild av instrumentpanelen som visar felinformationen.

  7. Bläddra igenom felinformationen tills du kan se exception.message. Webbappen kämpar för att ansluta till localhost:5200. Port 5200 är porten som klientdelen tror att produkt-API:et körs på.

  8. Stoppa appen genom att trycka på Skift+F5 eller välj Stoppa felsökning i verktygsfältet.

Uppdatera orkestreringen så att den inkluderar produkt-API:et

Det finns många sätt att lösa det här problemet. Du kan utforska koden, ta reda på hur klientdelen konfigureras, redigera koden eller ändra start Inställningar.json eller appsettings.json filer.

Med .NET Aspire kan du ändra orkestreringen så att produkt-API:et svarar på port 5200.

I Visual Studio:

  1. Om du vill lägga till projektet Produkter i orkestreringen högerklickar du på projektet Produkter i Solution Explorer och väljer sedan Lägg till.NET> Aspire Orchestrator Support....

    En skärmbild av dialogrutan Visual Studio. Det finns redan ett .NET Aspire-orkestreringsprojekt i lösningen.

  2. I dialogrutan väljer du OK.

  3. Öppna AppHost-projektet i Solution Explorer och öppna sedan filen Program.cs.

    Utforska koden och se hur products-projektet läggs till i orkestreringen:

    var builder = DistributedApplication.CreateBuilder(args);

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

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

builder.Build().Run();

    Konfigurera sedan .NET Aspire för att lägga till en ny slutpunkt för produkt-API:et.

  4. builder.AddProject<Projects.Products>("products"); Ersätt raden med den här koden:

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

  5. Kör appen genom att trycka på F5 eller genom att välja Starta i verktygsfältet.

    Produktprojektet visas nu på instrumentpanelen med två slutpunkter.

    En skärmbild av instrumentpanelen som visar produkterna och lagrar projekt.

  6. Välj slutpunkten för Store-projektet och välj sedan Produkter.

    Produkterna visas nu i webbappen.

    En skärmbild som visar produkterna i webbappen.

  7. Stoppa appen genom att trycka på Skift+F5 eller välj Stoppa felsökning i verktygsfältet.

Den här metoden löser konfigurationsproblemet, men det är inte det bästa sättet att åtgärda problemet. Om du bestämmer dig för att använda .NET Aspire bör du också använda .NET Aspire-tjänstidentifiering.

Uppdatera webbappen så att den använder .NET Aspire-tjänstidentifiering

I Visual Studio:

  1. Öppna AppHost-projektet i Solution Explorer och öppna sedan filen Program.cs.

  2. Ersätt koden i filen med den här koden:

    var builder = DistributedApplication.CreateBuilder(args);

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

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

builder.Build().Run();

    Koden ovan ordnar om projekten. Produkt-API:et skickas nu som en projektreferens till klientdelens Store-webbapp.

  3. Öppna Store-projektet i Solution Explorer och öppna sedan filen appsettings.json.

  4. Ta bort slutpunktskonfigurationsraderna:

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

    Inställningarna är nu:

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

  5. Öppna filen Program.cs under Store-projektet i Solution Explorer.

  6. Ersätt den här raden:

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

    med här raden:

    var url = "http://products";

  7. Kör appen genom att trycka på F5 eller genom att välja Starta i verktygsfältet.

  8. Välj slutpunkten för Store-projektet och välj sedan Produkter.

Appen fungerar fortfarande som förväntat, men klientdelen använder nu .NET Aspire-tjänstidentifiering för att få information om produkternas API-slutpunkt.