Exercício – Criar um novo projeto .NET Aspire

  • 10 minutos

Antes de começar a trabalhar em um novo serviço para o projeto mais recente da sua empresa, você deseja verificar se o sistema tem todos os pré-requisitos para o .NET Aspire. A melhor maneira de verificar é criar um novo projeto .NET Aspire com um modelo inicial.

No exercício, você instalará todos os pré-requisitos e criará um novo aplicativo .NET Aspire Starter. Veja como adicionar um componente de cache usando o Redis ao aplicativo. Em seguida, teste o aplicativo e explore rapidamente o Painel do Aspire.

Escolha esta guia para ver as etapas neste exercício para Visual Studio.

Instalar pré-requisitos

Discutimos os pré-requisitos na unidade anterior. Vamos examinar a instalação deles agora.

Instalar o .NET 8

Siga esse link do .NET 8 e selecione o instalador correto para o seu sistema operacional. Por exemplo, se você estiver usando o Windows 11 e um processador moderno, selecione x64 .NET 8 SDK para Windows.

Após a conclusão do download, execute o instalador e siga as instruções. Em uma janela de terminal, execute o seguinte comando para verificar se a instalação foi bem-sucedida:

dotnet --version

Você deverá ver o número da versão do SDK do .NET instalado. Por exemplo:

8.0.300-preview.24203.14

Instale a versão prévia do Visual Studio 2022

Siga esse link Visual Studio 2022 Preview e selecione Baixar versão prévia. Após a conclusão do download, execute o instalador e siga as instruções.

Instalar o Docker Desktop

Siga esse link Docker Desktop e selecione o instalador correto para o seu sistema operacional. Após a conclusão do download, execute o instalador e siga as instruções.

Abra o aplicativo do Docker Desktop e aceite o contrato de serviço.

Instalar a carga de trabalho do .NET Aspire

Instalar a carga de trabalho do .NET Aspire usando o Visual Studio:

  1. Abra o Instalador do Visual Studio.

  2. Selecione Modificar ao lado de Visual Studio.

  3. Selecione a carga de trabalho deASP.NET e desenvolvimento da Web.

  4. No painel Detalhes da instalação, selecione SDK do .NET Aspire (versão prévia).

  5. Selecione Modificar para instalar o componente .NET Aspire.

  6. Verifique se a versão mais recente do .NET Aspire está instalada, em um novo terminal, execute este comando:

    dotnet workload list

Depois de instalar a carga de trabalho, você verá:

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.

Criar um novo aplicativo .NET Aspire Starter

Agora que os pré-requisitos estão instalados, vamos criar um novo aplicativo.

  1. Abra o Visual Studio. Na caixa de diálogo, selecione Criar um novo projeto.

  2. Na caixa Pesquisar modelos, insira Aspire.

  3. Selecione Aplicativo do .NET Aspire Starter e selecione Próximo.

  4. Na caixa Nome da solução, insira AspireTestApp.

  5. Na caixa Local, insira a pasta na qual você deseja criar o novo aplicativo.

  6. Selecione Avançar.

  7. Deixe o padrão .NET 8.0 (suporte a longo prazo) selecionado.

  8. Desmarque Usar Redis para cache (requer um runtime de contêiner com suporte).

    Você adicionará manualmente o suporte ao Redis nas próximas etapas.

  9. Selecione Criar.

  10. No menu, selecione Depurar e, em seguida, selecione Iniciar depuração (como alternativa, pressione F5).

  11. Se solicitado a iniciar o Mecanismo do Docker, selecione Sim.

O painel é aberto no navegador da Web padrão.

Uma captura de tela do painel do Aspire mostrando o aplicativo Blazor e os serviços de API.

Selecione a URL do ponto de extremidade webfrontend. A porta é atribuída aleatoriamente para que o painel não corresponda.

Uma captura de tela do front-end do aplicativo Web Blazor.

O aplicativo Blazor tem uma página de contador simples e uma página de Clima que chama o serviço de API de back-end para obter dados de previsão a serem exibidos.

Feche as guias do navegador para o Aplicativo Blazor e o painel do .NET Aspire. No Visual Studio, interrompa a depuração.

Adicione um componente de cache a um projeto .NET Aspire

