演習 - .NET Aspire eShop を使用する

10 分

完全で複雑なクラウドネイティブアプリを示すために、.NET Aspire スタックを含む最新の eShop リファレンスアプリケーションを使用できます。

あなたはアウトドア用の衣料品や機器の会社で働いているとします。開発チームは、.NET Aspire を操作して、主要な顧客向けサイト用の新しい eShop Web アプリを作成しています。あなたは、このアプリをデプロイする前にそのアーキテクチャを理解し、機能をテストしたいと考えています。

このユニットでは、.NET Aspire とその前提条件をインストールし、eShop アプリを使用して .NET Aspire を調査して実行します。

必須コンポーネントのインストール

この .NET Aspire 演習の前提条件は次のとおりです。

.NET 8
Visual Studio 2022 Preview
Docker Desktop
Visual Studio の .NET Aspire ワークロード

これらを既にインストールしている場合は、先に進んで eShop アプリケーションを調べることができます。

.NET 8 をインストールする

この .NET 8 のリンクに従って、オペレーティングシステムに適したインストーラーを選択します。たとえば、Windows 11 と最新のプロセッサを使用している場合は、x64 .NET 8 SDK for Windows を選択します。

ダウンロードが完了した後、インストーラーを実行し、指示に従います。ターミナルウィンドウで、次のコマンドを実行して、インストールが成功したことを確認します。

dotnet --version

インストールした .NET SDK のバージョン番号が表示されるはずです。次に例を示します。

8.0.300-preview.24203.14

Visual Studio 2022 Preview をインストールする

この Visual Studio 2022 Preview のリンクに従って、[プレビューのダウンロード] を選択します。ダウンロードが完了した後、インストーラーを実行し、指示に従います。

Docker Desktop のインストール

この Docker Desktop のリンクに従って、オペレーティングシステムに適したインストーラーを選択します。ダウンロードが完了した後、インストーラーを実行し、指示に従います。パフォーマンスと互換性を最大限に高めるには、WSL 2 バックエンドを使用します。

Docker Desktop アプリケーションを開き、サービス契約に同意します。

Visual Studio に .NET Aspire ワークロードをインストールする

.NET CLI を使用して、.NET Aspire ワークロードをインストールします。

ターミナルを開きます。

次のコマンドを使用して .NET ワークロードを更新します。

dotnet workload update

ワークロードが正常に更新されたことを示すメッセージが表示されるはずです。

No workloads installed for this feature band. To update workloads installed with earlier SDK versions, include the --from-previous-sdk option.
Updated advertising manifest microsoft.net.sdk.ios.
Updated advertising manifest microsoft.net.workload.mono.toolchain.net6.
Updated advertising manifest microsoft.net.sdk.android.
Updated advertising manifest microsoft.net.workload.emscripten.net7.
Updated advertising manifest microsoft.net.workload.emscripten.net6.
Updated advertising manifest microsoft.net.sdk.macos.
Updated advertising manifest microsoft.net.workload.emscripten.current.
Updated advertising manifest microsoft.net.workload.mono.toolchain.current.
Updated advertising manifest microsoft.net.sdk.maui.
Updated advertising manifest microsoft.net.workload.mono.toolchain.net7.
Updated advertising manifest microsoft.net.sdk.maccatalyst.
Updated advertising manifest microsoft.net.sdk.tvos.
Updated advertising manifest microsoft.net.sdk.aspire.
No workloads installed for this feature band. To update workloads installed with earlier SDK versions, include the --from-previous-sdk option.

Successfully updated workload(s): .

次のコマンドを使用して、.NET Aspire ワークロードをインストールします。

dotnet workload install aspire

.NET Aspire ワークロードがインストールされたことを示すメッセージが表示されるはずです。

Installing Aspire.Hosting.Sdk.Msi.x64 ...... Done
Installing Aspire.ProjectTemplates.Msi.x64 ..... Done
Installing Aspire.Hosting.Orchestration.win-x64.Msi.x64 ............. Done
Installing Aspire.Hosting.Msi.x64 ..... Done
Installing Aspire.Dashboard.Sdk.win-x64.Msi.x64 ....... Done

Successfully installed workload(s) aspire.

次のコマンドを使用して、.NET Aspire ワークロードがインストールされていることを確認します。

