练习 - 使用 .NET Aspire eShop

已完成

可以使用最新的 eShop 参考应用程序(包括 .NET Aspire 堆栈)来演示完整的复杂云原生应用。

假设你就职于一家户外服装和装备公司。 开发团队一直在与 .NET Aspire 合作,为面向客户的主要网站创建新的 eShop Web 应用。 你想要了解此应用的体系结构,并在部署它之前测试其功能。

在本单元中,你将安装 .NET Aspire 及其先决条件,然后使用 eShop 应用调查并运行 .NET Aspire。

安装先决条件

此 .NET Aspire 练习的先决条件包括:

  • .NET 8
  • Visual Studio 2022 预览版
  • Docker Desktop
  • Visual Studio 中的 .NET Aspire 工作负载

如果已安装这些组件,可以跳到浏览 eShop 应用程序。

安装 .NET 8

单击此 .NET 8 链接,然后根据操作系统选择正确的安装程序。 例如,如果使用的是 Windows 11 和新式处理器,请选择适用于 Windows 的 x64 .NET 8 SDK。

下载完成后,运行安装程序并按照说明操作。 在终端窗口中,运行以下命令以验证安装是否成功:

dotnet --version

应会看到所安装的 .NET SDK 版本号。 例如:

8.0.300-preview.24203.14

安装 Visual Studio 2022 预览版

单击此 Visual Studio 2022 预览版链接,然后选择“下载预览版”。 下载完成后,运行安装程序并按照说明操作。

安装 Docker Desktop

单击此 Docker Desktop 链接,然后根据操作系统选择正确的安装程序。 下载完成后,运行安装程序并按照说明操作。 为了获得最佳性能和兼容性,请使用 WSL 2 后端。

打开 Docker Desktop 应用程序并接受服务协议。

在 Visual Studio 中安装 .NET Aspire 工作负载

使用 .NET CLI 安装 .NET Aspire 工作负载:

  1. 打开终端。

  2. 使用以下命令更新 .NET 工作负载:

    dotnet workload update
    

    应会看到一条消息,指出工作负载已成功更新。

    No workloads installed for this feature band. To update workloads installed with earlier SDK versions, include the --from-previous-sdk option.
    Updated advertising manifest microsoft.net.sdk.ios.
    Updated advertising manifest microsoft.net.workload.mono.toolchain.net6.
    Updated advertising manifest microsoft.net.sdk.android.
    Updated advertising manifest microsoft.net.workload.emscripten.net7.
    Updated advertising manifest microsoft.net.workload.emscripten.net6.
    Updated advertising manifest microsoft.net.sdk.macos.
    Updated advertising manifest microsoft.net.workload.emscripten.current.
    Updated advertising manifest microsoft.net.workload.mono.toolchain.current.
    Updated advertising manifest microsoft.net.sdk.maui.
    Updated advertising manifest microsoft.net.workload.mono.toolchain.net7.
    Updated advertising manifest microsoft.net.sdk.maccatalyst.
    Updated advertising manifest microsoft.net.sdk.tvos.
    Updated advertising manifest microsoft.net.sdk.aspire.
    No workloads installed for this feature band. To update workloads installed with earlier SDK versions, include the --from-previous-sdk option.
    
    Successfully updated workload(s): .
    
  3. 使用以下命令安装 .NET Aspire 工作负载:

    dotnet workload install aspire
    

    应会看到一条消息,指出已安装 .NET Aspire 工作负荷。

    Installing Aspire.Hosting.Sdk.Msi.x64 ...... Done
    Installing Aspire.ProjectTemplates.Msi.x64 ..... Done
    Installing Aspire.Hosting.Orchestration.win-x64.Msi.x64 ............. Done
    Installing Aspire.Hosting.Msi.x64 ..... Done
    Installing Aspire.Dashboard.Sdk.win-x64.Msi.x64 ....... Done
    
    Successfully installed workload(s) aspire.
    
  4. 使用以下命令验证是否安装了 .NET Aspire 工作负载:

    dotnet workload list
    

    应会看到 aspire 工作负荷的详细信息。

    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.
    

