Oefening: een nieuw .NET Aspire-project maken

  • 10 minuten

Voordat u aan een nieuwe service voor het nieuwste project van uw bedrijf gaat werken, wilt u controleren of uw systeem voldoet aan alle vereisten voor .NET Aspire. De beste manier om te controleren is het maken van een nieuw .NET Aspire-project met een starterssjabloon.

In de oefening installeert u alle vereisten en maakt u vervolgens een nieuwe .NET Aspire Starter-app. Vervolgens ziet u hoe u een cacheonderdeel toevoegt met Redis aan de app. Ten slotte test u de toepassing en verkent u snel het Aspire Dashboard.

Kies dit tabblad om de stappen in deze oefening voor Visual Studio te bekijken.

Vereiste onderdelen installeren

We hebben de vereisten in de vorige les besproken. Laten we deze nu gaan installeren.

.NET 8 installeren

Volg deze .NET 8-koppeling en selecteer het juiste installatieprogramma voor uw besturingssysteem. Als u bijvoorbeeld Windows 11 en een moderne processor gebruikt, selecteert u de x64 .NET 8 SDK voor Windows.

Nadat het downloaden is voltooid, voert u het installatieprogramma uit en volgt u de instructies. Voer in een terminalvenster de volgende opdracht uit om te controleren of de installatie is geslaagd:

dotnet --version

U ziet nu het versienummer van de .NET SDK die u hebt geïnstalleerd. Voorbeeld:

8.0.300-preview.24203.14

Visual Studio 2022 Preview installeren

Volg deze koppeling naar Visual Studio 2022 Preview en selecteer Voorbeeld downloaden. Nadat het downloaden is voltooid, voert u het installatieprogramma uit en volgt u de instructies.

Docker Desktop installeren

Volg deze Docker Desktop-koppeling en selecteer het juiste installatieprogramma voor uw besturingssysteem. Nadat het downloaden is voltooid, voert u het installatieprogramma uit en volgt u de instructies.

Open de Docker Desktop-toepassing en accepteer de serviceovereenkomst.

De workload .NET Aspire installeren

Installeer de workload .NET Aspire met Visual Studio:

  1. Open het installatieprogramma van Visual Studio.

  2. Selecteer Wijzigen naast Visual Studio.

  3. Selecteer de workload ASP.NET en webontwikkeling .

  4. Selecteer .NET Aspire SDK (preview) in het deelvenster Installatiedetails.

  5. Selecteer Wijzigen om het .NET Aspire-onderdeel te installeren.

  6. Controleer of de nieuwste versie van .NET Aspire is geïnstalleerd. Voer in een nieuwe terminal deze opdracht uit:

    dotnet workload list

Nadat u de workload hebt geïnstalleerd, ziet u het volgende:

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.

Een nieuwe .NET Aspire Starter-app maken

Nu de vereisten zijn geïnstalleerd, gaan we een nieuwe app maken.

  1. Open Visual Studio. Selecteer een nieuw project maken in het dialoogvenster.

  2. Voer in het vak Zoeken naar sjablonen een streven in.

  3. Selecteer .NET Aspire Starter-toepassing en selecteer vervolgens Volgende.

  4. Voer AspireTestApp in het vak Naam van de oplossing in.

  5. Voer in het vak Locatie de map in waar u de nieuwe app wilt maken.

  6. Selecteer Volgende.

  7. Laat de standaard .NET 8.0 (Langetermijnondersteuning) geselecteerd.

  8. Schakel Redis gebruiken uit voor caching (hiervoor is een ondersteunde containerruntime vereist).

    In de volgende stappen voegt u handmatig Redis-ondersteuning toe.

  9. Selecteer Maken.

  10. Selecteer fouten opsporen in het menu en selecteer vervolgens Foutopsporing starten (U kunt ook op F5 drukken).

  11. Als u wordt gevraagd Docker Engine te starten, selecteert u Ja.

Het dashboard wordt geopend in uw standaardwebbrowser.

Een schermopname van het Aspire-dashboard met de Blazor App- en API-services.

Selecteer de eindpunt-URL van het webfrontend . De poort wordt willekeurig toegewezen, zodat uw dashboard mogelijk niet overeenkomt.

Een schermopname van de front-end van de Blazor-web-app.

De Blazor-app heeft een eenvoudige tellerpagina en een weerpagina die de back-end-API-service aanroept om prognosegegevens weer te geven.

Sluit de browsertabbladen voor de Blazor-app en het .NET Aspire-dashboard. Stop in Visual Studio met foutopsporing.

Een cacheonderdeel toevoegen aan een .NET Aspire-project

