Esercizio - Creare un nuovo progetto .NET Aspire

  • 10 minuti

Prima di iniziare a lavorare su un nuovo servizio per il progetto più recente dell'azienda, si vuole verificare che il sistema disponga di tutti i prerequisiti per .NET Aspire. Il modo migliore per verificare è creare un nuovo progetto .NET Aspire con un modello di base.

Nell'esercizio si installeranno tutti i prerequisiti e quindi si creerà una nuova app .NET Aspire Starter. Si vedrà quindi come aggiungere un componente di memorizzazione nella cache usando Redis all'app. Infine, si testerà l'applicazione e si esplorerà rapidamente il dashboard di Aspire.

Scegliere questa scheda per visualizzare i passaggi descritti in questo esercizio per Visual Studio.

Installare i prerequisiti

Sono stati illustrati i prerequisiti nell'unità precedente. Esaminiamo ora l'installazione.

Installare .NET 8

Seguire questo collegamento a .NET 8 e selezionare il programma di installazione corretto per il sistema operativo. Ad esempio, se si usa Windows 11 e un processore moderno, selezionare x64 .NET 8 SDK per Windows.

Al termine del download, eseguire il programma di installazione e seguire le istruzioni. In una finestra del terminale eseguire il comando seguente per verificare che l'installazione sia riuscita:

dotnet --version

Verrà visualizzato il numero di versione di .NET SDK installato. Ad esempio:

8.0.300-preview.24203.14

Installare Visual Studio 2022 Preview

Seguire questo collegamento di Visual Studio 2022 Preview e selezionare Scarica anteprima. Al termine del download, eseguire il programma di installazione e seguire le istruzioni.

Installare Docker Desktop

Seguire questo collegamento a Docker Desktop e selezionare il programma di installazione corretto per il sistema operativo. Al termine del download, eseguire il programma di installazione e seguire le istruzioni.

Aprire l'applicazione Docker Desktop e accettare il contratto di servizio.

Installare il carico di lavoro .NET Aspire

Installare il carico di lavoro .NET Aspire con Visual Studio:

  1. Aprire il programma di installazione di Visual Studio.

  2. Selezionare Modifica accanto a Visual Studio.

  3. Selezionare il carico di lavoro ASP.NET e sviluppo Web.

  4. Nel pannello Dettagli installazione selezionare .NET Aspire SDK (anteprima).

  5. Selezionare Modifica per installare il componente .NET Aspire.

  6. Verificare che la versione più recente di .NET Aspire sia installata, in un nuovo terminale eseguire questo comando:

    dotnet workload list

Dopo aver installato il carico di lavoro, viene visualizzato:

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.

Creare una nuova app .NET Aspire Starter

Dopo aver installato i prerequisiti, creare una nuova app.

  1. Aprire Visual Studio. Nella finestra di dialogo selezionare Crea un nuovo progetto.

  2. Nella casella Cerca modelli immettere Aspire.

  3. Selezionare Applicazione starter .NET Aspire e quindi selezionare Avanti.

  4. Nella casella Nome soluzione immettere AspireTestApp.

  5. Nella casella Percorso immettere la cartella in cui si vuole creare la nuova app.

  6. Selezionare Avanti.

  7. Lasciare selezionata l'opzione predefinita .NET 8.0 (Supporto a lungo termine).

  8. Deselezionare Usa Redis per la memorizzazione nella cache (richiede un runtime di contenitori supportato).

    Nei passaggi successivi verrà aggiunto manualmente il supporto di Redis.

  9. Seleziona Crea.

  10. Dal menu selezionare Debug e quindi Avvia debug (in alternativa premere F5).

  11. Se viene richiesto di avviare il motore Docker, selezionare Sì.

Il dashboard viene aperto nel Web browser predefinito.

Screenshot del dashboard di Aspire che mostra i servizi API e app Blazor.

Selezionare l'URL dell'endpoint webfrontend. La porta viene assegnata in modo casuale in modo che il dashboard non corrisponda.

Screenshot del front-end dell'app Web Blazor.

L'app Blazor include una semplice pagina contatore e una pagina Meteo che chiama il servizio API back-end per ottenere i dati di previsione da visualizzare.

Chiudere le schede del browser per l'app Blazor e il dashboard .NET Aspire. In Visual Studio arrestare il debug.

Aggiungere un componente di memorizzazione nella cache a un progetto .NET Aspire

