Node.js で Aspire アプリを調整する

この記事では、Node.js プロジェクトで npm および Node Package Manager (Aspire) アプリを使用する方法について説明します。この記事のサンプルアプリでは、クライアントエクスペリエンス Angular、React、Vue について説明します。次のAspire API は、これらのシナリオをサポートするために存在しており、Aspire.Hosting.NodeJS NuGet パッケージの一部です。

Node.js: AddNodeApp。
npm アプリ: AddNpmApp.

これら 2 つの API の違いは、前者が Node.js アプリをホストするために使用されるのに対し、後者は package.json ファイルの scripts セクションから実行されるアプリと、対応する npm run <script-name> コマンドをホストするために使用される点です。

Tip

この記事のサンプルソースコードは GitHubで入手できます。Aspire ページを使用した Angular を参照してください。

Important

この記事では、Single-Page アプリ (SPA) フロントエンドビットに焦点を当てていますが、Node.js ページには、Aspireを使用したサーバーアプリとして Node.js を使用する方法を示す追加のサンプルがあります。

Prerequisites

Aspireを使用するには、次のものがローカルにインストールされている必要があります。

.NET 8.0 または .NET 9.0。
- Aspire 9.4 以降では、.NET 10 Preview 5 以降がサポートされています。
OCI 準拠のコンテナーランタイム。次に例を示します。
- Docker デスクトップまたは Podman。詳細については、「コンテナーランタイム」を参照してください。
次のような統合開発者環境 (IDE) またはコードエディター。
- Visual Studio 2022 バージョン 17.9 以降 (オプション)
- Visual Studio Code (省略可能)
  - C# Dev Kit: 拡張 (省略可能)
- JetBrains Rider とプラグインAspire（省略可能）

詳細については、Aspireセットアップとツール、および SDK のAspireに関する説明を参照してください。

さらに、コンピューターに Node.js をインストールする必要があります。この記事のサンプルアプリは、Node.js バージョン 20.12.2 と npm バージョン 10.5.1 でビルドされています。 Node.js と npm のバージョンを確認するには、次のコマンドを実行します。

node --version

npm --version

Node.js (npmを含む) をダウンロードするには、Node.js ダウンロードページを参照してください。

サンプルソースコードを複製する

GitHubからサンプルソースコードを複製するには、次のコマンドを実行します。

git clone https://github.com/dotnet/aspire-samples.git

リポジトリを複製した後、samples/AspireWithJavaScript フォルダーに移動します。

cd samples/AspireWithJavaScript

このディレクトリには、次の一覧で説明する 6 つの子ディレクトリがあります。

AspireJavaScript.Angular: 天気予報 API を利用してデータを取得し、テーブルに表示する Angular アプリ。
AspireJavaScript.AppHost: このサンプルの他のアプリを調整する Aspire プロジェクト。詳細については、オーケストレーションの概要Aspire参照してください。
AspireJavaScript.MinimalApi: ランダムに生成された天気予報データを返す HTTP API。
AspireJavaScript。React: 天気予報 API を取得し、データを表形式で表示する React アプリ。
AspireJavaScript.ServiceDefaults: Aspire プロジェクトの既定の共有プロジェクト。詳細については、サービスの既定値Aspire参照してください。
AspireJavaScript。Vue: 天気予報 API を取得し、データを表形式で表示する Vue アプリ。

クライアントの依存関係をインストールする

サンプルアプリでは、Node.js上に構築された JavaScript クライアントアプリの使用方法を示します。各クライアントアプリは、npm create テンプレートコマンドを使用するか、手動で作成されました。次の表に、各クライアントアプリの作成に使用するテンプレートコマンドと、既定のポートを示します。

アプリの種類	テンプレートの作成コマンド	既定のポート
Angular	`npm create @angular@latest`	4200
React	テンプレートを使用しませんでした。	PORT環境変数
Vue	`npm create vue@latest`	5173

Tip

