クイックスタート: Azure App Configuration を使用してアスパイアソリューションを作成する

このクイックスタートでは、Azure App Configuration を使用して、アスパイアプロジェクトのアプリ設定のストレージと管理を外部化します。 Azure App Configuration Aspire 統合ライブラリを使用して、App Configuration リソースをプロビジョニングし、各分散アプリで App Configuration を使用します。

[前提条件]

アクティブなサブスクリプションを持つ Azure アカウント。無料で作成できます。
アスパイアの開発環境を設定します。
アスパイアスターターテンプレートを使用して、新しいアスパイアソリューションを作成します。
Docker Desktop などの OCI 準拠のコンテナーランタイム。

アプリをローカルでテストする

アスパイアスターターテンプレートには、最小限の API プロジェクトと通信するフロントエンド Web アプリが含まれています。 API プロジェクトは、フロントエンドに偽の気象データを提供するために使用されます。フロントエンドアプリは、サービス検出を使用して API プロジェクトに接続するように構成されています。また、アスパイアソリューション内のすべての分散アプリケーションを調整する AppHost プロジェクトもあります。

AppHost プロジェクトを実行します。ブラウザーに [アスパイア] ダッシュボードが表示されます。
Web フロントエンドの URL をクリックします。ウェルカムメッセージが表示されたページが表示されます。

Azure App Configuration をアスパイアソリューションに追加する

AppHost プロジェクトのディレクトリに移動します。次のコマンドを実行して、 Aspire.Hosting.Azure.AppConfiguration Nuget パッケージを追加します。
```
dotnet add package Aspire.Hosting.Azure.AppConfiguration
```
AppHost.csproj ファイルを開いてパッケージを確認します。参照されている Aspire.Hosting.AppHost という名前のパッケージが表示されます。 Aspire.Hosting.AppHost パッケージのバージョンが、インストールされたAspire.Hosting.Azure.AppConfigurationのバージョン以上であることを確認します。
AppHost.cs ファイルを開き、次のコードを追加します。
```
var builder = DistributedApplication.CreateBuilder(args);

// Add an Azure App Configuration resource
var appConfiguration = builder.AddAzureAppConfiguration("appconfiguration");
```
Important

AddAzureAppConfigurationを呼び出すときは、アプリの起動時に Azure リソースを動的に生成するようにアプリに指示します。アプリは、適切なサブスクリプションと場所を構成する必要があります。詳細については、「ローカル Azure プロビジョニング」を参照してください。最新のアスパイア SDK を使用している場合は、アスパイアダッシュボードを使用してサブスクリプション情報を構成できます。

注

Azure サブスクリプションに所有者 または ユーザーアクセス管理者 ロールが割り当てられている必要があります。これらのロールは、プロビジョニングプロセスの一環としてロールの割り当てを作成するために必要です。

ヒント

RunAsExisting()で呼び出しbuilder.AddAzureAppConfiguration("appconfig")をチェーンすることで、既存の App Configuration リソースを参照できます。詳細については、「既存の 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

AppHost プロジェクトを実行します。 Azure App Configuration リソースがプロビジョニング中であることがわかります。
数分待つと、Azure App Configuration リソースがプロビジョニングされ、実行されていることがわかります。
Azure portal に移動するには、アスパイアダッシュボードのデプロイ URL をクリックします。デプロイが完了し、Azure App Configuration リソースに移動できます。

キーと値を追加する

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

Key	価値
TestApp:Settings:Message	こんにちは、Azure App Configuration から！

Azure App Configuration をアスパイアソリューションに追加する

AppHost プロジェクトのディレクトリに移動します。次のコマンドを実行して、 Aspire.Hosting.Azure.AppConfiguration Nuget パッケージを追加します。
```
dotnet add package Aspire.Hosting.Azure.AppConfiguration
```
AppHost.csproj を開きます。 Aspire.Hosting.AppHost パッケージのバージョンが、インストールしたバージョンより前ではないことを確認します。それ以外の場合は、 Aspire.Hosting.AppHost パッケージをアップグレードする必要があります。
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();
    });
```
Important

RunAsEmulatorを呼び出すと、App Configuration エミュレーターイメージがプルされ、App Configuration リソースとしてコンテナーが実行されます。コンピューターに OCI 準拠のコンテナーランタイムがあることを確認します。詳細については、「アスパイアコンテナーランタイム」を参照してください。

ヒント

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 を使用します。
AppHost プロジェクトを実行します。 [アスパイア] ダッシュボードに移動します。 App Configuration エミュレーターリソースが実行されていることがわかります。

App Configuration エミュレーターの実行を開始するコンテナー。

キーと値を追加する

appconfiguration リソースの URL をクリックします。 App Configuration エミュレーター UI が表示されます。
右上隅にある [ Create ] ボタンをクリックします。
次のキー値を追加します。

Key 価値

TestApp:Settings:Message こんにちは、Azure App Configuration から！
Save ボタンをクリックします。

Web アプリケーションで App Configuration を使用する

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