浏览 .NET Aspire eShop 代码

让我们使用 eShop 引用应用程序来演示 .NET Aspire 堆栈。 我们将从 GitHub 克隆代码,并在 Visual Studio 中检查代码:

  1. 在命令行中,浏览到你选择的、可在其中处理代码的文件夹。

  2. 执行以下命令克隆 eShop 示例应用程序:

    git clone https://github.com/dotnet/eShop.git
    
  3. 启动 Visual Studio,然后选择“打开项目或解决方案”

  4. 浏览到克隆 eShop 的文件夹,选择“eShop.Web.snlf”文件,然后选择“打开”

  5. 解决方案资源管理器中检查解决方案结构。 在顶级,eShop 代码包括用于测试、GitHub 操作和解决方案项的文件夹。 展开“src”文件夹,其中包含微服务的源代码:

    显示 Visual Studio 解决方案资源管理器中 eShop 解决方案的结构的屏幕截图。

  6. 请注意:

    • “src”文件夹包括 .NET Aspire AppHostServiceDefaults 项目。
    • AppHost 项目设置为解决方案的启动项目。
  7. 展开“AppHost”项目,然后选择“eShop.AppHost/Program.cs”文件。

  8. 在“Program.cs”文件中,请注意:

    • 应用程序的组件将添加到名为 builderDistributedApplicationBuilder 对象中。
    • 支持服务(如 Redis 缓存、RabbitMQ 消息传送服务和 PostgreSQL 数据库)将添加到生成器中。 每个容器将在 Docker 容器中预配。
    • 使用 builder.AddProject() 方法将每个微服务添加到生成器中。
    • 使用 .WithReference() 方法将引用支持服务注入到每个微服务中。

在 .NET Aspire eShop 中编辑代码

我们将对源代码进行简单的更改,以在运行应用时进行测试:

  1. 解决方案资源管理器中,展开 src/WebApp/Components/Pages/Catalog 文件夹,然后选择 Catalog.razor 页。

  2. 找到此代码行:

    <SectionContent SectionName="page-header-subtitle">Start the season with the latest in clothing and equipment.</SectionContent>
    
  3. 将行替换为此文本,或为页面创建自己的副标题:

    <SectionContent SectionName="page-header-subtitle">Bringing you the latest in clothing and equipment.</SectionContent>
    

运行 .NET Aspire eShop

让我们运行应用,并使用 .NET Aspire 仪表板检查请求:

  1. 在 Visual Studio 中,按 F5 或在“调试”菜单上选择“开始调试”。 Visual Studio 为 eShop 生成容器。

  2. 如果出现“启动 Docker Desktop”对话框,请选择“是”

  3. 生成 eShop 并将其部署到 Docker 后,.NET Aspire 仪表板将显示在默认浏览器中。

  4. 若要浏览到主页,请在“webapp”项目的行中,选择 https://localhost:<端口> 链接:

    显示 eShop 解决方案的 .NET Aspire 仪表板的屏幕截图

  5. eShop 主页显示在新的浏览器选项卡中。请注意,将显示字幕。

  6. 选择 Adventurer GPS Watch 产品:

    显示 eShop Web 应用的主页的屏幕截图。

  7. 切换到显示 .NET Aspire 仪表板的浏览器选项卡,然后在左侧菜单中选择“跟踪”

  8. 滚动到页面底部,找到名为 webapp 的跟踪:GET /item/{itemId:int}

  9. 在“详细信息”列中,选择“视图”

    显示 .NET Aspire 仪表板中的“跟踪”页的屏幕截图。

  10. 仪表板显示 Adventurer GPS Watch 的跟踪,其中包括对目录微服务的调用:

    显示 .NET Aspire 仪表板中的跟踪的屏幕截图。

  11. 若要停止调试会话,请在 Visual Studio 中,按“Shift + F5”或在“调试”菜单上,选择“停止调试”

  12. 关闭 Visual Studio。

了解详细信息