Übung – Integrieren einer vorhandenen ASP.NET Core Web-App

  • 8 Minuten

Sehen wir uns nun an, wie Sie .NET Aspire zu einer vorhandenen ASP.NET Core Web-App hinzufügen. Sie erfahren dabei, wie Sie den .NET Aspire-Stack zu einer vorhandenen ASP.NET Core-Web-App hinzufügen und dann die App ausführen. Außerdem erfahren Sie, wie Sie Mikroservices aus der ASP.NET Core-App aufrufen.

Erstellen Ihrer Umgebung

Um .NET Aspire zu einer vorhandenen Demo-ASP.NET Core Web App hinzuzufügen, müssen Sie zuerst die vorhandene App abrufen.

In einem Terminalfenster:

  1. Legen Sie das aktuelle Arbeitsverzeichnis auf die Stelle fest, an der Sie Ihren Code speichern möchten.

  2. Klonen Sie das Repository in einen neuen Ordner mit dem Namen ExampleApp:

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

Erkunden der Beispiel-App

Verwenden Sie Visual Studio, um die Demo-App zu erkunden.

  1. Öffnen Sie Visual Studio, und wählen Sie dann Projekt oder Projektmappe öffnen aus.

  2. Navigieren Sie im Dialogfeld Projekt oder Projektmappe öffnen zum Ordner ExampleApp/eShopAdmin, und wählen Sie dann EShopAdmin.sln aus.

  3. Wählen Sie Öffnen aus.

    Screenshot von Visual Studio mit den drei Projekten in der Demo-Projektmappe.

    Die Demo-App ist eine .NET 8-Projektmappe mit drei Projekten:

    • Data Entities. Eine Klassenbibliothek, die die in der Web App und Web-API verwendete Klasse Product definiert.
    • Produkte. Eine Web-API, die eine Liste von Produkten im Katalog mit ihren Eigenschaften zurückgibt.
    • Store. Eine Blazor Web-App zeigt diese Produkte Websitebesucherinnen und -besuchern an.

Um die App erfolgreich auszuführen, ändern Sie die Projekte, die gestartet werden:

  1. Wählen Sie im Menü Projekt>Startprojekte konfigurieren … aus.

  2. Wählen Sie im Dialogfeld Projektmappeneigenschaftenseiten die Option Mehrere Startprojekte aus.

    Screenshot des Dialogfelds zum Auswählen von Startprojekten. Products und Store sind auf „Start“ festgelegt.

  3. Legen Sie in der Spalte Action Products und Store auf Start fest.

  4. Wählen Sie OK aus.

  5. Führen Sie die App aus, indem Sie F5drücken oder auf der Symbolleiste Start auswählen.

    Die App öffnet zwei Instanzen Ihres Standardwebbrowsers. Eine zeigt die JSON-Ausgabe der Web-API und die andere zeigt die Blazor Web-App.

  6. Wählen Sie in der Web-App im Menü Products aus. Der folgende Fehler sollte angezeigt werden.

    Screenshot, der zeigt, dass die Produkte nicht geladen werden können.

  7. Beenden Sie die App, indem Sie Umschalt+F5 drücken, oder wählen Sie Debuggen beenden in der Symbolleiste aus.

Diese App ist neu für Sie. Sie sind nicht sicher, wie die Endpunkte und Dienste konfiguriert sind. Fügen wir .NET Aspire-Orchestrierung hinzu und sehen, ob es helfen kann, das Problem zu diagnostizieren.

Eintragen der vorhandenen App in .NET Aspire Orchestration

In Visual Studio:

  1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Projekt Store, und wählen Sie dann Hinzufügen>.NET Aspire-Orchestratorsupport … aus.

    Screenshot des Orchestrierungsdialogfelds in Visual Studio.

  2. Wählen Sie im Dialogfeld .NET Aspire Orchestrator-Support hinzufügen OK aus.

    Jetzt können Sie sehen, dass die Projekte AppHost und ServiceDefaults der Projektmappe hinzugefügt werden. Das Projekt AppHost wird auch als Startprojekt festgelegt.

  3. Führen Sie die App aus, indem Sie F5drücken oder auf der Symbolleiste Start auswählen.

    Dieses Mal öffnet die Lösung ein einzelnes Browserfenster mit dem .NET Aspire-Dashboard.

    Screenshot des .NET Aspire-Dashboards.

  4. Wählen Sie den Endpunkt für das Projekt Store und dann Produkte aus. Es sollte der gleiche Fehler wie zuvor angezeigt werden.

  5. Kehren Sie zum Dashboard zurück.

    Screenshot mit einer Fehlerbenachrichtigung im Store-Projekt.

  6. Wählen Sie die rote Fehlermeldung neben Wird ausgeführt aus, und wählen Sie dann in der Spalte Details die Option Ansicht aus.

    Screenshot des Dashboards mit den Fehlerdetails.

  7. Scrollen Sie durch die Fehlerdetails, bis exception.message angezeigt wird. Die Web-App hat Schwierigkeiten, eine Verbindung mit localhost:5200 herzustellen. Port 5200 ist der Port, von dem das Front-End glaubt, dass die Produkt-API darauf ausgeführt wird.

  8. Beenden Sie die App, indem Sie Umschalt+F5 drücken, oder wählen Sie Debuggen beenden in der Symbolleiste aus.

