Übung: Erstellen eines neuen .NET Aspire-Projekts

  • 10 Minuten

Bevor Sie mit der Arbeit an einem neuen Dienst für das neueste Projekt Ihres Unternehmens beginnen, möchten Sie überprüfen, ob Ihr System alle Voraussetzungen für .NET Aspire hat. Am besten können Sie ein neues .NET Aspire-Projekt mit einer Starter-Vorlage erstellen.

In der Übung installieren Sie alle erforderlichen Komponenten, und erstellen dann eine neue .NET Aspire Starter-App. Dann erfahren Sie, wie Sie der App mit Redis eine Zwischenspeicherungskomponente hinzufügen. Schließlich testen Sie die Anwendung und erkunden das Aspire Dashboard.

Wählen Sie diese Registerkarte aus, um die Schritte in dieser Übung für Visual Studioanzuzeigen.

Installieren der erforderlichen Komponenten

Wir haben die Voraussetzungen in der vorherigen Einheit erörtert. Lassen Sie uns jetzt die Installation durchgehen.

Installieren von .NET 8

Folgen Sie diesem .NET 8-Link, und wählen Sie das richtige Installationsprogramm für Ihr Betriebssystem aus. Wenn Sie beispielsweise Windows 11 und einen modernen Prozessor verwenden, wählen Sie das x64 .NET 8 SDK für Windows aus.

Führen Sie nach Abschluss des Downloads das Installationsprogramm aus, und folgen Sie den Anweisungen. Führen Sie in einem Terminalfenster den folgenden Befehl aus, um zu überprüfen, ob die Installation erfolgreich war:

dotnet --version

Die Versionsnummer des .NET SDK, das Sie installiert haben, sollte angezeigt werden. Zum Beispiel:

8.0.300-preview.24203.14

Installieren der Vorschauversion von Visual Studio 2022

Folgen Sie diesem Visual Studio 2022 Preview-Link, und wählen Sie Downloadvorschau aus. Führen Sie nach Abschluss des Downloads das Installationsprogramm aus und folgen Sie den Anweisungen.

Installation von Docker Desktop

Folgen Sie diesem Docker Desktop-Link und wählen Sie das richtige Installationsprogramm für Ihr Betriebssystem aus. Führen Sie nach Abschluss des Downloads das Installationsprogramm aus, und folgen Sie den Anweisungen.

Öffnen Sie die Docker Desktop-Anwendung, und akzeptieren Sie den Servicevertrag.

Installieren der .NET Aspire-Workload

Installieren Sie die .NET Aspire-Workload mit Visual Studio:

  1. Öffnen Sie den Visual Studio-Installer.

  2. Wählen Sie Ändern neben Visual Studio aus.

  3. Wählen Sie die Workload ASP.NET und Webentwicklung aus.

  4. Wählen Sie im Bereich Installationsdetails .NET Aspire SDK (Preview) aus.

  5. Wählen Sie Ändern aus, um die .NET Aspire-Komponente zu installieren.

  6. Um zu überprüfen, ob die neueste Version von .NET Aspire installiert ist, führen Sie in einem neuen Terminal diesen Befehl aus:

    dotnet workload list

Nach der Installation der Workload wird Folgendes angezeigt:

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.

Erstellen einer neuen .NET Aspire Starter-App

Nachdem die erforderlichen Komponenten installiert wurden, erstellen wir nun eine neue App.

  1. Öffnen Sie Visual Studio. Wählen Sie im Dialogfeld Neues Projekt erstellen aus.

  2. Geben Sie im Feld Nach Vorlagen suchen den Suchbegriff aspire ein.

  3. Wählen Sie .NET Aspire Starter Applicationund dann Weiter aus.

  4. Geben Sie im Feld Lösungsname AspireTestApp ein.

  5. Geben Sie im Feld Speicherort den Pfad ein, an dem Sie das Projekt erstellen möchten.

  6. Wählen Sie Weiter aus.

  7. Lassen Sie die Standardeinstellung .NET 8.0 (Long Term Support) ausgewählt.

  8. Deaktivieren Sie die Option Redis zum Zwischenspeichern verwenden (erfordert eine unterstützte Containerlaufzeit).

    In den nächsten Schritten fügen Sie die Redis-Unterstützung manuell hinzu.

  9. Klicken Sie auf Erstellen.

  10. Wählen Sie im Menü Debuggen und dann Debuggen starten aus (Alternativ drücken Sie F5).

  11. Wenn Sie zum Starten des Docker-Moduls aufgefordert werden, wählen Sie Ja aus.

Das Dashboard wird in Ihrem Standardwebbrowser geöffnet.

Screenshot des Aspire-Dashboards mit der Blazor-App und den API-Diensten.

Wählen Sie die Endpunkt-URL webfrontend aus. Der Port wird zufällig zugewiesen, sodass Ihr Dashboard möglicherweise anders aussieht.

Screenshot des Blazor-Web-App-Frontends.

Die Blazor-App verfügt über eine einfache Gegenseite und eine Wetterseite, die den Back-End-API-Dienst aufruft, um Prognosedaten anzuzeigen.

Schließen Sie die Browserregisterkarten für die Blazor-App und das .NET Aspire-Dashboard. Beenden Sie in Visual Studio das Debuggen.

Hinzufügen einer Zwischenspeicherungskomponente zu einem .NET Aspire-Projekt

