快速入門:使用 Azure 應用程式組態建立 ASP.NET Core 應用程式

在本快速入門中,您將使用 Azure 應用程式設定,在外部儲存和管理 ASP.NET Core 應用程式的應用程式設定。 ASP.NET Core 會使用來自一或多個設定提供者的設定來建置一個以索引鍵/值為基礎的設定物件。 應用程式設定提供 .NET 設定提供者程式庫。 因此,您可以使用應用程式設定作為應用程式的額外設定來源。 如果您有現有的應用程式,只需對應用程式啟動程式碼進行一些小幅變更,就能開始使用應用程式設定。

必要條件

提示

Azure Cloud Shell 是免費的互動式 Shell,可讓您用來執行本文中的命令列指令。 其已預安裝通用 Azure 工具,包括 .NET SDK。 如果您已登入 Azure 訂用帳戶,請從 shell.azure.com 啟動您的 Azure Cloud Shell。 您可以閱讀我們的文件,以深入了解 Azure Cloud Shell

新增金鑰值

將下列索引鍵/值新增至應用程式組態存放區,並保留標籤和內容類型的預設值。 如需了解如何使用 Azure 入口網站或 CLI 將索引鍵-值組新增至存放區的詳細資訊,請參閱 建立索引鍵-值組。

金鑰 值
TestApp:設定:BackgroundColor 白
TestApp:設定:字型色彩 黑
TestApp:設定:字型大小 24
TestApp:Settings:Message Azure 應用程式組態的值

建立 ASP.NET Core Web 應用程式

使用 .NET 命令行介面 (CLI) 來建立新的 ASP.NET Core Web 應用程式專案。 Azure Cloud Shell 會為您提供這些工具。 也可以跨 Windows、macOS 及 Linux 平台使用這些工具。

執行下列命令,在新的 TestAppConfig 資料夾中建立 ASP.NET Core Web 應用程式:

dotnet new webapp --output TestAppConfig

連線至應用程式組態存放區

使用 Microsoft Entra ID(建議)或連接字串連線到您的 App Configuration 存放區。

  1. 流覽至專案的目錄 TestAppConfig,然後執行下列命令以新增 NuGet 套件參考。

    dotnet add package Microsoft.Azure.AppConfiguration.AspNetCore
    dotnet add package Azure.Identity
    
  2. 流覽至 TestAppConfig 資料夾並執行下列命令,以建立應用程式的用戶密碼。

    此命令會使用秘密管理員來儲存名為 Endpoints:AppConfiguration的秘密,其會儲存您 應用程式組態 存放區的端點。 更換 <AppConfigurationEndpoint> 預留位置成您的應用程式設定存放區端點。 您可以在 Azure 入口網站中,從應用程式設定存放區概觀窗格中尋找端點。

    dotnet user-secrets init
    dotnet user-secrets set Endpoints:AppConfiguration "<AppConfigurationEndpoint>"
    
  3. 開啟 Program.cs 並新增下列命名空間:

    using Microsoft.Extensions.Configuration;
    using Microsoft.Azure.AppConfiguration.AspNetCore;
    using Azure.Identity;
    
  4. 呼叫 AddAzureAppConfiguration 檔案中的 Program.cs 方法,以連線到您的 應用程式組態 存放區。

    您可以使用 DefaultAzureCredential 來向 應用程式組態 存放區進行驗證。 請遵循指示,將認證指派給 應用程式組態 數據讀取者角色。 請務必在執行應用程式之前,預留足夠的時間讓權限完成傳播。

    var builder = WebApplication.CreateBuilder(args); 
    
    // Retrieve the endpoint
    string endpoint = builder.Configuration.GetValue<string>("Endpoints:AppConfiguration")
        ?? throw new InvalidOperationException("The setting `Endpoints:AppConfiguration` was not found.");
    
    // Load configuration from Azure App Configuration 
    builder.Configuration.AddAzureAppConfiguration(options =>
    {
        options.Connect(new Uri(endpoint), new DefaultAzureCredential());
    });
    
    // The rest of existing code in program.cs
    // ... ...    
    

    此程式代碼會從您的 應用程式組態 存放區載入沒有標籤的所有索引鍵/值。 如需從 應用程式組態 載入資料的詳細資訊,請參閱 應用程式組態 提供者 API 參考。

從應用程式組態存放區讀取