サンプルアプリにはクライアントが既に含まれているので、これらのコマンドを実行する必要はありません。むしろ、これはクライアントが作成される基準となる参照ポイントです。詳細については、npm-init参照してください。

アプリを実行するには、まず各クライアントの依存関係をインストールする必要があります。これを行うには、各クライアントフォルダーに移動し、npm installnpm i (またはインストールエイリアス ) コマンドを実行します。

Angular 依存関係をインストールする

npm i ./AspireJavaScript.Angular/

Angular アプリの詳細については、Angular クライアントを参照してください。

React 依存関係をインストールする

npm i ./AspireJavaScript.React/

React アプリの詳細については、React クライアントを参照してください。

Vue 依存関係をインストールする

npm i ./AspireJavaScript.Vue/

Vue アプリの詳細については、Vue クライアントを参照してください。

サンプルアプリを実行する

サンプルアプリを実行するには、オーケストレーター AppHost AspireJavaScript.AppHost.csproj をスイッチとして指定して --project コマンドを呼び出します。

dotnet run --project ./AspireJavaScript.AppHost/AspireJavaScript.AppHost.csproj

Aspire ダッシュボードが既定のブラウザーで起動し、[リソース] ページの [エンドポイント] 列に各クライアントアプリエンドポイントが表示されます。次の図は、このサンプルアプリのダッシュボードを示しています。

weatherapi サービスエンドポイントは、HTTP API を文書化する Swagger UI ページに解決されます。各クライアントアプリは、このサービスを使用して天気予報データを表示します。各クライアントアプリを表示するには、 Aspire ダッシュボードで対応するエンドポイントに移動します。これらのスクリーンショットと、テンプレートの開始点から行われた変更については、次のセクションで詳しく説明します。

アプリの実行に使用したのと同じターミナルセッションで、CtrlC 押してアプリを停止します。

AppHost を探索する

各クライアントアプリリソースの調整方法を理解するには、AppHost プロジェクトを参照してください。 AppHost はアプリをホストするために、Aspire.Hosting.NodeJS NuGet パッケージNode.jsが必要です。

プロジェクトファイルでは、AppHost がビルドされる前に npm 依存関係が確実にインストールされるようにするビルドターゲットも定義されます。 AppHost コード (AppHost.cs_) は、 AddNpmApp(IDistributedApplicationBuilder, String, String, String, String[]) API を使用してクライアントアプリリソースを宣言します。

上記のコード:

DistributedApplicationBuilderを作成します。
"weatherapi" サービスをプロジェクトとして AppHost に追加します。
- HTTP エンドポイントを外部としてマークします。
"weatherapi" サービスへの参照を使用して、npm アプリとして "angular"、"react"、および "vue" クライアントアプリを追加します。
- 各クライアントアプリは、異なるコンテナーポートで実行するように構成され、PORT 環境変数を使用してポートを決定します。
- また、すべてのクライアントアプリは、Dockerfile に依存してコンテナーイメージをビルドし、PublishAsDockerFile API からコンテナーとして発行マニフェストで自身を表現するように構成されています。

内部ループネットワークの詳細については、「Aspire内部ループネットワークの概要」を参照してください。アプリの配置の詳細については、配置ツールビルダーのマニフェスト形式Aspire参照してください。

AppHost は、各クライアントアプリの起動を調整するときに、 npm run start コマンドを使用します。このコマンドは、各クライアントアプリの scripts ファイルのセクションで定義されています。 start スクリプトは、指定したポートでクライアントアプリを起動するために使用されます。各クライアントアプリは、"weatherapi" サービスを要求するためにプロキシに依存します。

プロキシは次で構成されます。

クライアントの Angular ファイル。
クライアントの React ファイル。
クライアントの Vue ファイル。

Angular クライアントを調べる

元の Angular テンプレートからいくつかの重要な変更があります。 1 つ目は、proxy.conf.js ファイルの追加です。このファイルは、Angular クライアントから "weatherapi" サービスへの要求をプロキシするために使用されます。