Nun fügen wir dem .NET Aspire-Projekt eine Zwischenspeicherkomponente hinzu. Wir beginnen mit dem App-Host:

  1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Projekt AspireTestApp.AppHost, und wählen Sie NuGet-Pakete verwalten aus.
  2. Wählen Sie auf der Registerkarte Durchsuchen die Option Vorabversion einbeziehen aus.
  3. Suchen Sie nach aspire redis, und wählen Sie das Paket Aspire.Hosting.Redis aus.
  4. Wählen Sie im rechten Bereich für Version die neueste Version 8.0.0 und dann Installieren aus.
  5. Klicken im Dialogfeld Zustimmung zur Lizenz auf Ich stimme zu.

  1. Um die Redis-Konfiguration zum App-Hostprojekt hinzuzufügen, öffnen Sie die Datei AspireTestApp.AppHost/Program.cs, und fügen Sie diesen Code hinzu:

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

    Dieser Code konfiguriert die Orchestrierung, um eine lokale Redis-Containerinstanz zu erstellen.

  2. Ändern Sie den aktuellen webfrontend-Dienst so, dass er den Redis-Cache verwendet. Ändern Sie diesen Code:

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

    In diesen Code:

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

    Die Erweiterungsmethode WithReference konfiguriert die Benutzeroberfläche für die automatische Verwendung von Redis für die Ausgabezwischenspeicherung.

    Als Nächstes können wir Redis im verbrauchenden Projekt verwenden.

  1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Projekt AspireTestApp.Web, und wählen Sie NuGet-Pakete verwalten aus.
  2. Wählen Sie auf der Registerkarte Durchsuchen die Option Vorabversion einbeziehen aus.
  3. Suchen Sie nach aspire redis, und wählen Sie das Paket Aspire.StackExchange.Redis.OutputCaching aus.
  4. Wählen Sie im rechten Bereich für Version die neueste Version 8.0.0 und dann Installieren aus.
  5. Klicken im Dialogfeld Zustimmung zur Lizenz auf Ich stimme zu.

Verwenden Sie nun Visual Studio, um Code zur Verwendung der Redis-Komponente hinzuzufügen.

  1. Öffnen Sie bei Bedarf die Projektmappe AspireTestApp in Visual Studio.

  2. Wählen Sie im Projektmappen-Explorer unter dem Projekt AspireTestApp.Web Program.cs aus.

  3. Fügen Sie diesen Code unter var builder = WebApplication.CreateBuilder(args); hinzu:

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

    Dieser Code:

    • Konfiguriert ASP.NET Core-Ausgabezwischenspeicherung, um eine Redis-Instanz mit dem angegebenen Verbindungsnamen zu verwenden.
    • Aktiviert automatisch entsprechende Integritätsprüfungen, Protokollierung und Telemetrie.

  4. Ersetzen Sie den Inhalt von AspireTestApp.Web/Components/Pages/Home.razor durch den folgenden Code:

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

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app on @DateTime.Now

    Im vorherigen Code gibt das Attribut OutputCache eine Dauer von 10 Sekunden an. Nachdem die Seite zwischengespeichert wurde, empfängt jede nachfolgende Anforderung innerhalb des 10-Sekunden-Fensters die zwischengespeicherte Ausgabe.

Sie sehen, dass Aspire so konzipiert ist, dass es einfach ist, Ihrer Anwendung neue Komponenten hinzuzufügen. Sie fügen Ihrer Anwendung eine neue Komponente hinzu, indem Sie ein NuGet-Paket hinzufügen und dann der Datei Program.cs in den Web- und AppHost-Projekten einige Codezeilen hinzufügen. Aspire konfiguriert dann automatisch den Redis-Container und die Ausgabezwischenspeicherung für Sie.

Testen der Anwendung

Nun führen wir die Anwendung aus, um die Zwischenspeicherung in Aktion zu sehen. In Visual Studio:

  1. Wählen Sie im Menü Debuggen und dann Debuggen starten aus (Alternativ drücken Sie F5). Die Lösung wird erstellt, und das Aspire Dashboard wird in Ihrem Standardwebbrowser geöffnet.

  2. Wählen Sie die Endpunkt-URL für den webfrontend-Dienst aus, um die Startseite der Anwendung anzuzeigen.

  3. Aktualisieren Sie die Seite im Browser ein paar Mal. Die Zeit auf der Seite ändert sich innerhalb der Cachedauer von 10 Sekunden nicht.

    Screenshot der aktualisierten Aspire Starter-Vorlage mit Zwischenspeichern auf der Startseite.

    Die Lösung erstellt einen Redis-Container. Öffnen Sie Docker Desktop, um den ausgeführten Container anzuzeigen.

    Screenshot des Redis-Containers, der in Docker Desktop ausgeführt wird.

  4. Um die Ausführung der Projektmappe in Visual Studio zu beenden, drücken Sie Umschalt+F5.

  5. Öffnen Sie Docker Desktop, und wählen Sie Containers/Apps aus. Sie sollten sehen, dass redis:latest nicht mehr ausgeführt wird.

Sie haben gesehen, wie einfach es ist, einer Anwendung mit .NET Aspire eine neue Zwischenspeicherungskomponente hinzuzufügen. Sie haben ein NuGet-Paket und dann einige Codezeilen hinzugefügt. .NET Aspire konfiguriert automatisch den Redis-Container und die Ausgabezwischenspeicherung für Sie.