演習 - 新しい .NET Aspire プロジェクトを作成する

  • 10 分

会社の最新プロジェクトの新しいサービスの作業を開始する前に、システムに .NET Aspire のすべての前提条件があることを確認する必要があります。 確認する最善の方法は、スターター テンプレートを使用して新しい .NET アスパイア プロジェクトを作成することです。

演習では、すべての前提条件をインストールし、新しい .NET Aspire Starter アプリを作成します。 次に、Redis を使用してキャッシュ統合をアプリに追加する方法について説明します。 最後に、アプリケーションをテストし、アスパイア ダッシュボードをすばやく探索します。

このタブを選択すると、Visual Studio のこの演習の手順が表示されます。

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

前のユニットでは、前提条件について説明しました。 では、そのインストール手順を説明します。

.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 のリンクに従って、オペレーティング システムに適したインストーラーを選択します。 ダウンロードが完了した後、インストーラーを実行し、指示に従います。

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

.NET Aspire ワークロードのインストール

Visual Studio を使用して次のように .NET Aspire ワークロードをインストールします。

  1. Visual Studio インストーラーを実行します。

  2. Visual Studioの横にある [変更]を選択します。

  3. ASP.NET と Web 開発 ワークロードを選択します。

  4. [インストールの詳細]パネルで、[.NET Aspire SDK (プレビュー)]を選択します。

  5. [ 変更] を選択して .NET Asper 統合をインストールします。

  6. 最新バージョンの .NET Aspire がインストールされていることを確認し、新しいターミナルで次のコマンドを実行します。

    dotnet workload list

ワークロードをインストールすると、次の内容が表示されます。

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 Starter アプリの作成

