次の方法で共有


クイック スタート:Azure App Configuration を使用して ASP.NET Core アプリを作成する

このクイックスタートでは、Azure App Configuration を使用して、ASP.NET Core アプリのアプリ設定のストレージと管理を外部化します。 ASP.NET Core では、1 つ以上の構成プロバイダーからの設定を使用して、キーと値に基づく 1 つの構成オブジェクトが作成されます。 App Configuration は、.NET 構成プロバイダー ライブラリを提供します。 そのため、App Configuration をアプリの追加の構成ソースとして使用できます。 既存のアプリがある場合、App Configuration の使用を開始するために必要なのは、アプリのスタートアップ コードに対するわずかな変更だけです。

前提条件

ヒント

Azure Cloud Shell は無料の対話型シェルです。これを使用して、この記事のコマンド ライン命令を実行できます。 .NET SDK などの一般的な Azure ツールがプレインストールされています。 Azure サブスクリプションにログインしている場合は、shell.azure.com から Azure Cloud Shell を起動します。 Azure Cloud Shell の詳細については、ドキュメントを参照してください

キーと値を追加する

App Configuration ストアに次のキーと値を追加し、[ラベル][コンテンツのタイプ] を既定値のままにします。 Azure portal または CLI を使用してストアにキーと値を追加する方法の詳細については、キーと値の作成に関する記事を参照してください。

キー
TestApp:Settings:BackgroundColor
TestApp:Settings:FontColor
TestApp:Settings:FontSize 24
TestApp:Settings:Message Azure App Configuration からのデータ

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 --framework net6.0

App Configuration ストアに接続する

  1. プロジェクトのディレクトリ TestAppConfig に移動し、次のコマンドを実行して Microsoft.Azure.AppConfiguration.AspNetCore NuGet パッケージ参照を追加します。

    dotnet add package Microsoft.Azure.AppConfiguration.AspNetCore
    
  2. 次のコマンドを実行します。 このコマンドでは、シークレット マネージャーを使用して、ConnectionStrings:AppConfig という名前のシークレットを格納します。これには、App Configuration ストアの接続文字列が格納されます。 <your_connection_string> プレースホルダーを App Configuration ストアの接続文字列に置き換えます。 接続文字列は、Azure portal の App Configuration ストアの [アクセス キー] で確認できます。

    dotnet user-secrets init
    dotnet user-secrets set ConnectionStrings:AppConfig "<your_connection_string>"
    

    ヒント

    一部のシェルでは、引用符で囲まれていない限り、接続文字列が切り捨てられます。 dotnet user-secrets list コマンドの出力に接続文字列全体が表示されていることを確認します。 そうでない場合は、接続文字列を引用符で囲んでコマンドを再実行します。

    シークレット マネージャーは、プロジェクト ツリーの外部にシークレットを格納します。これにより、ソース コード内でシークレットが誤って共有されるのを防ぐことができます。 これは Web アプリをローカルにテストするためだけに使用されます。 App Service のようにしてアプリが Azure にデプロイされる場合、接続文字列アプリケーション設定、または環境変数を使用して接続文字列を格納します。 または、接続文字列を完全に回避するために、マネージド ID を使用して App Configuration に接続するか、その他の Microsoft Entra ID を使用して接続することもできます。

  3. Program.cs を開き、AddAzureAppConfiguration メソッドを呼び出して、Azure App Configuration を新しい構成ソースとして追加します。

    var builder = WebApplication.CreateBuilder(args);
    
    // Retrieve the connection string
    string connectionString = builder.Configuration.GetConnectionString("AppConfig");
    
    // Load configuration from Azure App Configuration
    builder.Configuration.AddAzureAppConfiguration(connectionString);
    
    // The rest of existing code in program.cs
    // ... ...
    

    このコードは、接続文字列を使用して App Configuration ストアに接続し、ラベルをもたないすべてのキー値を読み込みます。 App Configuration プロバイダーの詳細については、「App Configuration プロバイダー API リファレンス」を参照してください。

App Configuration ストアから読み取る

この例では、App Configuration ストアで構成した設定を使用して Web ページを更新し、そのコンテンツを表示します。

  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 コマンドの出力には、2 つの URL が含まれます。 ブラウザーを開き、これらの URL のいずれかに移動してアプリケーションにアクセスします。 (例: https://localhost:5001)。

    Azure Cloud Shell で作業している場合は、 [Web プレビュー][構成] の順に選択します。 プレビュー用のポートを構成するよう求めるメッセージが表示されたら、「5000」と入力し、[開いて参照する] を選択します。

    Screenshot of Azure Cloud Shell. Locate Web Preview.

    Web ページは次のようになります。 Screenshot of the browser.Launching quickstart app locally.

リソースをクリーンアップする

この記事で作成したリソースを継続して使用しない場合は、ここで作成したリソース グループを削除して課金されないようにしてください。

重要

リソース グループを削除すると、元に戻すことができません。 リソース グループとそのすべてのリソースは完全に削除されます。 間違ったリソース グループやリソースをうっかり削除しないようにしてください。 この記事のリソースを、保持したい他のリソースを含むリソース グループ内に作成した場合は、リソース グループを削除する代わりに、各リソースをそれぞれのペインから個別に削除します。

  1. Azure portal にサインインし、 [リソース グループ] を選択します。
  2. [名前でフィルター] ボックスにリソース グループの名前を入力します。
  3. 結果一覧でリソース グループ名を選択し、概要を表示します。
  4. [リソース グループの削除] を選択します。
  5. リソース グループの削除の確認を求めるメッセージが表示されます。 確認のためにリソース グループの名前を入力し、 [削除] を選択します。

しばらくすると、リソース グループとそのすべてのリソースが削除されます。

次のステップ

このクイック スタートでは次の作業を行います。

  • 新しい App Configuration ストアをプロビジョニングしました。
  • App Configuration プロバイダー ライブラリを使用して、App Configuration ストアに接続しました。
  • 構成プロバイダー ライブラリを使用して、App Configuration ストアのキー値を読み取りました。
  • App Configuration ストアで構成した設定を使用して Web ページを表示しました。

構成設定を動的に更新するように ASP.NET Core Web アプリを構成する方法については、次のチュートリアルに進んでください。