Esercizio - Memorizzare nella cache i dati in Redis

  • 10 minuti

In questo esercizio si aggiungerà la memorizzazione nella cache all'app nativa del cloud parzialmente completata per il rivenditore di attrezzature all'aperto. Si aggiungerà Redis al progetto AppHost e quindi si implementerà la memorizzazione nella cache dell'output nel progetto App Web e la memorizzazione nella cache distribuita nel progetto Catalog.API.

Installare i prerequisiti

I prerequisiti per .NET Aspire sono:

  • .NET 8
  • Anteprima di Visual Studio 2022
  • Docker Desktop
  • Carico di lavoro .NET Aspire in Visual Studio

Se questi pacchetti sono già stati installati, è possibile iniziare a usare a lavorare con una cache Redis.

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. Per ottenere prestazioni e compatibilità ottimali, usare il back-end WSL 2.

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

Installare il carico di lavoro .NET Aspire in Visual Studio

Installare il carico di lavoro .NET Aspire usando l'interfaccia della riga di comando di .NET:

  1. Aprire un terminale.

  2. Aggiornare i carichi di lavoro .NET con questo comando:

    dotnet workload update

    Verrà visualizzato un messaggio che informa che i carichi di lavoro vengono aggiornati correttamente.

    No workloads installed for this feature band. To update workloads installed with earlier SDK versions, include the --from-previous-sdk option.
Updated advertising manifest microsoft.net.sdk.ios.
Updated advertising manifest microsoft.net.workload.mono.toolchain.net6.
Updated advertising manifest microsoft.net.sdk.android.
Updated advertising manifest microsoft.net.workload.emscripten.net7.
Updated advertising manifest microsoft.net.workload.emscripten.net6.
Updated advertising manifest microsoft.net.sdk.macos.
Updated advertising manifest microsoft.net.workload.emscripten.current.
Updated advertising manifest microsoft.net.workload.mono.toolchain.current.
Updated advertising manifest microsoft.net.sdk.maui.
Updated advertising manifest microsoft.net.workload.mono.toolchain.net7.
Updated advertising manifest microsoft.net.sdk.maccatalyst.
Updated advertising manifest microsoft.net.sdk.tvos.
Updated advertising manifest microsoft.net.sdk.aspire.
No workloads installed for this feature band. To update workloads installed with earlier SDK versions, include the --from-previous-sdk option.

Successfully updated workload(s): .

  3. Installare il carico di lavoro .NET Aspire con questo comando:

    dotnet workload install aspire

    Verrà visualizzato un messaggio che indica che è stato installato il carico di lavoro Aspire.

    Installing Aspire.Hosting.Sdk.Msi.x64 ...... Done
Installing Aspire.ProjectTemplates.Msi.x64 ..... Done
Installing Aspire.Hosting.Orchestration.win-x64.Msi.x64 ............. Done
Installing Aspire.Hosting.Msi.x64 ..... Done
Installing Aspire.Dashboard.Sdk.win-x64.Msi.x64 ....... Done

Successfully installed workload(s) aspire.

  4. Verificare che il carico di lavoro .NET Aspire sia installato con questo comando:

    dotnet workload list

    Verranno visualizzati i dettagli del carico di lavoro aspire.

    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.

Clonare e modificare l'app di esempio