在此範例中,您將更新網頁,以使用您在應用程式設定存放區中進行的設定來顯示其內容。

  1. 在您專案目錄的根目錄中新增 Settings.cs 檔案。 這會定義適合您要使用之組態的強型別 Settings 類別。 以您專案的名稱取代命名空間。

    namespace TestAppConfig
    {
        public class Settings
        {
            public string BackgroundColor { get; set; }
            public long FontSize { get; set; }
            public string FontColor { get; set; }
            public string Message { get; set; }
        }
    }
    
  2. 將設定中的 TestApp:Settings 區段繫結至 Settings 物件。

    使用下列程式碼更新 Program.cs,並在檔案開頭新增 TestAppConfig 命名空間。

    using TestAppConfig;
    
    // Existing code in Program.cs
    // ... ...
    
    builder.Services.AddRazorPages();
    
    // Bind configuration "TestApp:Settings" section to the Settings object
    builder.Services.Configure<Settings>(builder.Configuration.GetSection("TestApp:Settings"));
    
    var app = builder.Build();
    
    // The rest of existing code in program.cs
    // ... ...
    
  3. 在 Pages 目錄中開啟 Index.cshtml.cs,並使用下列程式碼更新 IndexModel 類別。 在檔案開頭新增 using Microsoft.Extensions.Options 命名空間 (如果尚未存在於此)。

    public class IndexModel : PageModel
    {
        private readonly ILogger<IndexModel> _logger;
    
        public Settings Settings { get; }
    
        public IndexModel(IOptionsSnapshot<Settings> options, ILogger<IndexModel> logger)
        {
            Settings = options.Value;
            _logger = logger;
        }
    }
    
  4. 在 Pages 目錄中開啟 Index.cshtml,並使用下列程式碼更新內容。

    @page
    @model IndexModel
    @{
        ViewData["Title"] = "Home page";
    }
    
    <style>
        body {
            background-color: @Model.Settings.BackgroundColor;
        }
    
        h1 {
            color: @Model.Settings.FontColor;
            font-size: @(Model.Settings.FontSize)px;
        }
    </style>
    
    <h1>@Model.Settings.Message</h1>
    

於本機建置並執行應用程式

  1. 若要使用 .NET CLI 建置應用程式,請流覽至專案的根目錄。 在命令殼層中執行下列命令:

    dotnet build
    
  2. 成功完成建置後,請執行下列命令以在本機執行 Web 應用程式:

    dotnet run
    
  3. 命令的 dotnet run 輸出包含兩個 URL。 開啟瀏覽器並瀏覽至其中一個 URL 以存取您的應用程式。 例如: https://localhost:5001 。

    如果您在 Azure Cloud Shell 中工作,請選取 [Web 預覽] 按鈕,然後選取 [設定]。 系統提示您設定預覽的連接埠時,請輸入 5000,並選取 [開啟並瀏覽]。

    Azure Cloud Shell 的螢幕快照。找出 Web 預覽。

    網頁如下所示:瀏覽器的螢幕快照。在本機啟動快速入門應用程式。

清除資源

如果您不想繼續使用本文中建立的資源,請刪除在此處建立的資源群組,以避免產生費用。

重要

刪除資源群組是無法回復的動作。 資源群組和其中的所有資源都將被永久刪除。 請確定您不會誤刪錯誤的資源群組或資源。 如果您是在含有想保留之其他資源的資源群組中建立了本文所用的資源,請從各資源各自的窗格中逐一刪除,而不要刪除資源群組。

  1. 登入 Azure 入口網站,然後選取 [資源群組]。
  2. 在 [依名稱篩選] 方塊中,輸入您資源群組的名稱。
  3. 在結果清單中,選取資源群組名稱以查看概觀。
  4. 選取 [刪除資源群組]。
  5. 系統將會要求您確認是否刪除資源群組。 輸入您資源群組的名稱以進行確認,然後選取 [刪除]。

不久後,系統便會刪除該資源群組及其所有的資源。

下一步

在本快速入門中,您將:

  • 已佈建新的應用程式組態存放區。
  • 已透過 App Configuration 提供者程式庫連線至您的 App Configuration 存放區。
  • 使用設定提供者程式庫讀取 App Configuration 存放區的鍵值。
  • 已使用您在應用程式設定存放區中進行的設定來顯示網頁。

若要了解如何將 ASP.NET Core Web 應用程式設定為以動態方式重新整理設定設定,請繼續進行下一個教學課程。