Exercício - Integrar uma aplicação Web ASP.NET Core existente

  • 8 minutos

Agora vamos explorar como adicionar o .NET Aspire a um aplicativo Web ASP.NET Core existente. Ao longo do caminho, você aprenderá como adicionar a pilha do .NET Aspire a um aplicativo Web ASP.NET Core existente e, em seguida, executar o aplicativo. Você também verá como chamar microsserviços a partir do aplicativo ASP.NET Core.

Configurar o ambiente

Para adicionar o .NET Aspire a uma demonstração existente ASP.NET aplicativo Web Core, você precisa primeiro obter o aplicativo existente.

Numa janela do terminal:

  1. Defina o diretório de trabalho atual para onde você deseja armazenar seu código.

  2. Clone o repositório em uma nova pasta chamada ExampleApp:

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

Explore o aplicativo de exemplo

Use o Visual Studio para explorar o aplicativo de demonstração.

  1. Abra o Visual Studio e selecione Abrir um projeto ou solução.

  2. Na caixa de diálogo Abrir Projeto/Solução, navegue até a pasta ExampleApp/eShopAdmin e selecione EShopAdmin.sln.

  3. Selecione Abrir.

    Uma captura de tela do Visual Studio mostrando os três projetos na solução de demonstração.

    O aplicativo de demonstração é uma solução .NET 8 com três projetos:

    • Entidades de Dados. Uma biblioteca de classes que define a classe Product usada no Aplicativo Web e na API Web.
    • Produtos. Uma API da Web que retorna uma lista de produtos no catálogo com suas propriedades.
    • Loja. Um Blazor Web App exibe esses produtos para os visitantes do site.

Para executar o aplicativo com êxito, altere os projetos que são iniciados:

  1. No menu, selecione Project>Configure Startup Projects....

  2. Na caixa de diálogo Páginas de propriedades da solução, selecione Vários projetos de inicialização.

    Uma captura de tela da caixa de diálogo para escolher projetos de inicialização. Produtos e Loja estão definidos como Iniciar.

  3. Na coluna Ação, defina Produtos e Loja como Iniciar.

  4. Selecione OK.

  5. Execute o aplicativo pressionando F5 ou selecionando Iniciar na barra de ferramentas.

    O aplicativo abre duas instâncias do seu navegador da Web padrão. Um mostra a saída JSON da API Web e o outro mostra o Blazor Web App.

  6. No aplicativo Web, selecione Produtos no menu. Você deve ver esse erro.

    Uma captura de tela mostrando que os produtos não podem ser carregados.

  7. Pare o aplicativo pressionando Shift+F5 ou selecione Parar depuração na barra de ferramentas.

Este aplicativo é novo para você. Você não tem certeza de como os pontos de extremidade e serviços são configurados. Vamos adicionar a orquestração do .NET Aspire e ver se ela pode ajudar a diagnosticar o problema.

Inscrever o aplicativo existente na orquestração do .NET Aspire

No Visual Studio:

  1. No Gerenciador de Soluções, clique com o botão direito do mouse no projeto Store e selecione Add.NET> Aspire Orchestrator Support....

    Uma captura de tela da caixa de diálogo de orquestração no Visual Studio.

  2. Na caixa de diálogo Adicionar suporte do .NET Aspire Orchestrator, selecione OK.

    Agora você pode ver os projetos AppHost e ServiceDefaults foram adicionados à solução. O projeto AppHost também é definido como o projeto de inicialização.

  3. Execute o aplicativo pressionando F5 ou selecionando Iniciar na barra de ferramentas.

    Desta vez, a solução abre uma única janela do navegador mostrando o painel do .NET Aspire .

    Uma captura de tela do painel do .NET Aspire .

  4. Selecione o ponto de extremidade para o projeto de loja e, em seguida, selecione Produtos. Você deve ver o mesmo erro que antes.

  5. Volte ao painel.

    Uma captura de tela mostrando uma notificação de erro no projeto da loja.

  6. Selecione a notificação de erro vermelha ao lado de Em execução e, na coluna Detalhes , selecione Exibir.

    Uma captura de tela do painel mostrando os detalhes do erro.

  7. Percorra os detalhes do erro até conseguir ver o exception.message. O aplicativo Web está lutando para se conectar a localhost:5200. A porta 5200 é a porta na qual o front-end acha que a API de produtos está sendo executada.

  8. Pare o aplicativo pressionando Shift+F5 ou selecione Parar depuração na barra de ferramentas.