dotnet workload list

Aspire ワークロードの詳細が表示されるはずです。

Installed Workload Id      Manifest Version      Installation Source
---------------------------------------------------------------------------------------------
aspire                     8.0.0/8.0.100         SDK 8.0.300-preview.24203, VS 17.10.34902.84

Use `dotnet workload search` to find additional workloads to install.

.NET Aspire の eShop コードを調べる

eShop リファレンスアプリケーションを使用して、.NET Aspire スタックを示しましょう。 GitHub からコードをクローンし、Visual Studio で確認します。

コマンドラインで、コードを操作できる任意のフォルダーを参照します。
次のコマンドを実行して、eShop サンプルアプリケーションをクローンします。
```
git clone https://github.com/dotnet/eShop.git
```
Visual Studio を起動し、[プロジェクトやソリューションを開く] を選択します。
eShop をクローンしたフォルダーを参照し、eShop.Web.snlf ファイルを選び、[開く] を選択します。
ソリューションエクスプローラーでソリューション構造を確認します。最上位レベルでは、eShop コードに、テスト、GitHub アクション、ソリューション項目のフォルダーが含まれています。マイクロサービスのソースコードを含む src フォルダーを展開します。
次のことに注意してください。
- src フォルダーには、.NET Aspire の AppHost および ServiceDefaults プロジェクトが含まれています。
- AppHost プロジェクトは、ソリューションのスタートアッププロジェクトとして設定されます。
AppHost プロジェクトを展開し、eShop.AppHost/Program.cs ファイルを選択します。
Program.cs ファイルでは、次のことに注目してください。
- アプリケーションのコンポーネントは、builder という名前の DistributedApplicationBuilder オブジェクトに追加されます。
- Redis キャッシュ、RabbitMQ メッセージングサービス、PostgreSQL データベースなどのバッキングサービスがビルダーに追加されます。それぞれが Docker コンテナーにプロビジョニングされます。
- 各マイクロサービスは、builder.AddProject() メソッドを使用してビルダーに追加されます。
- バッキングサービスへの参照は、.WithReference() メソッドを使用して各マイクロサービスに挿入されます。

.NET Aspire eShop でコードを編集する

アプリの実行時にテストするソースコードで簡単な変更を加えます。

ソリューションエクスプローラーで、src/WebApp/Components/Pages/Catalog フォルダーを展開し、Catalog.razor ページを選択します。

次のコード行を見つけます。

<SectionContent SectionName="page-header-subtitle">Start the season with the latest in clothing and equipment.</SectionContent>

行を次のテキストに置き換えるか、ページに独自のサブタイトルを作成します。

<SectionContent SectionName="page-header-subtitle">Bringing you the latest in clothing and equipment.</SectionContent>

.NET Aspire の eShop を実行する

アプリを実行し、.NET Aspire ダッシュボードを使用して要求を確認しましょう。

Visual Studio で、F5 キーを押すか、[デバッグ] メニューの [デバッグの開始] を選択します。 Visual Studio によって、eShop のコンテナーが構築されます。
[Docker Desktop の起動] ダイアログが表示されたら、[はい] を選択します。
eShop が構築され、Docker にデプロイされると、.NET Aspire ダッシュボードが既定のブラウザーに表示されます。
ホームページを参照するには、webapp プロジェクトの行で、https://localhost:<ポート> リンクを選択します。
新しいブラウザータブに eShop ホームページが表示されます。サブタイトルが表示されていることに注目してください。
Adventurer GPS Watch 製品を選択します。
.NET Aspire ダッシュボードを表示するブラウザータブに切り替え、左側のメニューで [トレース] を選択します。
ページの一番下までスクロールし、webapp: GET /item/{itemId:int} という名前のトレースを見つけます。
[詳細] 列で、[表示] を選択します。
ダッシュボードには、カタログマイクロサービスの呼び出しを含む、Adventurer GPS Watch のトレースが表示されます。
デバッグセッションを停止するには、Visual Studio で Shift + F5 キーを押すか、[デバッグ] メニューの [デバッグの停止] を選択します。
Visual Studio を閉じます。

詳細情報

eShop リファレンスアプリケーション - "Northern Mountains"

続行