Aktualisieren der Orchestrierung, um die Produkt-API einzuschließen

Es gibt viele Möglichkeiten, dieses Problem zu beheben. Sie können den Code untersuchen, herausfinden, wie das Front-End konfiguriert ist, den Code bearbeitet oder die Dateien launchSettings.json oder appsettings.json ändern.

Mit .NET Aspire können Sie die Orchestrierung so ändern, dass die Produkt-API auf Port 5200 reagiert.

In Visual Studio:

  1. Um das Projekt Products zur Orchestrierung hinzuzufügen, klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Projekt Products, und wählen Sie dann Hinzufügen>.NET Aspire Orchestrator Support … aus.

    Screenshot des Visual Studio-Dialogfelds. In der Lösung ist bereits ein .NET Aspire Orchestrator-Projekt vorhanden.

  2. Wählen Sie im Dialogfeld OK aus.

  3. Öffnen Sie im Projektmappen-Explorer das Projekt AppHost, und öffnen Sie dann die Datei Program.cs.

    Erkunden Sie den Code, und sehen Sie, wie das Projekt Products der Orchestrierung hinzugefügt wird:

    var builder = DistributedApplication.CreateBuilder(args);

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

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

builder.Build().Run();

    Konfigurieren Sie als Nächstes .NET Aspire, um einen neuen Endpunkt für die Produkt-API hinzuzufügen.

  4. Ersetzen Sie builder.AddProject<Projects.Products>("products");-Zeile durch den folgenden Code:

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

  5. Führen Sie die App aus, indem Sie F5drücken oder auf der Symbolleiste Start auswählen.

    Das Projekt Products wird nun auf dem Dashboard mit zwei Endpunkten aufgeführt.

    Screenshot des Dashboards mit den Projekten Products und Store.

  6. Wählen Sie den Endpunkt für das Projekt Store und dann Products aus.

    Die Produkte werden jetzt in der Web-App angezeigt.

    Screenshot der Produkte in der Web-App.

  7. Beenden Sie die App, indem Sie Umschalt+F5 drücken, oder wählen Sie Debuggen beenden in der Symbolleiste aus.

Dieser Ansatz löst das Konfigurationsproblem, ist aber nicht die beste Möglichkeit, das Problem zu beheben. Wenn Sie sich für die Verwendung von .NET Aspire entscheiden, sollten Sie auch .NET Aspire-Dienstermittlung verwenden.

Aktualisieren der Web-App für die Verwendung der .NET Aspire-Dienstermittlung

In Visual Studio:

  1. Öffnen Sie im Projektmappen-Explorer das Projekt AppHost, und öffnen Sie dann die Datei Program.cs.

  2. Ersetzen Sie den Code in der Datei durch den folgenden Code.

    var builder = DistributedApplication.CreateBuilder(args);

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

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

builder.Build().Run();

    Durch den obigen Code werden die Projekte neu angeordnet. Die Produkt-API wird nun als Projektverweis auf die Front-End Store-Web-App übergeben.

  3. Öffnen Sie im Projektmappen-Explorer das Projekt Store, und öffnen Sie dann die Datei appsettings.json.

  4. Löschen Sie die Endpunktkonfigurationszeilen:

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

    Die Einstellungen sind jetzt:

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

  5. Öffnen Sie im Projektmappen-Explorerunter dem Projekt Store die Datei Program.cs.

  6. Ersetzen Sie die Zeile:

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

    Durch diese Zeile:

    var url = "http://products";

  7. Führen Sie die App aus, indem Sie F5drücken oder auf der Symbolleiste Start auswählen.

  8. Wählen Sie den Endpunkt für das Projekt Store und dann Products aus.

Die App funktioniert weiterhin wie erwartet, aber das Front-End verwendet jetzt .NET Aspire-Dienstermittlung, um Informationen über den Produkt-API-Endpunkt abzurufen.