前提条件がインストールされたので、新しいアプリを作成しましょう。

  1. Visual Studio を開きます。 ダイアログで、[ 新しいプロジェクトの作成] を選択します。

  2. [テンプレートの検索] ボックスに aspire と入力します。

  3. .NET の [Starter App] を選択し、[次へ] を選択します。

  4. [ソリューション名] ボックスに AspireTestApp と入力します。

  5. [場所] ボックスに、新しいアプリを作成するフォルダーを入力します。

  6. [次へ] を選択します。

  7. 既定の [.NET 8.0 (長期サポート)] は選択したままにします。

  8. [キャッシュに Redis を使用する (サポートされているコンテナー ランタイムが必要です)をオフにします。

    次のステップでは、Redis サポートを手動で追加します。

  9. ［作成］ を選択します

  10. メニューから [デバッグ] を選択し、[デバッグの開始] を選択します (または、F5 キーを押します)。

  11. Docker エンジンの起動を求められたら、[はい] を選択します。

ダッシュボードが既定の Web ブラウザーで開きます。

Blazor アプリと API サービスを示す Aspire ダッシュボードのスクリーンショット。

Webfrontend エンドポイントのURL を選択します。 ポートはランダムに割り当てられるため、ダッシュボードが一致しない場合があります。

Blazor Web アプリ フロントエンドのスクリーンショット。

Blazor アプリには、表示する予測データを取得するためにバックエンド API サービスを呼び出す単純なカウンター ページとお天気ページがあります。

Blazor アプリと .NET Aspire ダッシュボードの [ブラウザー] タブを閉じます。 Visual Studio で、デバッグを停止します。

.NET アスパイア プロジェクトにキャッシュ統合を追加する

次に、Redis キャッシュ統合を .NET Aspire プロジェクトに追加しましょう。 まず、アプリ ホストから始めます。

  1. ソリューション エクスプローラーで、 AspireTestApp.AppHost プロジェクトを右クリックし、[NuGet パッケージの管理] を選択します。
  2. [参照] タブを選択し、 [プレリリースを含める] を選択します。
  3. aspire redis で検索し、Aspire.Hosting.Redis パッケージを選択します。
  4. 右側のウィンドウで、[ バージョン ] で [8.0.0] を選択し、[ インストール] を選択します。
  5. [ライセンスの同意] ウィンドウで、[同意する] を選択します。

  1. Redis 構成をアプリ ホスト プロジェクトに追加するには、AspireTestApp.AppHost/Program.cs ファイルを開き、次のコードを追加します。

    // Add Redis
var redis = builder.AddRedis("cache");

    このコードは、ローカル Redis コンテナー インスタンスを作成するようにオーケストレーションを構成します。

  2. Redis キャッシュを使用するには、現在の Webfrontend サービスを変更します。 このコードを

    builder.AddProject<Projects.AspireTestApp_Web>("webfrontend")
    .WithExternalHttpEndpoints()
    .WithReference(apiService);

    このコードにします。

    builder.AddProject<Projects.AspireTestApp_Web>("webfrontend")
    .WithExternalHttpEndpoints()
    .WithReference(apiService)
    .WithReference(redis);

    拡張メソッドは WithReference 、出力キャッシュに Redis を自動的に使用するように UI を構成します。

    次に、使用中のプロジェクトで Redis が利用できます。

  1. ソリューション エクスプローラーで、 AspireTestApp.Web プロジェクトを右クリックし、[NuGet パッケージの管理] を選択します。
  2. [参照] タブを選択し、 [プレリリースを含める] を選択します。
  3. aspire redis を検索し、Aspire.StackExchange.Redis.OutputCaching パッケージを選択 します。
  4. 右側のウィンドウで、[ バージョン ] で [8.0.0] を選択し、[ インストール] を選択します。
  5. [ライセンスの同意] ウィンドウで、[同意する] を選択します。

次に、Visual Studio を使用して、Redis 統合を使用するコードを追加します。

  1. 必要に応じて、Visual Studio で AspireTestAppソリューションを開きます 。

  2. ソリューション エクスプローラーで、AspireTestApp.Web プロジェクトの下にある Program.cs を選択します。

  3. 次のコードを var builder = WebApplication.CreateBuilder(args);の下に追加します。

    // Add Redis caching
builder.AddRedisOutputCache("cache");

    このコードによって以下が行われます。

    • 指定された接続名で Redisインスタンスを使用できるように ASP.NET Core 出力キャッシュを構成します。
    • 対応する正常性チェック、ログ記録、テレメトリが自動的に有効なります。

  4. AspireTestApp.Web/Components/Pages/Home.razor の内容を次のコードに置き換えます。

    @page "/"
@attribute [OutputCache(Duration = 10)]

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app on @DateTime.Now

    上記のコードでは、属性 OutputCache は、10秒の期間を指定します。 ページがキャッシュされた後、10 秒間のウィンドウ内にある後続の要求は、すべてキャッシュされた出力を受け取ります。

アスパイアは、アプリケーションに新しい統合を簡単に追加できるように設計されていることがわかります。 NuGet パッケージを追加してアプリケーションに新しい統合を追加し、Web プロジェクトと AppHost プロジェクトのProgram.cs ファイルに数行のコードを追加します。 Aspire は、Redis コンテナーと出力キャッシュを自動的に構成します。

アプリケーションをテストする

次に、アプリケーションを実行して、キャッシュの動作を確認しましょう。 Visual Studio:

  1. メニューから [デバッグ] を選択し、[デバッグの開始] を選択します (または、F5 キーを押します)。 ソリューションがビルドされ、既定の Web ブラウザーで [Aspire ダッシュボード] が開きます。

  2. Webfrontend サービスのエンドポイント URL を選択して、アプリケーションのホーム ページを表示します。

  3. ブラウザーで、ページを数回更新します。 ページ上の時刻は、10 秒のキャッシュ期間内に変更されません。

    ホーム ページにキャッシュが設定された、更新された Aspire Starter テンプレートのスクリーンショット。

    ソリューションによって Redis コンテナーが作成されます。 Docker デスクトップを開き 、コンテナーが実行されているのを確認します。

    Docker デスクトップで実行されている Redis コンテナーのスクリーンショット。

  4. Visual Studio で実行されているソリューションを停止するには、Shift+F5 キーを押します。

  5. Docker デスクトップ を開き、[コンテナー/アプリ] を選択します。 redis:latest が実行さていないことが確認できます。

.NET Aspire を使用してアプリケーションに新しいキャッシュ統合を簡単に追加する方法を確認しました。 NuGet パッケージを追加し、その後、数行のコードを追加しました。 .NET Aspire は、Redis コンテナーと出力キャッシュを自動的に構成しました。