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

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

[前提条件]

アクティブなサブスクリプションを持つ Azure アカウント。無料で作成できます。
アスパイアの開発環境を設定します。 C# AppHostには.NET 10 SDKが必要です。
Aspire CLIをインストールしてください。
アスパイアスターターテンプレートを使用して、新しいアスパイアソリューションを作成します。
エミュレーターのステップには、 Docker DesktopのようなOCI準配のコンテナランタイムが使われます。

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

アスパイアスターターテンプレートには、最小限の API プロジェクトと通信するフロントエンド Web アプリが含まれています。 APIプロジェクトはフロントエンドに偽の天気データを提供します。フロントエンドアプリはサービスディスカバリーを使ってAPIプロジェクトに接続します。 AppHostはAspireソリューション内のすべてのリソースをオーケストレーションします。

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

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

AppHostディレクトリにアクセスしてください。以下のコマンドを実行して Aspire.Hosting.Azure.AppConfiguration NuGetパッケージを追加します。
```
aspire add Aspire.Hosting.Azure.AppConfiguration
```
詳細については、aspire addおよびAzure App Configurationホスティング統合をご覧ください。
AppHost.cs ファイルを開き、次のコードを追加します。
```
var builder = DistributedApplication.CreateBuilder(args);

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

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

注

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

既存の App Configuration ストアを参照するには、その名前とリソースグループを 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 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パッケージを追加します。
```
aspire add Aspire.Hosting.Azure.AppConfiguration
```
詳細については、aspire addおよびAzure App Configurationホスティング統合をご覧ください。
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 を使用します。
解のルートから aspire runを実行してください。 [アスパイア] ダッシュボードに移動します。 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;
    }
}