練習 - 建立新的 .NET Aspire 專案

  • 10 分鐘

在開始處理公司最新專案的新服務之前，您想要檢查系統具有.NET Aspire 的所有必要條件。 進行檢查的最佳方式是使用入門範本建立新的 .NET Aspire 專案。

在本練習中，您會安裝所有必要條件，然後建立新的 .NET Aspire 入門應用程式。 接著，您會了解如何使用 Redis 將快取元件新增至應用程式。 最後，您會測試應用程式並快速探索 Aspire 儀表板。

選擇此索引標籤以查看此練習中的 Visual Studio 步驟。

安裝先決條件

我們在上一個單元討論過必要條件。 現在。讓我們逐步了解如何進行安裝。

安裝 .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 連結，然後為您的作業系統選取正確的安裝程式。 下載完成之後，請執行安裝程式並遵循指示。

開啟 Docker Desktop 應用程式並接受服務合約。

安裝 .NET Aspire 工作負載

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

  1. 開啟 Visual Studio 安裝程式。

  2. 選取 [Visual Studio] 旁的 [修改]。

  3. 選取 [ASP.NET 和網頁程式開發] 工作負載。

  4. 在 [安裝詳細資料] 面板上，選取 [.NET Aspire SDK (預覽)]。

  5. 選取 [修改] 以安裝 .NET Aspire 元件。

  6. 檢查已安裝最新版的 .NET Aspire，在新終端中執行此命令：

    dotnet workload list

安裝工作負載之後，您會看到：

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 入門應用程式

現已安裝好必要條件，接下來讓我們建立新的應用程式。

  1. 開啟 Visual Studio。 在對話方塊中，選取 [建立新專案]。

  2. 在 [搜尋範本] 方塊中，輸入「aspire」。

  3. 選取 [.NET Aspire 入門應用程式]，然後選取 [下一步]。

  4. 在 [解決方案名稱] 方塊中，輸入「AspireTestApp」。

  5. 在 [位置] 方塊中，輸入您要在其中建立新應用程式的資料夾。

  6. 選取 [下一步]。

  7. 讓預設的 [.NET 8.0 (長期支援)] 保持選取狀態。

  8. 取消核取 [使用 Redis 來快取 (需要受支援的容器執行階段)]。

    您會在後續步驟中手動新增 Redis 支援。

  9. 選取 建立。

  10. 從功能表中選取 [偵錯]，然後選取 [開始偵錯] (或者，按 F5)。

  11. 如果系統提示您啟動 Docker 引擎，請選取 [是]。

儀表板會在預設的網頁瀏覽器中開啟。

螢幕擷取畫面：Aspire 儀表板，其中顯示 Blazor 應用程式和 API 服務。

選取 [webfrontend] 端點 URL。 連接埠會隨機指派，因此您的儀表板可能不相符。

螢幕擷取畫面：Blazor Web 應用程式前端。

Blazor 應用程式具有簡單的計數器頁面和天氣頁面，會呼叫後端 API 服務以取得要顯示的預測資料。

關閉 Blazor 應用程式和 .NET Aspire 儀表板的瀏覽器索引標籤。 在 Visual Studio 中，停止偵錯。

將快取元件新增至 .NET Aspire 專案

現在讓我們將 Redis 快取元件新增至 .NET Aspire 專案。 我們會從應用程式主機開始：

  1. 在 [方案總管] 中，以滑鼠右鍵按一下 [AspireTestApp.AppHost] 專案，然後選取 [管理 NuGet 套件]。
  2. 選取 [瀏覽] 索引標籤，然後選取 [包含發行前版本]。
  3. 搜尋「aspire redis」，然後選取 [Aspire.Hosting.Redis] 套件。
  4. 在右窗格中，針對 [版本] 選取最新的 [8.0.0]，然後選取 [安裝]。
  5. 在 [接受授權] 對話方塊中，選取 [我接受]。

  1. 若要將 Redis 設定新增至應用程式主機專案，請開啟 AspireTestApp.AppHost/Program.cs 檔案，並新增下列程式碼：

    // Add Redis
