Cvičení – integrace existující webové aplikace ASP.NET Core
Teď se podíváme, jak přidat .NET Aspire do existující webové aplikace ASP.NET Core. Dále se dozvíte, jak přidat zásobník .NET Aspire do existující webové aplikace ASP.NET Core a pak aplikaci spustit. Také se dozvíte, jak volat mikroslužby z aplikace ASP.NET Core.
Nastavení prostředí
Pokud chcete přidat .NET Aspire do existující ukázkové webové aplikace ASP.NET Core, musíte nejprve získat existující aplikaci.
V okně terminálu:
Nastavte aktuální pracovní adresář na místo, kam chcete kód uložit.
Naklonujte úložiště do nové složky s názvem ExampleApp:
git clone https://github.com/MicrosoftDocs/mslearn-aspire-starter ExampleApp
Prozkoumání ukázkové aplikace
Pomocí sady Visual Studio můžete prozkoumat ukázkové aplikace.
Otevřete Visual Studio a pak vyberte Otevřít projekt nebo řešení.
V dialogovém okně Otevřít projekt nebo řešení přejděte do složky ExampleApp/eShopAdmin a pak vyberte EShopAdmin.sln.
Vyberte Otevřít.
Ukázková aplikace je řešení .NET 8 se třemi projekty:
- datových entit. Knihovna tříd, která definuje třídu Product použitou ve webové aplikaci a webovém rozhraní API.
- Produkty. Webové rozhraní API, které vrací seznam produktů v katalogu se svými vlastnostmi.
- Store. Webová aplikace Blazor zobrazuje tyto produkty návštěvníkům webu.
Pokud chcete aplikaci úspěšně spustit, změňte projekty, které se spustí:
V nabídce vyberte Project>Configure Startup Projects....
V dialogovém okně Stránky vlastností řešení vyberte Více spouštěcích projektů.
Ve sloupci akce nastavte Produkty a Obchod na Start.
Vyberte OK.
Spusťte aplikaci stisknutím klávesy F5nebo výběrem Spustit na panelu nástrojů.
Aplikace otevře dvě instance výchozího webového prohlížeče. Jeden zobrazuje výstup JSON webového rozhraní API a druhá zobrazuje webovou aplikaci Blazor.
Ve webové aplikaci vyberte v nabídce Produkty. Měla by se zobrazit tato chyba.
Zastavte aplikaci stisknutím kláves Shift+F5nebo na panelu nástrojů vyberte Zastavit ladění.
Tato aplikace je pro vás nová. Nejste si jistí, jak jsou nakonfigurované koncové body a služby. Pojďme přidat orchestraci .NET Aspire a zjistit, jestli může pomoct s diagnostikou problému.
Zařazení existující aplikace do orchestrace .NET Aspire
V aplikaci Visual Studio:
V průzkumníku řešení klikněte pravým tlačítkem na projekt Store a pak vyberte Přidat>.NET Aspire Orchestrator Support....
V dialogovém okně Přidat podporu pro .NET Aspire Orchestrator vyberte OK.
Nyní můžete vidět, že projekty AppHost a ServiceDefaults jsou přidány do řešení. Projekt AppHost je také nastaven jako spouštěcí projekt.
Spusťte aplikaci stisknutím klávesy F5nebo výběrem Spustit na panelu nástrojů.
Tentokrát řešení otevře jedno okno prohlížeče s řídicím panelem .NET Aspire.
Vyberte koncový bod pro projekt store a pak vyberte Products. Měla by se zobrazit stejná chyba jako předtím.
Vraťte se na řídicí panel.
Vyberte červené oznámení o chybě vedle Spuštěnoa pak ve sloupci Podrobnosti vyberte Zobrazit.
Projděte si podrobnosti o chybě, dokud neuvidíte exception.message. Webová aplikace se snaží připojit k localhost:5200. Port 5200 je port, na kterém front-end myslí, že rozhraní API produktů běží.
Zastavte aplikaci stisknutím kláves Shift+F5nebo na panelu nástrojů vyberte Zastavit ladění.
Aktualizace orchestrace tak, aby zahrnovala rozhraní API produktů
Existuje mnoho způsobů, jak tento problém vyřešit. Kód můžete prozkoumat. Zjistěte, jak je front-end nakonfigurovaný, upravit kód nebo změnit launchSettings.json nebo appsettings.json soubory.
Pomocí rozhraní .NET Aspire můžete orchestraci změnit tak, aby rozhraní API produktů reagovalo na portu 5200.
V aplikaci Visual Studio:
Chcete-li přidat projekt Products do orchestrace, klikněte pravým tlačítkem myši na projekt Products v části Průzkumník řešení a potom zvolte Přidat>.NET Aspire Orchestrator Support....
V dialogovém okně vyberte OK.
V Průzkumníku řešeníotevřete projekt AppHost a pak otevřete soubor Program.cs.
Prozkoumejte kód a podívejte se, jak se do orchestrace přidá projekt Products:
var builder = DistributedApplication.CreateBuilder(args); builder.AddProject<Projects.Store>("store"); builder.AddProject<Projects.Products>("products"); builder.Build().Run();
Dále nakonfigurujte rozhraní .NET Aspire pro přidání nového koncového bodu pro rozhraní API produktů.
Nahraďte řádek
builder.AddProject<Projects.Products>("products");
tímto kódem:builder.AddProject<Projects.Products>("products") .WithHttpEndpoint(port: 5200, name: "products");
Spusťte aplikaci stisknutím klávesy F5nebo výběrem Spustit na panelu nástrojů.
Na řídicím panelu je nyní uveden projekt produkty se dvěma koncovými body.
Vyberte koncový bod pro projekt store Store a pak vyberte Products.
Produkty se teď zobrazují ve webové aplikaci.
Zastavte aplikaci stisknutím kláves Shift+F5nebo na panelu nástrojů vyberte Zastavit ladění.
Tento přístup vyřeší problém s konfigurací, ale není to nejlepší způsob, jak problém vyřešit. Pokud se rozhodnete použít .NET Aspire, měli byste také použít zjišťování služby .NET Aspire.
Aktualizace webové aplikace tak, aby používala zjišťování služby .NET Aspire
V aplikaci Visual Studio:
V Průzkumníku řešeníotevřete projekt AppHost a pak otevřete soubor Program.cs.
Nahraďte kód v souboru tímto kódem:
var builder = DistributedApplication.CreateBuilder(args); var products = builder.AddProject<Projects.Products>("products"); builder.AddProject<Projects.Store>("store") .WithReference(products); builder.Build().Run();
Tento kód změní pořadí projektů. Rozhraní API produktů se teď předává jako odkaz na projekt front-endové webové aplikace obchodu.
V Průzkumníku řešeníotevřete projekt , a pak otevřete soubor appsettings.json.
Odstraňte řádky konfigurace koncového bodu:
"ProductEndpoint": "http://localhost:5200", "ProductEndpointHttps": "https://localhost:5200"
Nastavení jsou teď:
{ "DetailedErrors": true, "Logging": { "LogLevel": { "Default": "Information", "Microsoft.AspNetCore": "Warning" } }, "AllowedHosts": "*" }
V Průzkumníku řešenív projektu Store otevřete soubor Program.cs.
Nahraďte tento řádek:
var url = builder.Configuration["ProductEndpoint"] ?? throw new InvalidOperationException("ProductEndpoint is not set");
s tímto řádkem:
var url = "http://products";
Spusťte aplikaci stisknutím klávesy F5nebo výběrem Spustit na panelu nástrojů.
Vyberte koncový bod pro projekt Store a pak vyberte Produkty.
Aplikace stále funguje podle očekávání, ale front-end teď používá zjišťování služby .NET Aspire k získání informací o koncovém bodu rozhraní API produktů.