Aspire AppHost は、"weatherapi" サービスエンドポイントの解決に使用されるWEATHERAPI_HTTPSおよびWEATHERAPI_HTTP環境変数を設定します。上記の構成は、環境変数で指定されたターゲット URL への /api で始まる HTTP 要求をプロキシします。

次に、プロキシファイルを angular.json ファイルに含めます。 serveターゲットを更新して、proxyConfig オプションを含め、作成された proxy.conf.js ファイルを参照します。 Angular CLI では、Angular クライアントアプリの提供中にプロキシ構成が使用されるようになります。

3 番目の更新は、package.json ファイルに対する更新です。このファイルは、既定のポートとは異なるポートで実行するように Angular クライアントを構成するために使用されます。これは、PORT 環境変数と、run-script-os npm パッケージを使用してポートを設定することで実現されます。

scripts ファイルのセクションを使用して、start スクリプトを定義します。このスクリプトは、npm start クライアントアプリを起動するために、Angular コマンドによって使用されます。 start スクリプトは、run-script-os パッケージを使用してポートを設定するように構成されています。これは、OS に適した構文に基づいて適切な ng serve スイッチを渡す --port コマンドに委任します。

"weatherapi" サービスに対して HTTP 呼び出しを行うには、依存関係の挿入に AngularAngular を提供するように HttpClient クライアントアプリを構成する必要があります。これは、provideHttpClient ファイルでアプリケーションを構成するときに、ヘルパー関数を使用して実現されます。

最後に、Angular クライアントアプリは、/api/WeatherForecast エンドポイントを呼び出して天気予報データを取得する必要があります。 HTML、CSS、TypeScript の更新がいくつかあり、これらはすべて次のファイルに対して行われます。

app.component.css: CSS を更新してテーブルのスタイルを設定します。
app.component.html: テーブルに天気予報データを表示するように HTML を更新します。
app.component.ts: TypeScript を更新して /api/WeatherForecast エンドポイントを呼び出し、テーブルにデータを表示します。

Angularアプリ実行中

Angular クライアントアプリを視覚化するには、Aspire ダッシュボードで "angular" エンドポイントに移動します。次の図は、Angular クライアントアプリを示しています。

React クライアントを調べる

React アプリはテンプレートを使用して記述されておらず、代わりに手動で記述されました。完全なソースコードは、dotnet/aspire-samples リポジトリにあります。いくつかの重要なポイントは、src/App.js ファイルにあります。

App 関数は、React クライアントアプリのエントリポイントです。 useState と useEffect フックを使用して、天気予報データの状態を管理します。 fetch API は、/api/WeatherForecast エンドポイントに HTTP 要求を行うために使用されます。応答は JSON に変換され、天気予報データの状態として設定されます。

上記のコードでは、次のように module.exports が定義されています。

entry プロパティは、src/index.js ファイルに設定されます。
devServer はプロキシに依存して要求を "weatherapi" サービスに転送し、ポートを PORT 環境変数に設定し、すべてのホストを許可します。
output は、bundle.js ファイルを含む dist フォルダーになります。
plugins src/index.html ファイルをテンプレートとして設定し、favicon.ico ファイルを公開します。

最終的な更新は、次のファイルに対して行われます。

Reactアプリ実行中

React クライアントアプリを視覚化するには、Aspire ダッシュボードで "react" エンドポイントに移動します。次の図は、React クライアントアプリを示しています。

Vue クライアントを調べる

元の Vue テンプレートからいくつかの重要な変更があります。主要な更新プログラムは、fetch エンドポイントから天気予報データを取得するために、TheWelcome.vue ファイルに /api/WeatherForecast 呼び出しが追加されました。次のコードスニペットは、fetch 呼び出しを示しています。