Nu gaan we een Redis-cacheonderdeel toevoegen aan het .NET Aspire-project. We beginnen met de app-host:

  1. Klik in Solution Explorer met de rechtermuisknop op het project AspireTestApp.AppHost en selecteer NuGet-pakketten beheren.
  2. Selecteer het tabblad Bladeren en selecteer Prerelease opnemen.
  3. Zoek naar aspire redis en selecteer het Aspire.Hosting.Redis-pakket.
  4. Selecteer in het rechterdeelvenster voor Versie de meest recente versie 8.0.0 en selecteer Vervolgens Installeren.
  5. Selecteer In het dialoogvenster Licentie accepteren de optie Accepteren.

  1. Als u de Redis-configuratie wilt toevoegen aan het app-hostproject, opent u het bestand AspireTestApp.AppHost/Program.cs en voegt u deze code toe:

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

    Met deze code configureert u de indeling om een lokale Redis-containerinstantie te maken.

  2. Wijzig de huidige webfrontend-service om de Redis-cache te gebruiken. Wijzig deze code:

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

    Naar deze code:

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

    De WithReference extensiemethode configureert de gebruikersinterface zodanig dat Redis automatisch wordt gebruikt voor uitvoercache.

    Vervolgens kunnen we Redis gebruiken in het verbruikende project.

  1. Klik in Solution Explorer met de rechtermuisknop op het Project AspireTestApp.Web en selecteer NuGet-pakketten beheren.
  2. Selecteer het tabblad Bladeren en selecteer Prerelease opnemen.
  3. Zoek naar aspire redis en selecteer het Pakket Aspire.StackExchange.Redis.OutputCaching.
  4. Selecteer in het rechterdeelvenster voor Versie de meest recente versie 8.0.0 en selecteer Vervolgens Installeren.
  5. Selecteer In het dialoogvenster Licentie accepteren de optie Accepteren.

Gebruik nu Visual Studio om code toe te voegen om het Redis-onderdeel te gebruiken.

  1. Als dat nodig is, opent u de Oplossing AspireTestApp in Visual Studio.

  2. Selecteer in Solution Explorer onder het project AspireTestApp.Web Program.cs.

  3. Voeg deze code toe onder var builder = WebApplication.CreateBuilder(args);:

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

    Deze code:

    • Hiermee configureert u ASP.NET Core-uitvoercache voor het gebruik van een Redis-exemplaar met de opgegeven verbindingsnaam.
    • Hiermee worden automatisch bijbehorende statuscontroles, logboekregistratie en telemetrie ingeschakeld.

  4. Vervang de inhoud van AspireTestApp.Web/Components/Pages/Home.razor door de volgende code:

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

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app on @DateTime.Now

    In de voorgaande code geeft het OutputCache kenmerk een duur van 10 seconden op. Nadat de pagina in de cache is opgeslagen, ontvangt elke volgende aanvraag in het venster van 10 seconden de uitvoer in de cache.

U kunt zien dat Aspire is ontworpen om het eenvoudig te maken om nieuwe onderdelen aan uw toepassing toe te voegen. U voegt een nieuw onderdeel toe aan uw toepassing door een NuGet-pakket toe te voegen en vervolgens een paar regels code toe te voegen aan het Program.cs-bestand in de web - en AppHost-projecten . Streven configureert vervolgens automatisch de Redis-container en de uitvoercache voor u.

De toepassing testen

Nu gaan we de toepassing uitvoeren om de cache in actie te zien. In Visual Studio:

  1. Selecteer fouten opsporen in het menu en selecteer vervolgens Foutopsporing starten (U kunt ook op F5 drukken). De oplossing wordt gebouwd en het Aspire Dashboard wordt geopend in uw standaardwebbrowser.

  2. Selecteer de eindpunt-URL voor de webfrontend-service om de startpagina van de toepassing weer te geven.

  3. Vernieuw de pagina een paar keer in de browser. De tijd op de pagina wordt niet gewijzigd binnen de cacheduur van 10 seconden.

    Een schermopname van de bijgewerkte Aspire Starter-sjabloon met caching op de startpagina.

    De oplossing maakt een Redis-container. Open Docker Desktop om te zien dat de container wordt uitgevoerd.

    Een schermopname van de Redis-container die wordt uitgevoerd in Docker Desktop.

  4. Druk op Shift+F5 om de oplossing te stoppen die wordt uitgevoerd in Visual Studio.

  5. Open Docker Desktop en selecteer Containers/Apps. U ziet dat redis :latest niet meer wordt uitgevoerd.

U hebt gezien hoe eenvoudig het is om een nieuw cacheonderdeel toe te voegen aan een toepassing met behulp van .NET Aspire. U hebt een NuGet-pakket toegevoegd en vervolgens enkele regels code toegevoegd. .NET Aspire heeft automatisch de Redis-container en de uitvoercache voor u geconfigureerd.