var redis = builder.AddRedis("cache");

    此程式碼會設定協調流程以建立本機 Redis 容器執行個體。

  2. 將目前的 webfrontend 服務變更為使用 Redis 快取。 將此程式碼：

    builder.AddProject<Projects.AspireTestApp_Web>("webfrontend")
    .WithExternalHttpEndpoints()
    .WithReference(apiService);

    針對此程式碼：

    builder.AddProject<Projects.AspireTestApp_Web>("webfrontend")
    .WithExternalHttpEndpoints()
    .WithReference(apiService)
    .WithReference(redis);

    WithReference 擴充方法會將 UI 設定為自動使用 Redis 來進行輸出快取。

    接下來，我們可以在取用專案中使用 Redis。

  1. 在 [方案總管] 中，以滑鼠右鍵按一下 [AspireTestApp.Web] 專案，然後選取 [管理 NuGet 套件]。
  2. 選取 [瀏覽] 索引標籤，然後選取 [包含發行前版本]。
  3. 搜尋「aspire redis」，然後選取 [Aspire.StackExchange.Redis.OutputCaching] 套件。
  4. 在右窗格中，針對 [版本] 選取最新的 [8.0.0]，然後選取 [安裝]。
  5. 在 [接受授權] 對話方塊中，選取 [我接受]。

現在，使用 Visual Studio 來新增程式碼，以使用 Redis 元件。

  1. 如果您需要，請在 Visual Studio 中開啟「AspireTestApp」解決方案。

  2. 在 [方案總管] 的 [AspireTestApp.Web] 專案底下，選取 [Program.cs]。

  3. 在 var builder = WebApplication.CreateBuilder(args); 底下新增此程式碼：

    // Add Redis caching
builder.AddRedisOutputCache("cache");

    此程式碼：

    • 設定 ASP.NET Core 輸出快取，以使用具有指定連線名稱的 Redis 執行個體。
    • 自動啟用對應的健康情況檢查、記錄和遙測。

  4. 將 AspireTestApp.Web/Components/Pages/Home.razor 的內容取代為下列程式碼：

    @page "/"
@attribute [OutputCache(Duration = 10)]

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app on @DateTime.Now

    在上述程式碼中，OutputCache 屬性會指定 10 秒的持續時間。 快取頁面之後，10 秒時段內的每個後續要求都會接收所快取的輸出。

您可以看到 Aspire 的設計目的是讓您輕鬆地將新元件新增至您的應用程式。 您可以藉由新增 NuGet 套件將新元件新增至應用程式，然後將幾行程式碼新增至 Web 和 AppHost 專案中的 Program.cs 檔案。 Aspire 接著會自動為您設定 Redis 容器和輸出快取。

測試應用程式

現在讓我們執行應用程式來查看快取的運作情形。 在 Visual Studio 中：

  1. 從功能表中選取 [偵錯]，然後選取 [開始偵錯] (或者，按 F5)。 解決方案會進行建置，而且 Aspire 儀表板會在您的預設網頁瀏覽器中開啟。

  2. 選取 webfrontend 服務的 [端點] URL，以檢視應用程式的首頁。

  3. 在瀏覽器中，重新整理頁面幾次。 在 10 秒的快取持續時間內，頁面上的時間不會變更。

    螢幕擷取畫面：已使用首頁上的快取更新 Aspire 入門範本。

    解決方案會建立 Redis 容器。 開啟 Docker Desktop 以查看容器的執行。

    螢幕擷取畫面：正在 Docker Desktop 中執行的 Redis 容器。

  4. 若要讓解決方案在 Visual Studio 中停止執行，請按 Shift+F5。

  5. 開啟 Docker Desktop，然後選取 [容器/應用程式]。 您應該會看到 redis:latest 已不再執行。

您已了解使用 .NET Aspire 將新的快取元件新增至應用程式有多容易。 您已新增 NuGet 套件，然後新增幾行程式碼。 .NET Aspire 會自動為您設定 Redis 容器和輸出快取。