TheWelcome 統合が mountedされると、/api/weatherforecast エンドポイントを呼び出して天気予報データを取得します。応答は、forecasts データプロパティとして設定されます。サーバーポートを設定するために、Vue クライアントアプリは PORT 環境変数を使用します。これは、vite.config.ts ファイルを更新することによって実現されます。

さらに、Vite 構成では、要求を "weatherapi" サービスに転送する server.proxy プロパティを指定します。これは、WEATHERAPI_HTTPS AppHost によって設定されるWEATHERAPI_HTTPおよびAspire環境変数を使用して実現されます。

テンプレートの最後の更新は、theWelcome.vue ファイル に対して行われます。このファイルは、/api/WeatherForecast エンドポイントを呼び出して天気予報データを取得し、テーブルにデータを表示します。これには、CSS 、HTML、TypeScript の更新が含まれています。

Vueアプリ実行中

Vue クライアントアプリを視覚化するには、Aspire ダッシュボードで "vue" エンドポイントに移動します。次の図は、Vue クライアントアプリを示しています。

デプロイに関する考慮事項

この記事のサンプルソースコードは、ローカルで実行するように設計されています。各クライアントアプリは、コンテナーイメージとしてデプロイされます。各クライアントアプリの Dockerfile は、コンテナーイメージのビルドに使用されます。各 Dockerfile は同じです。マルチステージビルドを使用して、運用対応のコンテナーイメージを作成します。

クライアントアプリは現在、真の SPA アプリとして実行するように構成されており、サーバー側レンダリング (SSR) モードで実行するように構成されていません。これらは、静的ファイル 提供するために使用される nginxの背後に配置されます。 default.conf.template ファイルを使用して、nginx を構成し、クライアントアプリへの要求をプロキシします。

Node.js サーバーアプリに関する考慮事項

この記事ではクライアントアプリに焦点を当てていますが、Node.js サーバーアプリをホストする必要があるシナリオが考えられます。 Node.js サーバーアプリを SPA クライアントアプリとしてホストするには、同じセマンティクスが必要です。 Aspire AppHost には、Aspire.Hosting.NodeJS NuGet パッケージ参照が必要であり、コードはAddNodeAppまたはAddNpmAppを呼び出す必要があります。これらの API は、既存の JavaScript アプリを Aspire AppHost に追加する場合に便利です。

シークレットを構成し、JavaScript ベースのアプリに環境変数を渡すときは、クライアントアプリでもサーバーアプリでも、パラメーターを使用します。詳細については、「 Aspire: 外部パラメーター - シークレット」を参照してください。

OpenTelemetry JavaScript SDK を使用する

OpenTelemetry サーバーアプリから Node.js ログ、トレース、メトリックをエクスポートするには、OpenTelemetry JavaScript SDKを使用します。

Node.js JavaScript SDK を使用した OpenTelemetry サーバーアプリの完全な例については、「コードサンプル: AspireNode.js サンプルページ」を参照してください。サンプルの instrumentation.js ファイルについて考えてみましょう。このファイルは、ログ、トレース、メトリックをエクスポートするように OpenTelemetry JavaScript SDK を構成する方法を示しています。

Tip

Aspire ダッシュボードの OTEL CORS 設定を構成するには、Aspire ダッシュボードの OTEL CORS 設定ページを参照してください。

Summary

この記事の範囲外の考慮事項がいくつかありますが、Aspire とノードパッケージマネージャー (Node.js) を使用する npm プロジェクトをビルドする方法について学習しました。また、AddNpmApp API を使用して Node.js アプリをホストする方法や、package.json ファイルから実行するアプリをホストする方法も学びました。最後に、npm CLI を使用して、Angular、React、および Vue クライアントアプリを作成する方法と、それらをさまざまなポートで実行するように構成する方法について説明しました。

こちらも参照ください

Aspire を使用した Angular
コードサンプル: AspireNode.js アプリ

フィードバック

このページはお役に立ちましたか?

Last updated on 2025-08-12