练习 - 集成现有的 ASP.NET Core Web 应用

已完成

现在让我们了解如何将 .NET Aspire 添加到现有的 ASP.NET Core Web 应用。 在此过程中,你将了解如何将 .NET Aspire 堆栈添加到现有 ASP.NET Core Web 应用,然后运行该应用。 你还将了解如何通过 ASP.NET Core 应用调用微服务。

设置你的环境

若要将 .NET Aspire 添加到现有的演示 ASP.NET Core Web 应用,首先需要获取现有应用。

在终端窗口中:

  1. 将当前工作目录设置为用于存储代码的位置。

  2. 将存储库克隆到名为 ExampleApp 的新文件夹中

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

探索示例应用

使用 Visual Studio 探索演示应用。

  1. 打开 Visual Studio,然后选择“打开项目或解决方案”

  2. 在“打开项目/解决方案”对话框中,导航到“ExampleApp/eShopAdmin”文件夹,然后选择“EShopAdmin.sln”

  3. 选择打开

    Visual Studio 的屏幕截图,其中显示了演示解决方案中的三个项目。

    演示应用是一个 .NET 8 解决方案,其中包含三个项目:

    • 数据实体。 一个类库,用于定义 Web 应用和 Web API 中使用的 Product 类
    • 产品。 一个 Web API,它返回目录中的产品列表及其属性。
    • 商店。 一个 Blazor Web 应用向网站访问者显示这些产品。

若要成功运行该应用,请更改启动的项目:

  1. 在菜单中选择“项目”>“配置启动项目...”

  2. 在“解决方案属性页”对话框中,选择“多个启动项目”

    用于选择启动项目的对话框的屏幕截图。“产品”和“商店”设置为“启动”。

  3. 在“操作”列中,将“产品”和“商店”设置为“启动”

  4. 选择“确定”

  5. F5 或选择工具栏中的“启动”来运行应用

    该应用会打开默认 Web 浏览器的两个实例。 其中一个实例显示 Web API 的 JSON 输出,另一个实例显示 Blazor Web 应用。

  6. 在 Web 应用中,从菜单中选择“产品”。 你应会看到此错误。

    显示无法加载产品的屏幕截图。

  7. Shift+F5 或选择工具栏中的“停止调试”来停止应用

此应用对你而言是新的。 你不确定终结点和服务是如何配置的。 让我们添加 .NET Aspire 业务流程,看看它是否有助于诊断问题。

在 .NET Aspire 业务流程中登记现有应用

在 Visual Studio 中:

  1. 在“解决方案资源管理器”中,右键单击“商店”项目,然后选择“添加”>“.NET Aspire 业务流程协调程序支持...”

    Visual Studio 中的业务流程对话框的屏幕截图。

  2. 在“添加 .NET Aspire 业务流程协调程序支持”对话框中,选择“确定”

    现在,你可以看到“AppHost”和“ServiceDefaults”项目已添加到解决方案。 “AppHost”项目还被设置为启动项目

  3. F5 或选择工具栏中的“启动”来运行应用

    这一次,解决方案将打开一个显示 .NET Aspire 仪表板的浏览器窗口。

    .NET Aspire 仪表板的屏幕截图。

  4. 选择“商店”项目的终结点,然后选择“产品”。 你应会看到与之前相同的错误。

  5. 返回仪表板。

    显示有关商店项目的错误通知的屏幕截图。

  6. 选择“正在运行”旁边的红色错误通知,然后在“详细信息”列中选择“查看”

    显示错误详细信息的仪表板屏幕截图。

  7. 滚动浏览错误详细信息,直到看到“exception.message”。 Web 应用正在努力连接到 localhost:5200。 端口 5200 是前端认为产品 API 正在运行的端口。

  8. Shift+F5 或选择工具栏中的“停止调试”来停止应用

更新业务流程以包含产品 API

有很多方法可以解决此问题。 可以浏览代码、了解前端的配置方式、编辑代码,或者更改 launchSettings.json 或 appsettings.json 文件

使用 .NET Aspire 可以更改业务流程,以便产品 API 在端口 5200 上做出响应。

在 Visual Studio 中:

  1. 若要将“产品”项目添加到业务流程,请在“解决方案资源管理器”中右键单击“产品”项目,然后选择“添加”>“.NET Aspire 业务流程协调程序支持...”

    Visual Studio 对话框的屏幕截图。解决方案中已存在 .NET Aspire 业务流程协调程序项目。

  2. 在对话框中选择“确定”

  3. 在“解决方案资源管理器”中打开“AppHost”项目,然后打开“Program.cs”文件

    浏览代码并检查“产品”项目如何添加到了业务流程中

    var builder = DistributedApplication.CreateBuilder(args);
    
    builder.AddProject<Projects.Store>("store");
    
    builder.AddProject<Projects.Products>("products");
    
    builder.Build().Run();
    

    接下来,配置 .NET Aspire 以便为产品 API 添加新终结点。

  4. builder.AddProject<Projects.Products>("products"); 行替换为此代码:

    builder.AddProject<Projects.Products>("products")
           .WithHttpEndpoint(port: 5200, name: "products");
    
  5. F5 或选择工具栏中的“启动”来运行应用

    “产品”项目现已在仪表板上列出,其中包含两个终结点

    显示产品和商店项目的仪表板屏幕截图。

  6. 选择“商店”项目的终结点,然后选择“产品”

    产品现已显示在 Web 应用中。

    显示 Web 应用中的产品的屏幕截图。

  7. Shift+F5 或选择工具栏中的“停止调试”来停止应用

此方法可以解决配置问题,但它并不是解决问题的最佳方法。 如果你决定使用 .NET Aspire,则还应使用 .NET Aspire 服务发现。

更新 Web 应用以使用 .NET Aspire 服务发现

在 Visual Studio 中:

  1. 在“解决方案资源管理器”中打开“AppHost”项目,然后打开“Program.cs”文件

  2. 用以下代码替换文件中的代码:

    var builder = DistributedApplication.CreateBuilder(args);
    
    var products = builder.AddProject<Projects.Products>("products");
    
    builder.AddProject<Projects.Store>("store")
           .WithReference(products);
    
    builder.Build().Run();
    

    上述代码将对项目重新排序。 产品 API 现已作为项目引用传递给前端商店 Web 应用。

  3. 在“解决方案资源管理器”中打开“商店”项目,然后打开“appsettings.json”文件

  4. 删除终结点配置行:

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

    设置现在为:

    {
      "DetailedErrors": true,
      "Logging": {
        "LogLevel": {
          "Default": "Information",
          "Microsoft.AspNetCore": "Warning"
        }
      },
      "AllowedHosts": "*"
    }
    
  5. 在“解决方案资源管理器”中的“商店”项目下,打开“Program.cs”文件

  6. 将以下行:

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

    替换为以下代码行:

    var url = "http://products";
    
  7. F5 或选择工具栏中的“启动”来运行应用

  8. 选择“商店”项目的终结点,然后选择“产品”

该应用仍按预期工作,但前端现在使用 .NET Aspire 服务发现来获取有关产品 API 终结点的信息。