Exercício – Integrar um aplicativo 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 do aplicativo ASP.NET Core.

Configure seu ambiente

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

Em uma janela de terminal:

  1. Defina o diretório de trabalho atual 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 Produto usada no Web App e na Web API.
    • Produtos. Uma API Web que retorna uma lista de produtos do catálogo com suas propriedades.
    • Armazenar. Um Blazor Web App exibe esses produtos aos visitantes do site.

Para executar o aplicativo com êxito, altere os projetos inicializados:

  1. No menu, selecione Projeto>Configurar projetos de inicialização....

  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 configurados para Iniciar.

  3. Na coluna Ação, defina Produtos e Armazenar 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 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ê deverá 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.

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

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

No Visual Studio:

  1. No Gerenciador de Soluções, clique com o botão direito no projeto Armazenar e selecione Adicionar>Suporte ao .NET Aspire Orchestrator....

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

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

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

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

    Dessa 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 armazenar e selecione Produtos. Você deverá ver o mesmo erro de antes.

  5. Retorne para o Dashboard.

    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é ver exception.message. O aplicativo da Web está com dificuldades para se conectar a localhost:5200. A porta 5200 é a porta em que o front-end pensa que a API do produto 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

Existem 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 dos 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 Adicionar>Suporte ao .NET Aspire Orchestrator....

    Uma captura de tela da caixa de diálogo do Visual Studio. Já existe um projeto de orquestrador .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 Produtos é 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 terminal para a API de produtos.

  4. Substitua a linha builder.AddProject<Projects.Products>("products"); 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 produtos agora está listado no painel com dois ponto de extremidade.

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

  6. Selecione o ponto de extremidade para o projeto Armazenar e selecione Produtos.

    Os produtos agora são exibidos no aplicativo web.

    Uma captura de tela mostrando os produtos no aplicativo da 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 resolver o problema. Se decidir usar o .NET Aspire, você também deverá usar a descoberta de serviço do .NET Aspire.

Atualize o aplicativo da web para usar a descoberta de 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:

    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 front-end da Store.

  3. No Gerenciador de Soluções, abra o projeto Armazenar 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 agora são:

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

  5. No Gerenciador de Soluções, no projeto Armazenar, 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 Armazenar e selecione Produtos.

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