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

[アーティクル]
03/06/2024

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

前提条件

アクティブなサブスクリプションが含まれる Azure アカウント。無料で作成できます。
App Configuration ストア。ストアを作成する。
.NET SDK 6.0 以降

ヒント

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 ストアに接続する

プロジェクトのディレクトリ TestAppConfig に移動し、次のコマンドを実行して Microsoft.Azure.AppConfiguration.AspNetCore NuGet パッケージ参照を追加します。
```
dotnet add package Microsoft.Azure.AppConfiguration.AspNetCore
```
次のコマンドを実行します。このコマンドでは、シークレットマネージャーを使用して、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 を使用して接続することもできます。
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 ページを更新し、そのコンテンツを表示します。

プロジェクトディレクトリのルートに 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; }
    }
}
```

構成の 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
// ... ...

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;
    }
}

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>

アプリをビルドしてローカルで実行する

.NET CLI を使ってアプリをビルドするには、プロジェクトのルートディレクトリに移動します。次のコマンドをコマンドシェルで実行します。
```
dotnet build
```
ビルドが正常に完了したら、次のコマンドを実行して、Web アプリをローカルで実行します。
```
dotnet run
```
dotnet run コマンドの出力には、2 つの URL が含まれます。ブラウザーを開き、これらの URL のいずれかに移動してアプリケーションにアクセスします。 (例: https://localhost:5001)。

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

Web ページは次のようになります。

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

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

重要

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

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

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

次のステップ

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

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

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

動的な構成を有効にする

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