Si userà git per ottenere un'app di esempio compilata con .NET Aspire. L'app non ha ancora configurato la memorizzazione nella cache:

  1. Nella riga di comando passare a una cartella di propria scelta in cui è possibile usare il codice.

  2. Eseguire il comando seguente per clonare l'applicazione di esempio Northern Mountains eShop:

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

  3. Avviare Visual Studio e quindi selezionare Apri un progetto o una soluzione.

  4. Passare alla cartella in cui è stato clonato l'eShop, aprire la cartella di avvio e selezionare il file eShop.rediscache.sln e quindi selezionare Apri.

  5. In Esplora soluzioni, passare a WebApp/Components/Pages e quindi fare doppio clic su Catalog.razor.

  6. Individuare la riga di codice seguente:

    <SectionContent SectionName="page-header-subtitle">Start the season with the latest in clothing and equipment.</SectionContent>

  7. Sostituire la riga con il codice seguente:

    <SectionContent SectionName="page-header-subtitle">Start the season with the latest in clothing and equipment. It's @DateTime.Now</SectionContent>

  8. Per avviare l'app, premere F5 o selezionare Debug>Avvia debug.

  9. Se viene visualizzata la finestra di dialogo Avvia docker Desktop, selezionare Sì.

  10. Quando viene visualizzato il dashboard eShop .NET Aspire, per la risorsa App Web selezionare uno degli endpoint:

    Screenshot che mostra dove avviare l'App Web nel dashboard .NET Aspire.

  11. L'endpoint visualizza la home page Northern Mountains. Inclusione dell'ora nel server:

    Screenshot che mostra la home page Northern Mountains con l'ora sul lato server visualizzata.

  12. Premere F5 per aggiornare la pagina. Poiché la pagina non viene memorizzata nella cache, l'ora visualizzata cambia ogni volta che viene aggiornata, purché il secondo sia cambiato.

  13. Passare alla scheda del browser che visualizza il dashboard .NET Aspire, quindi nella barra di navigazione a sinistra selezionare Tracce.

  14. Tracce con il nome App Web: GET/ sono richieste per la home page. Prendere nota della Durata tipica di queste richieste, quindi per una di esse seleziona Visualizza nella colonna Dettagli:

    Screenshot con il dashboard .NET Aspire che mostra le tracce per le richieste alla home page Northern Mountain senza memorizzazione nella cache.

  15. Nella visualizzazione sequenza temporale, si noti che l'App Web chiama più microservizi per costruire la risposta.

  16. Chiudere la home page Northern Mountains e il dashboard .NET Aspire.

  17. In Visual Studio, per arrestare il debug, premere MAIUSC - F5 o selezionare Debug > Arresta debug.

Aggiungere un servizio di memorizzazione nella cache

Ora che si è visto come la home page viene eseguita senza memorizzazione nella cache, è possibile aggiungere la memorizzazione nella cache dell'output per verificare se migliora la velocità di risposta. Per iniziare, aggiungere il componente di memorizzazione nella cache dell'output al progetto AppHost:

  1. In Visual Studio, in Esplora soluzioni, fai clic con il pulsante destro del mouse sul progetto eShop.AppHost, seleziona Aggiungi e quindi seleziona il pacchetto .NET Aspire.

  2. Nella casella di testo di ricerca digitare Redis alla fine del testo esistente.

  3. Selezionare il pacchetto Aspire.Hosting.Redis.

  4. Nell'elenco Versione, selezionare la versione 8.0.0 più recente e quindi selezionare Installa.

  5. Se viene visualizzata la finestra di dialogo Anteprima modifiche, selezionare Apply.

  6. Nella finestra di dialogo Accettazione della licenza selezionare Accetto.

  7. In Esplora soluzioni, espandere il progetto AppHost e quindi fare doppio clic su Program.cs.

  8. Individuare le righe di codice seguente:

    // Databases

var postgres = builder.AddPostgres("postgres").WithPgAdmin();
var catalogDb = postgres.AddDatabase("CatalogDB");

  9. Subito dopo queste righe, aggiungere il codice seguente:

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

  10. Individuare la riga di codice seguente, che aggiunge il progetto API Catalogo all'orchestrazione .NET Aspire:

    var catalogApi = builder.AddProject<Catalog_API>("catalog-api")
    .WithReference(catalogDb);

  11. Per passare la cache Redis al progetto API Catalogo, sostituire il codice con le righe seguenti:

    var catalogApi = builder.AddProject<Catalog_API>("catalog-api")
    .WithReference(catalogDb)
    .WithReference(redis);

    Nota

    La cache verrà usata nell’API Catalogo per eseguire la memorizzazione nella cache distribuita.

  12. Individuare la riga di codice seguente, che aggiunge il progetto App Web all'orchestrazione .NET Aspire:

    builder.AddProject<WebApp>("webapp")
    .WithReference(catalogApi);

  13. Per passare la cache Redis al progetto App Web, sostituire il codice con le righe seguenti:

    builder.AddProject<WebApp>("webapp")
    .WithReference(catalogApi)
    .WithReference(redis);

    Nota

    Verrà usata la cache in App Web per eseguire la memorizzazione nella cache dell'output.

  14. Per salvare il file Program.cs, premere CTRL - S o selezionare File> Salva Program.cs.

Usare la memorizzazione nella cache dell'output nel progetto App Web