Atualize a orquestração para incluir a API de produtos

Há muitas maneiras de resolver esse problema. Você pode explorar o código, descobrir como o front-end está configurado, editar o código ou alterar os arquivos launchSettings.json ou appsettings.json .

Com o .NET Aspire, você pode alterar a orquestração para que a API de produtos responda na porta 5200.

No Visual Studio:

  1. Para adicionar o projeto Produtos à orquestração, no Gerenciador de Soluções, clique com o botão direito do mouse no projeto Produtos e selecione Add.NET> Aspire Orchestrator Support....

    Uma captura de tela da caixa de diálogo do Visual Studio. Já existe um projeto orquestrador do .NET Aspire na solução.

  2. Na caixa de diálogo, selecione OK.

  3. No Gerenciador de Soluções, abra o projeto AppHost e, em seguida, abra o arquivo Program.cs .

    Explore o código e veja como o projeto Products é adicionado à orquestração:

    var builder = DistributedApplication.CreateBuilder(args);

builder.AddProject<Projects.Store>("store");

builder.AddProject<Projects.Products>("products");

builder.Build().Run();

    Em seguida, configure o .NET Aspire para adicionar um novo ponto de extremidade para a API de produtos.

  4. Substitua a builder.AddProject<Projects.Products>("products"); linha por este código:

    builder.AddProject<Projects.Products>("products")
       .WithHttpEndpoint(port: 5200, name: "products");

  5. Execute o aplicativo pressionando F5 ou selecionando Iniciar na barra de ferramentas.

    O projeto de produtos agora está listado no painel com dois pontos de extremidade.

    Uma captura de tela do painel mostrando os produtos e projetos da loja.

  6. Selecione o ponto de extremidade para o projeto Store e, em seguida, selecione Produtos.

    Os produtos agora são exibidos no aplicativo Web.

    Uma captura de tela mostrando os produtos no aplicativo Web.

  7. Pare o aplicativo pressionando Shift+F5 ou selecione Parar depuração na barra de ferramentas.

Essa abordagem resolve o problema de configuração, mas não é a melhor maneira de corrigir o problema. Se você decidir usar o .NET Aspire, também deverá usar a descoberta de serviço do .NET Aspire .

Atualizar a aplicação Web para utilizar a deteção do serviço .NET Aspire

No Visual Studio:

  1. No Gerenciador de Soluções, abra o projeto AppHost e, em seguida, abra o arquivo Program.cs .

  2. Substitua o código no arquivo por este código:

    var builder = DistributedApplication.CreateBuilder(args);

var products = builder.AddProject<Projects.Products>("products");

builder.AddProject<Projects.Store>("store")
       .WithReference(products);

builder.Build().Run();

    O código acima reordena os projetos. A API de produtos agora é passada como uma referência de projeto para o aplicativo Web da Loja front-end.

  3. No Gerenciador de Soluções, abra o projeto Store e, em seguida, abra o arquivo appsettings.json .

  4. Exclua as linhas de configuração do ponto de extremidade:

    "ProductEndpoint": "http://localhost:5200",
"ProductEndpointHttps": "https://localhost:5200"

    As configurações são agora:

    {
  "DetailedErrors": true,
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*"
}

  5. No Gerenciador de Soluções, no projeto Store , abra o arquivo Program.cs .

  6. Substitua esta linha:

    var url = builder.Configuration["ProductEndpoint"] 
     ?? throw new InvalidOperationException("ProductEndpoint is not set");

    com esta linha:

    var url = "http://products";

  7. Execute o aplicativo pressionando F5 ou selecionando Iniciar na barra de ferramentas.

  8. Selecione o ponto de extremidade para o projeto Store e, em seguida, selecione Produtos.

O aplicativo ainda está funcionando conforme o esperado, mas o front-end agora está usando a descoberta do serviço .NET Aspire para obter informações sobre o ponto de extremidade da API de produtos.