練習 - 使用 .NET Aspire eShop

10 分鐘

我們可以使用最新的 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 傳統型應用程式並接受服務合約。

安裝 Visual Studio 中的 .NET Aspire 工作負載

使用 .NET CLI 安裝 .NET Aspire 工作負載：

開啟終端機。

使用此指令更新 .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): .

使用此指令安裝 .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.

使用此指令確認已安裝 .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 中進行檢查：

在命令列中，瀏覽至您選擇的資料夾，您可以在其中使用程式碼。
執行下列命令以複製 eShop 範例應用程式：
```
git clone https://github.com/dotnet/eShop.git
```
開啟 Visual Studio，然後選取 [開啟專案或解決方案]。
瀏覽至您複製 eShop 的資料夾，選取 eShop.Web.snlf 檔案，然後選取 [開啟]。
檢查 [方案總管] 中的解決方案結構。在最上層，eShop 程式碼包含測試、GitHub 動作和解決方案項目的資料夾。展開 src 資料夾，其中包含微服務的原始程式碼：
請注意：
- src 資料夾包含 .NET Aspire AppHost 和 ServiceDefaults 專案。
- AppHost 專案會設定為解決方案的啟動專案。
展開 AppHost 專案，然後選取 eShop.AppHost/Program.cs 檔案。
在 Program.cs 檔案中，請注意：
- 應用程式的元件會新增至名為 builder 的 DistributedApplicationBuilder 物件。
- 支援服務 (例如 Redis 快取、RabbitMQ 傳訊服務和 PostgreSQL 資料庫) 會新增至建立器。每個都會佈建在 Docker 容器中。
- 每個微服務都會使用 builder.AddProject() 方法新增至建立器。
- 支援服務的參考會使用 .WithReference() 方法插入每個微服務中。

編輯 .NET Aspire eShop 中的程式碼

我們將在原始程式碼中做出簡單的變更，以在執行應用程式時進行測試：

在 [方案總管] 中，展開 src/WebApp/Components/Pages/Catalog 資料夾，然後選取 [Catalog.razor] 頁面。

找出這行程式碼：

<SectionContent SectionName="page-header-subtitle">Start the season with the latest in clothing and equipment.</SectionContent>

以此文字取代這一行，或為頁面建立您自己的子標題：

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

執行 .NET Aspire eShop

讓我們執行應用程式，並使用 .NET Aspire 儀表板來檢查要求：

在 Visual Studio 中，按 F5 鍵，或在 [偵錯] 功能表中選取 [開始偵錯]。 Visual Studio 會建置 eShop 的容器。
如果 [啟動 Docker 桌面] 對話方塊出現，請選取 [是]。
當 eShop 建置並部署到 Docker 時，.NET Aspire 儀表板會顯示在預設瀏覽器中。
若要瀏覽至首頁，請在 webapp 專案的資料列中，選取 porthttps://localhost:<> 連結：
eShop 首頁會顯示在新的瀏覽器索引標籤中。請注意，您的子標題隨即顯示。
選取 Adventurer GPS Watch 產品：
切換到顯示 .NET Aspire 儀表板的瀏覽器索引標籤，然後在左側選單中選取 [追蹤]。
捲動至頁面底部，找出名稱如下的追蹤：webapp:GET /item/{itemId:int}。
在 [詳細資料] 資料行中，選取 [檢視]：
儀表板會顯示 Adventurer GPS Watch 的追蹤，其中包含對目錄微服務的呼叫：
若要停止偵錯工作階段，請在 Visual Studio 中按 Shift + F5，或在 [偵錯] 功能表上選取 [停止偵錯]。
關閉 Visual Studio。

深入了解

eShop 參考應用程式 - "Northern Mountains"