A questo punto, si userà la cache Redis nel progetto App Web per memorizzare nella cache l'output della home page:

  1. In Esplora soluzioni in Visual Studio fare clic con il pulsante destro del mouse sul progetto App Web, scegliere Aggiungi e quindi selezionare il pacchetto .NET Aspire.

  2. Nella casella di testo di ricerca digitare Redis alla fine del testo esistente.

  3. Selezionare il pacchetto Aspire.StackExchange.Redis.OutputCaching.

  4. Nell'elenco Versione, selezionare la versione 8.0.0 più recente e quindi selezionare Installa.

  5. Se viene visualizzata la finestra di dialogo Anteprima modifiche, selezionare Apply.

  6. Nella finestra di dialogo Accettazione della licenza selezionare Accetto.

  7. Al termine dell'installazione, in Esplora soluzioni, espandere App Web e quindi fare doppio clic su Program.cs.

  8. Individuare la riga di codice seguente:

    var builder = WebApplication.CreateBuilder(args);

  9. Subito dopo tale riga, per aggiungere la cache di output al progetto, aggiungere questo codice:

    builder.AddRedisOutputCache("cache");

  10. Individuare la riga di codice seguente:

    var app = builder.Build();

  11. Subito dopo tale riga, per aggiungere il middleware di memorizzazione nella cache alla pipeline della richiesta, aggiungere questo codice:

    app.UseOutputCache();

  12. In Esplora soluzioni, espandere App Web > Componenti > Pagine e quindi fare doppio clic su Catalog.razor.

  13. Individuare la riga di codice seguente:

    @attribute [StreamRendering]

  14. Subito dopo tale riga, per memorizzare nella cache la home page, aggiungere questo codice:

    @attribute [Microsoft.AspNetCore.OutputCaching.OutputCache(Duration = 10)]

Testare la memorizzazione nella cache dell'output

La memorizzazione nella cache dell’output è ora implementata nella home page Northern Mountains. Si eseguirà un test:

  1. In Visual Studio, per avviare l'app premere F5 o selezionare Debug > Avvia debug.

  2. Quando viene visualizzato il dashboard eShop .NET Aspire, per la risorsa App Web selezionare uno degli endpoint:

    Screenshot che mostra dove avviare l'App Web nel dashboard .NET Aspire.

  3. L'endpoint visualizza la home page Northern Mountains, inclusa l'ora del server.

  4. Premere F5 per aggiornare la pagina. Poiché la pagina viene memorizzata nella cache per 10 secondi, l'ora visualizzata cambia solo quando è successiva a 10 secondi dopo la richiesta memorizzata nella cache.

  5. Passare alla scheda del browser che visualizza il dashboard .NET Aspire, quindi nella barra di navigazione a sinistra selezionare Tracce.

  6. Tracce con il nome App Web: GET/ sono richieste per la home page. Alcune richieste alla home page, che non possono essere soddisfatte dalla cache, hanno tempi simili alle durate annotate in precedenza. Tuttavia, altre richieste, restituite dalla cache, hanno durate significativamente più brevi.

  7. Per una delle richieste più brevi, selezionare Visualizza nella colonna Dettagli. Si noti che la richiesta è stata recuperata dalla cache Redis:

    Screenshot con il dashboard .NET Aspire che mostra una traccia per una richiesta memorizzata nella cache.

  8. Chiudere la home page Northern Mountains e il dashboard .NET Aspire.

  9. In Visual Studio, per arrestare il debug, premere MAIUSC - F5 o selezionare Debug > Arresta debug.

Usare la memorizzazione nella cache distribuita

