練習 - 整合現有的 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 中使用的 [產品] 類別。
- 產品。 Web API，會傳回目錄中具有其屬性的產品清單。
- [商店]。 Blazor Web 應用程式會向網站訪客顯示這些產品。

若要成功執行應用程式，請變更啟動的專案：

從功能表中，選取 [專案]>[設定啟動專案...]。
在 [解決方案屬性頁] 對話框中，選取 [多個啟動專案]。
在 [動作] 資料行中，將 [產品] 和 [市集] 設定為 [開始]。
選取 [確定]。
按 F5 或選取工具列中的 [開始] 來執行應用程式。

應用程式會開啟預設網頁瀏覽器的兩個執行個體。其中一個會顯示 Web API 的 JSON 輸出，另一個則會顯示 Blazor Web 應用程式。
在 Web 應用程式中，從功能表選取 [產品]。您應該會看到此錯誤。
按 Shift+F5，或選取工具列中的 [停止偵錯] 來停止應用程式。

您不熟悉此應用程式。您不確定端點和服務的設定方式。讓我們新增 .NET Aspire 協調流程，看看其是否有助於診斷問題。

在 .NET Aspire 協調流程中登錄現有的應用程式

在 Visual Studio 中：

在 [方案總管] 中，以滑鼠右鍵按一下 [市集] 專案，然後選取 [新增]>[.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 中：

若要將 [產品] 專案新增至協調流程，請在 [方案總管] 中，以滑鼠右鍵按一下 [產品] 專案，然後選取 [新增]>[.NET Aspire Orchestrator 支援...]。
在對話框中，選取 [確定]。
在 [方案總管] 中，開啟 AppHost 專案，然後開啟 Program.cs 檔案。

探索程式碼，並查看 [產品] 專案如何新增至協調流程：
```
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 服務探索

意見反應