Aggiungere ora un componente di memorizzazione nella cache Redis al progetto .NET Aspire. Si inizierà con l'host dell'app:

  1. In Esplora soluzioni fare clic con il pulsante destro del mouse sul progetto AspireTestApp.AppHost e scegliere Gestisci pacchetti NuGet.
  2. Selezionare la scheda Sfoglia, quindi scegliere Includi versione preliminare.
  3. Cercare Aspire redise selezionare il pacchetto Aspire.Hosting.Redis.
  4. Nel riquadro di destra, per Versione selezionare la versione più recente 8.0.0 e quindi selezionare Installa.
  5. Nella finestra di dialogo Accettazione della licenza selezionare Accetto.

  1. Per aggiungere la configurazione Redis al progetto host dell'app, aprire il file AspireTestApp.AppHost/Program.cs e aggiungere questo codice:

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

    Questo codice configura l'orchestrazione per creare un'istanza del contenitore Redis locale.

  2. Modificare il servizio webfrontend corrente per usare la cache Redis. Modificare questo codice:

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

    Con questo codice:

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

    Il metodo di estensione WithReference configura l'interfaccia utente per l'uso automatico di Redis per la memorizzazione nella cache dell'output.

    Successivamente, è possibile usare Redis nel progetto di utilizzo.

  1. In Esplora soluzioni fare clic con il pulsante destro del mouse sul progetto AspireTestApp.Web e selezionare Gestisci pacchetti NuGet.
  2. Selezionare la scheda Sfoglia, quindi scegliere Includi versione preliminare.
  3. Cercare Aspire redis e selezionare il pacchetto Aspire.StackExchange.Redis.OutputCaching.
  4. Nel riquadro di destra, per Versione selezionare la versione più recente 8.0.0 e quindi selezionare Installa.
  5. Nella finestra di dialogo Accettazione della licenza selezionare Accetto.

Usare ora Visual Studio per aggiungere codice per usare il componente Redis.

  1. Se necessario, aprire la soluzione AspireTestApp in Visual Studio.

  2. In Esplora soluzioni, nel progetto AspireTestApp.Web selezionare Program.cs.

  3. Aggiungere questo codice in var builder = WebApplication.CreateBuilder(args);:

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

    Questo codice:

    • Configura ASP.NET memorizzazione nella cache dell'output core per l'uso di un'istanza di Redis con il nome di connessione specificato.
    • Abilita automaticamente i controlli di integrità, la registrazione e i dati di telemetria corrispondenti.

  4. Sostituire il contenuto di AspireTestApp.Web/Components/Pages/Home.razor con il codice seguente:

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

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app on @DateTime.Now

    Nel codice precedente, l'attributo OutputCache specifica una durata di 10 secondi. Dopo che la pagina viene memorizzata nella cache, ogni richiesta successiva all'interno della finestra di 10 secondi riceve l'output memorizzato nella cache.

Si può notare che Aspira è progettato per semplificare l'aggiunta di nuovi componenti all'applicazione. Si aggiunge un nuovo componente all'applicazione aggiungendo un pacchetto NuGet e quindi si aggiungono alcune righe di codice al file Program.cs nel Web e progetti di AppHost. Aspire configura quindi in automativo il contenitore Redis e la memorizzazione nella cache dell'output.

Testare l'applicazione

Eseguire ora l'applicazione per visualizzare la memorizzazione nella cache in azione. In Visual Studio:

  1. Dal menu selezionare Debug e quindi Avvia debug (in alternativa premere F5). La soluzione viene compilata e nel Web browser predefinito viene aperto il dashboard Aspire.

  2. Selezionare l'URL dell’endpoint per il servizio webfrontend per visualizzare la home page dell'applicazione.

  3. Nel browser aggiornare la pagina alcune volte. L'ora nella pagina non cambia entro la durata della cache di 10 secondi.

    Screenshot del modello di avvio Aspire aggiornato con memorizzazione nella cache nella home page.

    La soluzione crea un contenitore Redis. Aprire Docker Desktop per visualizzare il contenitore in esecuzione.

    Screenshot del contenitore Redis in esecuzione in Docker Desktop.

  4. Per arrestare l'esecuzione della soluzione in Visual Studio, premere MAIUSC+F5.

  5. Aprire Docker Desktop e selezionare Contenitori/App. Verrà visualizzato che redis:latest non è più in esecuzione.

Si è visto quanto sia facile aggiungere un nuovo componente di memorizzazione nella cache a un'applicazione usando .NET Aspire. È stato aggiunto un pacchetto NuGet e sono state aggiunte alcune righe di codice. .NET Aspire ha configurato automaticamente il contenitore Redis e la memorizzazione nella cache di output.