Agora vamos adicionar um componente de cache Redis ao projeto do .NET Aspire. Começaremos com o host do aplicativo:

  1. No Gerenciador de Soluções, clique com o botão direito do mouse no projeto AspireTestApp.AppHost e selecione Gerenciar Pacotes NuGet.
  2. Selecione a guia Navegar e, em seguida, selecione Incluir pré-lançamento.
  3. Pesquise por aspire redis e selecione o pacote Aspire.Hosting.Redis.
  4. No painel direito, para Versão selecione o 8.0.0mais recente e selecione Instalar.
  5. Na caixa de diálogo Aceitação da Licença, selecione Aceito.

  1. Para adicionar a configuração do Redis ao projeto de host do aplicativo, abra o arquivo AspireTestApp.AppHost/Program.cs e adicione este código:

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

    Esse código configura a orquestração para criar uma instância de contêiner local do Redis.

  2. Altere o serviço webfrontend atual para usar o cache Redis. Altere este código:

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

    Para este código:

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

    O método de extensão WithReference configura a interface do usuário para usar o Redis automaticamente para o cache de saída.

    Em seguida, podemos usar o Redis no projeto de consumo.

  1. No Gerenciador de Soluções, clique com o botão direito do mouse no projeto AspireTestApp.Web e selecione Gerenciar Pacotes NuGet.
  2. Selecione a guia Navegar e, em seguida, selecione Incluir pré-lançamento.
  3. Pesquise por aspire redis e selecione o pacote Aspire.StackExchange.Redis.OutputCaching.
  4. No painel direito, para Versão selecione o 8.0.0mais recente e selecione Instalar.
  5. Na caixa de diálogo Aceitação da Licença, selecione Aceito.

Agora, use o Visual Studio para adicionar código para usar o componente Redis.

  1. Se precisar, abra a solução AspireTestAppno Visual Studio.

  2. Em Gerenciador de Soluções, no projeto AspireTestApp.Web, selecione Program.cs.

  3. Adicione este código em var builder = WebApplication.CreateBuilder(args);:

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

    Esse código:

    • Configura o cache de saída do ASP.NET Core para usar uma instância do Redis com o nome de conexão especificado.
    • Habilita automaticamente as verificações de integridade, o registro em log e a telemetria correspondentes.

  4. Substitua o conteúdo de AspireTestApp.Web/Components/Pages/Home.razor pelo seguinte código:

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

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app on @DateTime.Now

    No código anterior, o atributo OutputCache especifica uma duração de 10 segundos. Depois que a página é armazenada em cache, cada solicitação subsequente dentro da janela de 10 segundos receberá a saída armazenada em cache.

Você pode ver que o Aspire foi projetado para facilitar a adição de novos componentes ao seu aplicativo. Você adiciona um novo componente ao seu aplicativo adicionando um pacote NuGet e, em seguida, adiciona algumas linhas de código ao arquivo Program.cs nos projetos Web e AppHost. Em seguida, o Aspire configura automaticamente o contêiner do Redis e o cache de saída para você.

Testar o aplicativo

Agora, vamos executar o aplicativo para ver o cache em ação. No Visual Studio:

  1. No menu, selecione Depurar e, em seguida, selecione Iniciar depuração (como alternativa, pressione F5). A solução é compilada e o Painel do Aspire é aberto no navegador da Web padrão.

  2. Selecione a URL do Ponto de extremidade para o serviço dewebfrontend para exibir a página inicial do aplicativo.

  3. No navegador, atualize a página algumas vezes. O tempo na página não é alterado dentro da duração do cache de 10 segundos.

    Uma captura de tela do modelo do Aspire Starter atualizado com cache na página inicial.

    A solução cria um contêiner Redis. Abra Docker Desktop para ver o contêiner em execução.

    Uma captura de tela do contêiner Redis em execução no Docker Desktop.

  4. Para interromper a execução da solução no Visual Studio, pressione Shift+F5.

  5. Abra Docker Desktop e selecione Contêineres/Aplicativos. Você deve ver que o redis:latest não está mais em execução.

Você viu como é fácil adicionar um novo componente de cache a um aplicativo usando o .NET Aspire. Você adicionou um pacote NuGet e adicionou algumas linhas de código. O .NET Aspire configurou automaticamente o contêiner Redis e o cache de saída para você.