.NET 9 + PostgreSQL + Docker Compose 対応
開発環境での起動・修正・ブレークポイント実践まで
目次
- はじめに
- 開発環境の前提
- VSCodeでのプロジェクト読み込み
- デバッグ構成の確認（ポートとブラウザ自動起動）
- アプリの修正とデバッグ実行
- ブレークポイント設定の注意点（Blazor特有の構造）
- ログイン処理と初期ユーザー情報
- トラブルシューティング
- まとめ
1. はじめに
本シリーズでは、C# と .NET 9 を用いて
Blazor WebアプリをDockerコンテナ環境で開発する手順を解説している。
前回までに、GitHubからリポジトリを取得し、
docker-compose.yml によりPostgreSQLを起動した。
今回は、Visual Studio Code（VSCode）でBlazorアプリ（src/WebApp）を修正し、
ローカル開発環境でデバッグ実行する方法を扱う。
注意：本記事は開発環境を対象としている。
セキュリティ（認証・暗号化・Secret管理）は含まない。
運用時には Program.cs の初期化処理やパスワード管理を安全な方式に置き換えること。
2. 開発環境の前提
- macOS または Windows + Docker Desktop
- GitHubから
dotnet9-webappリポジトリを取得済み - PostgreSQL コンテナが
docker-composeにより起動済み - VSCode に以下拡張機能が導入されている
- C#（Microsoft）
- C# Dev Kit
- IntelliCode
- Docker
- YAML
- AWS Toolkit
- GitLens
- Markdown All in One
3. VSCodeでのプロジェクト読み込み
- VSCodeを起動する。
- メニューから [ファイル] → [フォルダーを開く] を選択する。
-
dotnet9-webapp/src/WebAppフォルダーを指定する。 -
.vscode/launch.jsonが検出され、自動的にC#デバッグ設定が読み込まれる。
リポジトリ内には .sln（WebApp.sln）および .csproj（WebApp.csproj）が存在し、
VSCodeが自動的に構成を認識する。
4. デバッグ構成の確認（ポートとブラウザ自動起動）
4.1 .vscode/launch.json
このファイルは、VSCodeでアプリを起動するための定義を含む。
{
"configurations": [
{
"name": ".NET Core Launch (web)",
"type": "coreclr",
"request": "launch",
"env": {
"ASPNETCORE_ENVIRONMENT": "Development",
"ASPNETCORE_URLS": "http://localhost:9000"
},
"serverReadyAction": {
"action": "openExternally",
"pattern": "\\bNow listening on:\\s+(https?://\\S+)"
}
}
]
}
-
ASPNETCORE_URLSにより、アプリはhttp://localhost:9000で起動する。 -
serverReadyActionにより、Kestrelが起動してログに
Now listening on: http://localhost:9000
と出力されたタイミングでブラウザが自動的に開く。
この設定は .vscode/launch.json 内部にあり、Visual Studio 専用の launchSettings.json とは異なる。
4.2 Properties/launchSettings.json
{
"profiles": {
"WebApp": {
"commandName": "Project",
"launchBrowser": false,
"applicationUrl": "http://localhost:5011",
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
}
}
}
}
この設定は Visual Studio での起動専用であり、
VSCode では参照されない。
VSCode実行時は .vscode/launch.json が優先され、
ポート9000でアプリが起動する。
5. アプリの修正とデバッグ実行
-
src/WebApp配下の Razor コンポーネントまたはC#コードを開く。 -
左メニュー「実行とデバッグ（Ctrl+Shift+D）」を開き、
構成「.NET Core Launch (web)」を選択する。 -
F5キー または 実行ボタン を押してデバッグを開始する。
-
出力パネルに次のように表示されれば起動成功である。
Building... Now listening on: http://localhost:9000 Application started. Press Ctrl+C to shut down. -
ブラウザが自動で起動し、
/Login画面が表示される。
6. ブレークポイント設定の注意点（Blazor特有の構造）
このリポジトリでは、すべての Blazor コンポーネントが
単一ファイル構成（.razor ファイル内に @code ブロックを含む）で実装されている。
.razor.cs（コードビハインド）は存在しない。
.razor ファイルはビルド時に自動で
obj/Debug/net9.0/Razor/... 配下に .razor.g.cs へ変換される。
このため、VSCode のデバッガでは .razor 内の @code ブロック上に
設定したブレークポイントが無視されることがある。
対策：
-
.razor内で止まらない場合は、Program.csや関連C#クラス側に設定する。 - Visual Studio (Windows版) では
.razor内ブレークが有効な場合がある。
| ファイル | 状況 | 備考 |
|---|---|---|
.razor の @code 内 |
停止しない場合がある | VSCodeではシンボル解決が曖昧 |
Program.cs |
確実に停止 | 通常のC#コードとして扱われる |
7. ログイン処理と初期ユーザー情報
アプリケーション起動時に、Program.cs 内で管理ユーザーが初期化される。
// admin ユーザーの初期投入または更新
var adminUser = db.AppUsers.FirstOrDefault(u => u.UserName == "admin");
var adminPassword = Environment.GetEnvironmentVariable("ADMIN_PASSWORD") ?? "admin123!";
ユーザー名：admin
パスワード：環境変数 ADMIN_PASSWORD（未設定時は "admin123!"）
この仕組みは開発用の暫定実装であり、
運用環境では Secrets Manager 等で安全に管理する必要がある。
8. トラブルシューティング
| 現象 | 確認ポイント |
|---|---|
| アプリが起動しない |
dotnet build のエラー有無を確認する |
| ブラウザが開かない |
.vscode/launch.json の serverReadyAction 設定を確認する |
| ポートが異なる |
ASPNETCORE_URLS の値が9000であるか確認する |
| ブレークポイントが効かない |
.razor 内では止まらない場合がある。Program.cs に設定する |
| ログインできない | DB初期化および環境変数 ADMIN_PASSWORD を確認する |
9. まとめ
-
.vscode/launch.jsonにより、アプリはhttp://localhost:9000で起動します。 - ブラウザ自動起動は
serverReadyActionにより行われます。 -
.razor内のブレークポイントは VSCode では安定しません。 - 初期ユーザーは
Program.csにて生成（admin / admin123!） - セキュリティ設定は本稿の対象外となります。