最初の Aspire アプリを作成する
このクイックスタートでは、Aspire CLI を使って最初の Aspire アプリケーションを作成し、実行します。 始める前に、 事前準備 を完了し、 Aspire CLI をインストールしていることを確認してください。 このガイドでは、テンプレートから新しい Aspire ソリューションを生成し、Aspire の開発時オーケストレーションを用いてローカルでアプリケーションを実行し、Aspire ダッシュボードを確認するまでの手順を順にご案内します。 このクイックスタートを終えたら、 最初のアプリをデプロイ も是非試してください。
このスターター テンプレートは、最新の C# を採用しています:
- 軽量な HTTP API を実現する Minimal APIs
- C# を使ってインタラクティブな Web UI を構築する Blazor
- 可観測性とレジリエンスの共通設定をまとめた Service defaults
次の図は、これから作成するサンプルアプリのアーキテクチャを示しています:
architecture-beta service api(logos:dotnet)[API service] service frontend(aspire:blazor)[Blazor frontend] frontend:L --> R:api
このスターター テンプレートは、最新の Python と JavaScript のスタックを組み合わせています:
次の図は、これから作成するサンプルアプリのアーキテクチャを示しています:
architecture-beta service api(logos:fastapi)[API service] service frontend(logos:react)[React frontend] frontend:L --> R:api
新しいアプリを作成する
Section titled “新しいアプリを作成する”最初の Aspire アプリケーションを作成するには、 Aspire CLI を使用して スターター テンプレートから新しいソリューションを生成します。 これらのテンプレートには、API サービス、Web フロントエンド、 Aspire AppHost など、複数のプロジェクトが含まれています。
-
テンプレートから新しい Aspire ソリューションを作成してください:
新しい Aspire ソリューションを作成する aspire new aspire-starter -n AspireApp -o AspireApp新しい Aspire ソリューションを作成する aspire new aspire-py-starter -n aspire-app -o aspire-app新しい Aspire ソリューションを作成する aspire new aspire-js-starter -n aspire-app -o aspire-appこのテンプレートには、API サービス、Web フロントエンド、AppHost など、複数のプロジェクトが含まれています。
さらに詳しい CLI の参照情報については、
aspire newコマンドの説明をご覧ください。追加の選択肢が表示された場合は、
Up Arrow↑Up Arrow↑Up Arrow↑ とDown Arrow↓Down Arrow↓Down Arrow↓ でオプションを移動します。ReturnReturnEnterEnterEnterEnter で選択を確定してください。
テンプレートのコードを確認する
Section titled “テンプレートのコードを確認する”-
作成されたテンプレート構造を確認してください。Aspire CLI は、現在のディレクトリ内に、指定した名前の新しいフォルダーを作成します。このフォルダーには、ソリューションファイルと複数のプロジェクトが含まれており、たとえば次のような構成になります:
- AspireApp.sln
ディレクトリAspireApp.ApiService mock weather data API
ディレクトリProperties/
- …
- appsettings.Development.json
- appsettings.json
- AspireApp.ApiService.csproj
- Program.cs
ディレクトリAspireApp.AppHost dev-time orchestrator
ディレクトリProperties/
- …
- appsettings.Development.json
- appsettings.json
- AspireApp.AppHost.csproj
- AppHost.cs
ディレクトリAspireApp.ServiceDefaults
- Extensions.cs
- AspireApp.ServiceDefaults.csproj
ディレクトリAspireApp.Web ASP.NET Core Blazor frontend
ディレクトリProperties/
- …
ディレクトリwwwroot/
- …
- appsettings.Development.json
- appsettings.json
- AspireApp.Web.csproj
- Program.cs
- WeatherApiClient.cs
ディレクトリaspire-app/
ディレクトリapp/ FastAPI mock weather data API
- .dockerignore
- .python-version
- main.py
- pyproject.toml
- telemetry.py
ディレクトリfrontend/ Vite + React web frontend
- .dockerignore
ディレクトリpublic/
- Aspire.png
- github.svg
ディレクトリsrc/
- App.css
- App.tsx
- index.css
- main.tsx
- vite-env.d.ts
- .gitignore
- eslint.config.js
- index.html
- package-lock.json
- package.json
- tsconfig.app.json
- tsconfig.json
- tsconfig.node.json
- vite.config.ts
- apphost.cs dev-time orchestrator
- apphost.run.json
- NuGet.config
このソリューション構造は Aspire テンプレートに基づいています。もしテンプレートがまだインストールされていない場合は、CLI が自動的にインストールします。
-
アプリをオーケストレーションする AppHost のコードを確認してみましょう。
AppHost は Aspire アプリケーションの中枢であり、どのサービスを動かすか、それらがどのように接続されるか、どの順番で起動するかを定義します。それでは、生成されたコードを見ていきましょう。:
AppHost.cs project-based orchestrator var builder = DistributedApplication.CreateBuilder(args);var apiService = builder.AddProject<Projects.AspireApp_ApiService>("apiservice").WithHttpHealthCheck("/health");builder.AddProject<Projects.AspireApp_Web>("webfrontend").WithExternalHttpEndpoints().WithHttpHealthCheck("/health").WithReference(apiService).WaitFor(apiService);builder.Build().Run();何が起きているのでしょうか？
CreateBuilderは、分散アプリケーション用のビルダーを作成します。AddProjectは、API サービスと Web フロントエンドを登録します。WithReferenceは、サービス間の接続を作成します。（Web アプリが API を呼び出せるようにします。）WaitForは、サービスが正しい順序で起動するように制御します。WithHttpHealthCheckは、サービスの正常性状態を監視します。
apphost.cs file-based orchestrator #:sdk Aspire.AppHost.Sdk@13.0.0#:package Aspire.Hosting.JavaScript@13.0.0#:package Aspire.Hosting.Python@13.0.0var builder = DistributedApplication.CreateBuilder(args);var app = builder.AddUvicornApp("app", "./app", "main:app").WithUv().WithExternalHttpEndpoints().WithHttpHealthCheck("/health");var frontend = builder.AddViteApp("frontend", "./frontend").WithReference(app).WaitFor(app);app.PublishWithContainerFiles(frontend, "./static");builder.Build().Run();何が起きているのでしょうか？
AddUvicornAppは、Uvicorn ベースの Python アプリを追加します。AddUvは、uv syncを実行する Uv の環境セットアップタスクを追加します。AddViteAppは、React フロントエンドを登録します。WithReferenceは、フロントエンドと API を接続します。WaitForは、フロントエンドより先に API が起動するよう順序を制御します。PublishWithContainerFilesは、フロントエンドを本番デプロイ向けにバンドルします。
アプリを実行する
Section titled “アプリを実行する”-
output ディレクトリに移動してください:
ディレクトリを移動 cd ./AspireAppディレクトリを移動 cd ./aspire-app -
aspire runを実行して、開発時オーケストレーションを開始してください:開発時オーケストレーションを開始 aspire runこのコマンドを実行すると、Aspire CLI は次の処理を行います:
- AppHost を自動的に検出
- ソリューションをビルド
- 開発時オーケストレーションを起動
ダッシュボードの準備が整くと、ターミナルに URL（ログイン用トークン付き。以下の出力例で強調表示）が表示されます。ダッシュボードでは、稼働中のリソースやその状態をリアルタイムで確認できます。
Example output 🔍 Finding apphosts...AspireApp.AppHost/AspireApp.AppHost.csproj🗄 Created settings file at '.aspire/settings.json'.AppHost: AspireApp.AppHost/AspireApp.AppHost.csprojDashboard: https://localhost:17068/login?t=ea559845d54cea66b837dc0ff33c3bd3Logs: %USERPROFILE%/.aspire/cli/logs/apphost-13024-2025-10-31-19-40-58.logPress CTRL+C to stop the apphost and exit.Example output 🔍 Finding apphosts...apphost.cs🗄 Created settings file at '.aspire/settings.json'.AppHost: apphost.csDashboard: https://localhost:17213/login?t=2b4a2ebc362b7fef9b5ccf73e702647bLogs: $HOME/.aspire/cli/logs/apphost-27732-2025-10-31-19-21-27.logPress CTRL+C to stop the apphost and exit.より詳しい CLI の情報については、
aspire runコマンドの説明をご覧ください。 -
実行中の分散アプリケーションを確認してください。ダッシュボードから、各リソースの
HTTPSエンドポイント を開いてみましょう。
詳しくは、 Aspire ダッシュボード概要 をご覧ください。
アプリを停止する
Section titled “アプリを停止する”-
ターミナルで
⌃+C⌃+CControl + CCtrlCControl + CCtrlC を押すと、AppHost が停止し、ダッシュボードも閉じられます。開発時オーケストレーションを停止する 🛑 Stopping Aspire.🥳 おめでとうございます！ 最初の Aspire アプリを作成しました。
次はこのアプリをデプロイしたくなるかもしれませんね。そしてもちろん Aspire がどのようにそれを扱うのかもご紹介します。でも同時に、きっとこう思われたのではないでしょうか:「これ、どうやって _テスト _するの？」 良い質問です！ Aspire はローカルでのオーケストレーションやデプロイだけでなく、サービスやリソース間の統合テストもサポートしています。 準備はよろしいですか？ 最初のテストを書いてみる 💜