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

8 分钟

现在，让我们了解如何将 .NET Aspire 添加到现有 ASP.NET Core Web 应用。在此过程中，了解如何将 .NET Aspire 堆栈添加到现有的 ASP.NET Core Web 应用，然后运行该应用。另请参阅如何从 ASP.NET Core 应用调用微服务。

设置环境

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

在终端窗口中：

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

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

浏览示例应用

使用 Visual Studio 浏览演示应用。

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

演示应用是一个 .NET 8 解决方案，其中包含三个项目：
- 数据实体。一个类库，用于定义 Web 应用和 Web API 中使用的 Product 类。
- 产品。一个 Web API，返回目录中具有其属性的产品列表。
- 存储。 Blazor Web App 向网站访问者显示这些产品。

若要成功运行应用，请更改启动的项目：

从菜单中选择“ 项目>配置启动项目...”。
在 “解决方案属性页 ”对话框中，选择 “多个启动项目”。
在“作”列中，将“产品和应用商店”设置为“开始”。
选择“确定”。
通过按 F5 或选择工具栏中的 “开始 ”来运行应用。

该应用将打开默认 Web 浏览器的两个实例。其中一个显示 Web API 的 JSON 输出，另一个显示 Blazor Web 应用。
在 Web 应用中，从菜单中选择 “产品 ”。应会看到此错误。
按 Shift+F5 停止应用，或在工具栏中选择“ 停止调试 ”。

此应用是新手。不确定终结点和服务的配置方式。让我们添加 .NET Aspire 业务流程，看看它是否有助于诊断问题。

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

在 Visual Studio 中：

在解决方案资源管理器中，右键单击“应用商店”项目，然后选择“Add.NET>Aspire Orchestrator 支持...”。
在 “添加 .NET Aspire Orchestrator 支持 ”对话框中，选择“ 确定”。

现在，可以看到 AppHost 和 ServiceDefaults 项目已添加到解决方案。 AppHost 项目也设置为启动项目。
通过按 F5 或选择工具栏中的 “开始 ”来运行应用。

这一次，解决方案将打开一个浏览器窗口，其中显示了 .NET Aspire 仪表板。
选择 应用商店 项目的终结点，然后选择“ 产品”。应会看到与之前相同的错误。
返回到仪表板。
选择 “正在运行”旁边的红色错误通知，然后在“ 详细信息 ”列中，选择“ 视图”。
滚动浏览错误详细信息，直到可以看到 exception.message。 Web 应用正努力连接到 localhost：5200。端口 5200 是前端认为产品 API 正在运行的端口。
按 Shift+F5 停止应用，或在工具栏中选择“ 停止调试 ”。

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

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

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

在 Visual Studio 中：

若要将产品项目添加到业务流程，请在解决方案资源管理器中右键单击“产品”项目，然后选择“Add.NET>Aspire Orchestrator 支持...”。
在对话框中，选择“ 确定”。
在 解决方案资源管理器中，打开 AppHost 项目，然后打开 Program.cs 文件。

浏览代码并了解如何将 Products 项目添加到业务流程：
```
var builder = DistributedApplication.CreateBuilder(args);

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

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

builder.Build().Run();
```
接下来，将 .NET Aspire 配置为为产品 API 添加新的终结点。

将此 builder.AddProject<Projects.Products>("products"); 行替换为以下代码：

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

通过按 F5 或选择工具栏中的 “开始 ”来运行应用。

产品项目现已在仪表板上列出，其中包含两个终结点。
选择 应用商店 项目的终结点，然后选择“ 产品”。

产品现在显示在 Web 应用中。
按 Shift+F5 停止应用，或在工具栏中选择“ 停止调试 ”。

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

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

在 Visual Studio 中：

在 解决方案资源管理器中，打开 AppHost 项目，然后打开 Program.cs 文件。

将文件中的代码替换为以下代码：

var builder = DistributedApplication.CreateBuilder(args);

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

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

builder.Build().Run();

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

在 解决方案资源管理器中，打开 应用商店 项目，然后打开 appsettings.json 文件。

删除终结点配置行：

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

现在，设置如下：

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

在 “解决方案资源管理器”中的 “应用商店 ”项目中，打开 Program.cs 文件。

替换以下行：

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

替换为以下代码行：

var url = "http://products";

通过按 F5 或选择工具栏中的 “开始 ”来运行应用。
选择 应用商店 项目的终结点，然后选择 “产品”。

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

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

设置环境

浏览示例应用

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

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

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

反馈