最初の 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 front end]

  frontend:L --> R:api

このスターターテンプレートは、最新の Python と JavaScript のスタックを組み合わせています:

Python で API を構築するための FastAPI
Python パッケージのインストールと環境管理を行う Uv
JavaScript でユーザーインターフェースを構築するためのReact

次の図は、これから作成するサンプルアプリのアーキテクチャを示しています:

architecture-beta
  service api(logos:fastapi)[API service]
  service frontend(logos:react)[React front end]

  frontend:L --> R:api

新しいアプリを作成する

最初の 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 flags
このコマンドでは次のフラグが使用されています:
- -n: ソリューション名を指定します。
- -o: 出力先ディレクトリを指定します。
さらに詳しい CLI の参照情報については、 aspire new コマンドの説明をご覧ください。

追加の選択肢が表示された場合は、 Up Arrow Up Arrow Up Arrow と Down Arrow Down Arrow Down Arrow でオプションを移動します。 Return Enter Enter で選択を確定してください。

テンプレートのコードを確認する

作成されたテンプレート構造を確認してください。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 front end
  ディレクトリ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 front end
  .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 アプリケーションの中枢であり、どのサービスを動かすか、それらがどのように接続されるか、どの順番で起動するかを定義します。それでは、生成されたコードを見ていきましょう。:
C# — 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 は、サービスの正常性状態を監視します。
C# — 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.0

var 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 は、フロントエンドを本番デプロイ向けにバンドルします。
アプリケーションのトポロジーはコードで定義されているため、理解しやすく、変更も容易で、バージョン管理にも適しています。詳しくは AppHostをご覧ください。

アプリを実行する

output ディレクトリに移動してください:
ディレクトリを移動
```
cd ./AspireApp
```
ディレクトリを移動
```
cd ./aspire-app
```

aspire run を実行して、開発時オーケストレーションを開始してください:

aspire run

このコマンドを実行すると、Aspire CLI は次の処理を行います:

AppHost を自動的に検出
ソリューションをビルド
開発時オーケストレーションを起動

ダッシュボードの準備が整くと、ターミナルに URL（ログイン用トークン付き。以下の出力例で強調表示）が表示されます。ダッシュボードでは、稼働中のリソースやその状態をリアルタイムで確認できます。

🔍  Finding apphosts...
AspireApp.AppHost/AspireApp.AppHost.csproj

🗄  Created settings file at '.aspire/settings.json'.

     AppHost:  AspireApp.AppHost/AspireApp.AppHost.csproj

   Dashboard:  https://localhost:17068/login?t=ea559845d54cea66b837dc0ff33c3bd3

        Logs:  %USERPROFILE%/.aspire/cli/logs/apphost-13024-2025-10-31-19-40-58.log

               Press CTRL+C to stop the apphost and exit.

🔍  Finding apphosts...
apphost.cs

🗄  Created settings file at '.aspire/settings.json'.

     AppHost:  apphost.cs

   Dashboard:  https://localhost:17213/login?t=2b4a2ebc362b7fef9b5ccf73e702647b

        Logs:  $HOME/.aspire/cli/logs/apphost-27732-2025-10-31-19-21-27.log

               Press CTRL+C to stop the apphost and exit.

より詳しい CLI の情報については、 aspire run コマンドの説明をご覧ください。

実行中の分散アプリケーションを確認してください。ダッシュボードから、各リソースの HTTPS エンドポイントを開いてみましょう。

詳しくは、 Aspire ダッシュボード概要をご覧ください。

アプリを停止する

ターミナルで ⌘+C Control + C Control + C を押すと、AppHost が停止し、ダッシュボードも閉じられます。
開発時オーケストレーションを停止する
```
🛑  Stopping Aspire.
```
🥳 おめでとうございます！最初の Aspire アプリを作成しました。

次はこのアプリをデプロイしたくなるかもしれませんね。そしてもちろん Aspire がどのようにそれを扱うのかもご紹介します。でも同時に、きっとこう思われたのではないでしょうか:「これ、どうやって _テスト _するの？」良い質問です！ Aspire はローカルでのオーケストレーションやデプロイだけでなく、サービスやリソース間の統合テストもサポートしています。準備はよろしいですか？最初のテストを書いてみる 💜

質問 & 回答コラボレーションコミュニティディスカッション視聴