演習 - 既存の ASP.NET Core Web アプリを統合する

8 分

次に、既存の ASP.NET Core Web アプリに .NET Aspire を追加する方法について見てみましょう。その過程で、既存の ASP.NET Core Web アプリに .NET Aspire スタックを追加し、アプリを実行する方法について説明します。また、ASP.NET Core アプリからマイクロサービスを呼び出す方法についても説明します。

環境を設定する

既存のデモ ASP.NET Core Web アプリに .NET Aspire を追加するには、まず既存のアプリを取得する必要があります。

ターミナルウィンドウで次を行います。

現在の作業ディレクトリを、コードを保存する場所に設定します。
リポジトリを ExampleApp という名前の新しいフォルダーに複製します。
```
git clone https://github.com/MicrosoftDocs/mslearn-aspire-starter ExampleApp
```

サンプルアプリを調べる

Visual Studio を使用してデモアプリを探索します。

Visual Studio を開き、[プロジェクトまたはソリューションを開く] を選択します。
[プロジェクト/ソリューションを開く] ダイアログで、ExampleApp/eShopAdmin フォルダーに移動し、EShopAdmin.sln を選択します。
[Open] を選択します。

デモアプリは、次の 3 つのプロジェクトを含む .NET 8 ソリューションです。
- データエンティティ。 Web アプリと Web API で使用される Product クラスを定義するクラスライブラリ。
- 製品。カタログ内の製品とそのプロパティの一覧を返す Web API。
- 保存。 Blazor Web アプリは、これらの製品を Web サイトの訪問者に表示します。

アプリを正常に実行するには、次のように起動するプロジェクトを変更します。

メニューから、[プロジェクト>スタートアッププロジェクトの構成] を選択します。
[ソリューションプロパティページ] ダイアログで、[複数のスタートアッププロジェクト] を選択します。
[アクション] 列で、[製品] と [ストア] を [開始] に設定します。
[OK] を選択します。
F5 キーを押すか、ツールバーの [スタート] を選択して、アプリを実行します。

アプリは、既定の Web ブラウザーの 2 つのインスタンスを開きます。 1 つは Web API の JSON 出力を示し、もう 1 つは Blazor Web アプリを示しています。
Web アプリで、メニューから [製品] を選択します。次のようなエラーが表示されます。
Shift+F5 キーを押してアプリを停止するか、ツールバーの [デバッグの停止] を選択します。

このアプリは初めてです。エンドポイントとサービスの構成方法がわからないでしょう。 .NET Aspire オーケストレーションを追加し、問題の診断に役立つかどうかを確認しましょう。

.NET Aspire オーケストレーションに既存のアプリを参加させる

Visual Studio:

ソリューションエクスプローラーで、ストア プロジェクトを右クリックし、[Add> .NET Aspire Orchestrator Support...] を選択します。
[.NET Aspire オーケストレーターの追加] ダイアログで、[OK] を選択します。

これで、 AppHost プロジェクトと ServiceDefaults プロジェクトがソリューションに追加されていることが確認できました。 AppHost プロジェクトもスタートアッププロジェクトとして設定されます。
F5 キーを押すか、ツールバーの [スタート] を選択して、アプリを実行します。

今回は、ソリューションで .NET Aspire ダッシュボードを示す 1 つのブラウザーウィンドウが開きます。
ストア プロジェクトのエンドポイントを選択し、[製品] を選択します。以前と同じエラーが表示されます。
ダッシュボードに戻ります。
[実行中] の横にある赤いエラー通知を選択し、[詳細]列で [表示] を選択します。
exception.message が表示されるまで、エラーの詳細をスクロールします。 Web アプリは、localhost:5200 への接続に手間取っています。ポート 5200 は、製品 API が実行されるとフロントエンドが考えるポートです。
Shift+F5 キーを押してアプリを停止するか、ツールバーの [デバッグの停止] を選択します。

製品 API を含むようにオーケストレーションを更新する

この問題を解決するには、多くの方法があります。コードの探索、フロントエンドの構成方法の確認、コードの編集、launchSettings.json または appsettings.json ファイルの変更を行えます。

.NET Aspire を使用すると、製品 API がポート 5200 で応答するようにオーケストレーションを変更できます。

Visual Studio:

製品プロジェクトをオーケストレーションに追加するには、ソリューションエクスプローラーで[製品プロジェクト] を右クリックし、[Add.NET>Aspire Orchestrator Support...] を選択します。
ダイアログで [OK] を選択します。
ソリューションエクスプローラーで AppHost プロジェクトを開き、Program.cs ファイルを開きます。

コードを調べて、製品プロジェクトをオーケストレーションに追加する次の方法を確認します。
```
var builder = DistributedApplication.CreateBuilder(args);

builder.AddProject<Projects.Store>("store");

builder.AddProject<Projects.Products>("products");

builder.Build().Run();
```
次に、製品 API の新しいエンドポイントを追加するように .NET Aspire を構成します。

builder.AddProject<Projects.Products>("products"); 行を次のコードに置き換えます。

builder.AddProject<Projects.Products>("products")
       .WithHttpEndpoint(port: 5200, name: "products");

F5 キーを押すか、ツールバーの [スタート] を選択して、アプリを実行します。

これで、製品プロジェクトが 2 つのエンドポイントを含むダッシュボードに一覧表示されます。
ストア プロジェクトのエンドポイントを選択し、[製品] を選択します。

これで、Web アプリに製品が表示されます。
Shift+F5 キーを押してアプリを停止するか、ツールバーの [デバッグの停止] を選択します。

この方法では構成の問題が解決されますが、この問題を解決するための最善の方法ではありません。 .NET Aspire を使用する場合は、.NET Aspire サービス検出も使う必要があります。

.NET サービス検出を使用できるように Web アプリを更新する

Visual Studio:

ソリューションエクスプローラーで AppHost プロジェクトを開き、Program.cs ファイルを開きます。
ファイル内のコードを次のコードに置き換えます。
```
var builder = DistributedApplication.CreateBuilder(args);

var products = builder.AddProject<Projects.Products>("products");

builder.AddProject<Projects.Store>("store")
       .WithReference(products);

builder.Build().Run();
```
上記のコードでは、プロジェクトの順序が変更されます。これで、製品 API がプロジェクト参照としてフロントエンドストア Web アプリに渡されるようになりました。
ソリューションエクスプローラーで、ストア プロジェクトを開き、次に appsettings.json ファイルを開きます。

次のエンドポイント構成行を削除します。

"ProductEndpoint": "http://localhost:5200",
"ProductEndpointHttps": "https://localhost:5200"

次の設定が表示されます。

{
  "DetailedErrors": true,
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*"
}

ソリューションエクスプローラーのストア プロジェクトで、Program.cs ファイルを開きます。

次の行を置き換えます。

var url = builder.Configuration["ProductEndpoint"] 
     ?? throw new InvalidOperationException("ProductEndpoint is not set");

この行で:

var url = "http://products";

F5 キーを押すか、ツールバーの [スタート] を選択して、アプリを実行します。
ストア プロジェクトのエンドポイントを選択し、[製品] を選択します。

アプリは引き続き期待どおりに動作しますが、フロントエンドは現在、製品 API エンドポイントに関する情報を取得するために .NET Aspire サービス検出を使用しています。

演習 - 既存の ASP.NET Core Web アプリを統合する

環境を設定する

サンプル アプリを調べる

.NET Aspire オーケストレーションに既存のアプリを参加させる

製品 API を含むようにオーケストレーションを更新する

.NET サービス検出を使用できるように Web アプリを更新する

フィードバック

サンプルアプリを調べる