快速入門：使用 Azure 應用程式組態創建 Aspire 解決方案

在這個快速入門中，你使用 Azure 應用程式組態將 Aspire 專案的應用程式設定儲存和管理外部化。你可以使用 Azure 應用程式組態的 Aspire 整合函式庫來配置應用程式配置資源，並在每個分散式應用程式中使用應用程式配置。

先決條件

具有有效訂閱的 Azure 帳戶。免費創建一個。
為 Aspire 建立開發環境。 C# AppHost 需要 .NET 10 SDK。
安裝 Aspire CLI。
使用 Aspire Starter 範本建立新的 Aspire 解決方案。
在模擬器步驟中，使用符合 OCI 標準的容器執行環境，例如 Docker Desktop。

在本機測試應用程式

Aspire Starter 範本包含一個前端網頁應用程式，與 Minimal API 專案溝通。 API 專案向前端提供假天氣資料。前端應用程式使用服務發現來連接 API 專案。 AppHost 負責協調 Aspire 解決方案中的所有資源。

從解決方案根執行 AppHost：
```
aspire run
```
你會在瀏覽器看到 Aspire 儀表板。
點擊網頁前端的網址。你看到一頁歡迎訊息。

將 Azure 應用程式組態添加到 Aspire 解決方案中

請前往 AppHost 目錄。執行以下指令來新增 Aspire.Hosting.Azure.AppConfiguration NuGet 套件。
```
aspire add Aspire.Hosting.Azure.AppConfiguration
```
欲了解更多資訊，請參閱 aspire add 和 Azure 應用程式組態代管整合。
打開 AppHost.cs 檔案並加入以下程式碼。
```
var builder = DistributedApplication.CreateBuilder(args);

// Add an Azure App Configuration resource
var appConfiguration = builder.AddAzureAppConfiguration("appconfiguration");
```
這很重要

當你呼叫 AddAzureAppConfiguration時，你指示應用程式在啟動應用程式時動態產生 Azure 資源。應用程式必須設定適當的訂用帳戶和位置。更多資訊請參見本地 Azure 配置。如果您使用最新的 Aspire SDK，可以透過 Aspire 儀表板設定訂閱資訊。

備註

你必須被分配 Azure 訂閱中的 擁有者 或 使用者存取管理員 角色。在佈建流程中建立角色指派時，必須具備這些角色。
小提示

將現有的應用程式組態儲存區名稱和資源群組作為參數傳遞給 AsExisting()，以參考該儲存區：
```
var storeName = builder.AddParameter("appConfigurationName");
var resourceGroup = builder.AddParameter("appConfigurationResourceGroup");

var appConfiguration = builder.AddAzureAppConfiguration("appconfiguration")
    .AsExisting(storeName, resourceGroup);
```
欲了解更多資訊，請參閱「使用現有 Azure 資源」。

新增 App Configuration 資源的參考，並設定 webfrontend 專案等待它。

builder.AddProject<Projects.AspireApp_Web>("webfrontend")
    .WithExternalHttpEndpoints()
    .WithHttpHealthCheck("/health")
    .WithReference(apiService)
    .WaitFor(apiService)
    .WithReference(appConfiguration) // reference the App Configuration resource
    .WaitFor(appConfiguration); // wait for the App Configuration resource to enter the Running state before starting the resource

在方案根目錄中，執行 aspire run。你可以看到 Azure 應用程式組態資源正在被配置。
等幾分鐘後，你會看到 Azure 應用程式設定資源已經配置好並正在執行。
點擊 Aspire 儀表板上的部署網址，進入 Azure 入口網站。你會看到部署完成，然後可以前往你的 Azure 應用程式組態資源。

新增金鑰值

將以下鍵值加入你的應用程式設定儲存庫，並將標籤與 內容類型 保留預設值。若要瞭解如何使用 Azure 入口網站或 CLI 將鍵值新增至儲存區的詳細資訊，請移至建立鍵值。

Key	價值觀
TestApp：設定：訊息	Azure 應用程式組態的您好！

將 Azure 應用程式組態添加到 Aspire 解決方案中

請前往 AppHost 目錄。執行以下指令來新增 Aspire.Hosting.Azure.AppConfiguration NuGet 套件。
```
aspire add Aspire.Hosting.Azure.AppConfiguration
```
欲了解更多資訊，請參閱 aspire add 和 Azure 應用程式組態主機整合。
打開 AppHost.cs 檔案並加入以下程式碼。
```
var builder = DistributedApplication.CreateBuilder(args);

// Add an Azure App Configuration resource
var appConfiguration = builder.AddAzureAppConfiguration("appconfiguration")
    .RunAsEmulator(emulator => { // use the App Configuration emulator
        emulator.WithDataBindMount();
    });
```
這很重要

當你呼叫 RunAsEmulator時，它會拉取 App Configuration 模擬器映像檔，並以容器作為 App Configuration 資源執行。確保你的機器上有符合 OCI 標準的容器執行環境。欲了解更多資訊，請參考 Aspire 容器執行環境。

小提示

你可以呼叫 WithDataBindMount 或 WithDataVolume 設定模擬器資源來儲存持久容器，這樣就不用每次都重新建立金鑰值。

新增 App Configuration 資源的參考，並設定 webfrontend 專案等待它。

builder.AddProject<Projects.AspireApp_Web>("webfrontend")
    .WithExternalHttpEndpoints()
    .WithHttpHealthCheck("/health")
    .WithReference(apiService)
    .WaitFor(apiService)
    .WithReference(appConfiguration) // reference the App Configuration resource
    .WaitFor(appConfiguration); // wait for the App Configuration resource to enter the Running state before starting the resource

啟動容器運行時。在這個教學中，我們使用 Docker Desktop。
在方案根目錄中，執行 aspire run。前往 Aspire 儀表板。你可以看到應用程式設定模擬器資源正在執行。

會啟動一個容器來執行應用程式設定模擬器。

新增金鑰值

點擊資源 appconfiguration 網址。你會看到應用程式設定模擬器的介面。
點擊 Create 右上角的按鈕。
新增以下鍵值。

Key 價值觀

TestApp：設定：訊息 Azure 應用程式組態的您好！
按一下 Save 按鈕。

在網頁應用程式中使用應用程式設定

前往 Web 專案目錄。執行以下指令來新增 Aspire.Microsoft.Extensions.Configuration.AzureAppConfiguration NuGet 套件。
```
dotnet add package Aspire.Microsoft.Extensions.Configuration.AzureAppConfiguration
```

打開 Program.cs 檔案並加入以下程式碼。

var builder = WebApplication.CreateBuilder(args);

// Use Azure App Configuration
builder.AddAzureAppConfiguration("appconfiguration"); // use the resource name defined in the AppHost project

打開 Components/Pages/Home.razor 檔案，並用以下程式碼更新它。

@page "/"

@inject IConfiguration Configuration

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

@if (!string.IsNullOrWhiteSpace(message))
{
    <div class="alert alert-info">@message</div>
}
else
{
    <div class="alert alert-info">Welcome to your new app.</div>
}

@code {
    private string? message;

    protected override void OnInitialized()
    {
        string? msg = Configuration["TestApp:Settings:Message"];
        message = string.IsNullOrWhiteSpace(msg) ? null : msg;
    }
}