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 seu 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, em seguida, criará um novo aplicativo .NET Aspire Starter. Em seguida, você verá como adicionar um componente de cache usando Redis ao aplicativo. Finalmente, irá testar a aplicação e explorar rapidamente o Painel de Controlo do Aspire .

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

Pré-requisitos da instalação

Discutimos os pré-requisitos na unidade anterior. Vamos passar por instalá-los agora.

Instalar o .NET 8

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

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

dotnet --version

Você deve ver o número da versão do SDK do .NET que você instalou. Por exemplo:

8.0.300-preview.24203.14

Instalar o Visual Studio 2022 Preview

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

Instalar o Docker Desktop

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

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

Instalar a carga de trabalho do .NET Aspire

Instale 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 de ASP.NET e desenvolvimento web.

  4. No painel Detalhes da instalação, selecione .NET Aspire SDK (Pré-visualização).

  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ê vê:

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 uma nova aplicação .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, digite aspirar.

  3. Selecione .NET Aspire Starter Application e, em seguida, selecione Next.

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

  5. Na caixa Localização, introduza a pasta onde pretende criar a nova aplicação.

  6. Selecione Seguinte.

  7. Deixe o .NET 8.0 padrão (Suporte de longo prazo) selecionado.

  8. Desmarque Usar Redis para cache (requer um tempo de execução de contêiner suportado).

    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 Docker Engine, selecione Sim.

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

Uma captura de ecrã do painel do Aspire que mostra a aplicação Blazor e os serviços API.

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

Uma captura de tela do frontend do aplicativo Web Blazor.

O Blazor App tem uma página de contador simples e uma página de Meteorologia que chama o serviço de API de back-end para obter dados de previsão para exibição.

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

Adicionar um componente de cache a um projeto do .NET Aspire

Agora vamos adicionar um componente de cache Redis ao projeto .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 Procurar e selecione Incluir pré-lançamento.
  3. Procure aspire redis e selecione o pacote Aspire.Hosting.Redis.
  4. No painel direito, para Versão, selecione a versão 8.0.0 mais recente e, em seguida, selecione Instalar.
  5. Na caixa de diálogo Aceitação de 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 Redis local.

  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 WithReference método de extensão configura a interface do usuário para usar o Redis automaticamente para 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 Procurar e selecione Incluir pré-lançamento.
  3. Procure aspire redis e selecione o pacote Aspire.StackExchange.Redis.OutputCaching .
  4. No painel direito, para Versão, selecione a versão 8.0.0 mais recente e, em seguida, selecione Instalar.
  5. Na caixa de diálogo Aceitação de 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 AspireTestApp no Visual Studio.

  2. No 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");

    Este código:

    • Configura ASP.NET cache de saída Core para usar uma instância do Redis com o nome de conexão especificado.
    • Permite automaticamente as verificações de integridade, registro e 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 OutputCache atributo 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 recebe a saída em cache.

Pode ver que o Aspire foi concebido para facilitar a adição de novos componentes à sua aplicação. 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 Redis e o cache de saída para você.

Testar a aplicação

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 é construída e o Painel de Controlo do Aspire é aberto no seu browser predefinido.

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

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

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

    A solução cria um contêiner Redis. Abra o 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 parar a execução da solução no Visual Studio, pressione Shift+F5.

  5. Abra o 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, em seguida, adicionou algumas linhas de código. O .NET Aspire configurou automaticamente o contêiner Redis e o cache de saída para você.