È anche possibile usare Redis per eseguire la memorizzazione nella cache distribuita nel progetto Catalog.API:

  1. In Esplora soluzioni in Visual Studio fare clic con il pulsante destro del mouse sul progetto Catalog.API, scegliere Aggiungi e quindi selezionare pacchetto .NET Aspira.

  2. Nella casella di testo di ricerca digitare Redis alla fine del testo esistente.

  3. Selezionare il pacchetto Aspire.StackExchange.Redis.DistributedCaching.

  4. Nell'elenco Versione, selezionare la versione 8.0.0 più recente e quindi selezionare Installa.

  5. Se viene visualizzata la finestra di dialogo Anteprima modifiche, selezionare Apply.

  6. Nella finestra di dialogo Accettazione della licenza selezionare Accetto.

  7. Al termine dell'installazione, in Esplora soluzioniespandere Catalog.API e quindi fare doppio clic su Program.cs.

  8. Individuare la riga di codice seguente:

    var builder = WebApplication.CreateBuilder(args);

  9. Subito dopo tale riga, per aggiungere la cache di output al progetto, aggiungere questo codice:

    builder.AddRedisDistributedCache("cache");

  10. In Esplora soluzioni espandere Catalog.API > API e quindi fare doppio clic su CatalogApi.cs.

  11. Individuare il codice seguente, che dichiara il metodo GetAllItems:

    public static async Task<Results<Ok<PaginatedItems<CatalogItem>>, BadRequest<string>>> GetAllItems(
    [AsParameters] PaginationRequest paginationRequest,
    [AsParameters] CatalogServices services)
{

  12. Per ottenere la cache Redis tramite inserimento delle dipendenze, modificare tale codice per aggiungere un nuovo parametro al metodo:

    public static async Task<Results<Ok<PaginatedItems<CatalogItem>>, BadRequest<string>>> GetAllItems(
    [AsParameters] PaginationRequest paginationRequest,
    [AsParameters] CatalogServices services,
    IDistributedCache cache)
{

  13. Rimuovere l'intero contenuto del metodo GetAllItems e sostituirlo con il codice seguente:

    var pageSize = paginationRequest.PageSize;
var pageIndex = paginationRequest.PageIndex;

var totalItems = await services.DbContext.CatalogItems
    .LongCountAsync();

// Check that there are cached items
var cachedItems = await cache.GetAsync("catalogItems");

if (cachedItems is null)
{
    // There are no items in the cache. Get them from the database
    var itemsOnPage = await services.DbContext.CatalogItems
        .OrderBy(c => c.Name)
        .Skip(pageSize * pageIndex)
        .Take(pageSize)
        .AsNoTracking()
        .ToListAsync();

    // Store the items in the cache for 10 seconds
    await cache.SetAsync("catalogItems", Encoding.UTF8.GetBytes(System.Text.Json.JsonSerializer.Serialize(itemsOnPage)), new()
    {
        AbsoluteExpiration = DateTime.Now.AddSeconds(10)
    });

    ChangeUriPlaceholder(services.Options.Value, itemsOnPage);
    return TypedResults.Ok(new PaginatedItems<CatalogItem>(pageIndex, pageSize, totalItems, itemsOnPage));

}
else
{
    // There are items in the cache. Deserialize them to display.
    var itemsOnPage = System.Text.Json.JsonSerializer.Deserialize<List<CatalogItem>>(cachedItems);
    // Make sure itemsOnPage is not null
    if (itemsOnPage is null)
    {
        itemsOnPage = new List<CatalogItem>();
    }

    ChangeUriPlaceholder(services.Options.Value, itemsOnPage);
    return TypedResults.Ok(new PaginatedItems<CatalogItem>(pageIndex, pageSize, totalItems, itemsOnPage));
}

Testare la memorizzazione nella cache distribuita

La memorizzazione nella cache distribuita viene ora implementata nel progetto Catalog.API. Si eseguirà un test:

  1. In Visual Studio, per avviare l'app premere F5 o selezionare Debug > Avvia debug.

  2. Quando viene visualizzato il dashboard .NET Aspire eShop, per la risorsa catalog-api, selezionare l'endpoint:

    Screenshot che mostra dove avviare l’API Catalogo nel dashboard .NET Aspire.

  3. L'endpoint visualizza l'interfaccia Swagger per il microservizio API Catalogo. Accanto al metodo /api/v1/catalog/items, selezionare GET.

  4. Selezionare Prova e poi selezionare Esegui. I risultati vengono visualizzati nella finestra Corpo della risposta:

    Screenshot che mostra i risultati del catalogo visualizzati nell'interfaccia utente Swagger.

  5. Fare clic su Esegui più volte per chiamare di nuovo l'API. Queste richieste devono ottenere gli elementi dalla cache, purché la richiesta avvenga in un tempo inferiore a 10 secondi rispetto alla prima.

  6. Passare alla scheda del browser che visualizza il dashboard .NET Aspire, quindi nella barra di navigazione a sinistra selezionare Tracce.

  7. Tracce con il nome catalog-api: GET /api/v1/catalog/items sono richieste per il metodo elementi dell'API Catalogo. Si noti che la prima richiesta a tale metodo richiede più tempo per formulare le richieste successive, che l'API ottiene gli elementi dalla cache Redis:

    Screenshot con la pagina Tracce dashboard di .NET Aspire con richieste memorizzate nella cache all'API Catalogo.

  8. Chiudere la pagina Swagger e il dashboard .NET Aspire.

  9. In Visual Studio, per arrestare il debug, premere MAIUSC - F5 o selezionare Debug > Arresta debug.