Visual Studio Code+ASP.NET Core複数プロジェクトをデバッグ

オウルです。

今回は、WSL Ubuntu 上で複数の ASP.NET Core Web アプリを Visual Studio Code（以降、VSCode）でデバッグする方法です。

Developing in WSL

https://code.visualstudio.com/docs/remote/wsl より引用

Visual Studio だとスタートアッププロジェクト（ソリューションの右クリックプロパティ/共通プロパティ）を「マルチスタートアッププロジェクト」にすることで、複数プロジェクトをデバッグできますが、VSCode では、どうするのでしょうか。

それでは、ソリューションに複数プロジェクトを作成して、デバッグできる環境を準備していきます。

ローカル環境

Client OS	Windows10
WSL	Ubuntu 18.04.2 LTS
Editor	Visual Studio Code
SDK	ASP.NET Core 3.1

ASP.NET Core の Developing in WSL はこちらを参考にしてください。

雲の上はいつも晴れ

WSL UbuntuでASP.NET Core+SQLiteの開発環境のをつくる

https://book2525stack.com/2020/01/15/linux-netcore-development-env

オウルです。今回は、ASP.NET Core 3.1 MVC アプリの開発環境を WSL Ubuntu に準備します。※ Windows 版は、こちらを参考にしてください。RDBMS は本業で SQLServer を１０年近く使用しているため、SQLServer でと考えていましたが、SQL Server on Linux を動作させるためのマシンのメモリが、最低２ＧＢ要求されるため、今回は SQLite を使用します。WSL Ubuntu 開発環境を構築ローカル環境Client OSWindows10WSLUbuntu 18.04.2 LTSEditorVisual Studio CodeSDKASP.NET Core 3.1RDBMSSQLite 3.22.0WSL Ubuntu 18.04.2 LTS インストー...

複数プロジェクトをデバッグ

まず、WSL Ubuntu に接続します。コマンドプロンプトを起動して wsl と入力後 Enter します。

ソリューション作成

ソリューションを作成する任意のディレクトリに移動して、次のコマンドを実行します。

// バージョンを確認
dotnet --list-sdks
3.1.100 [/usr/share/dotnet/sdk]
dotnet --version
3.1.100
// 空のソリューションを作成
dotnet new sln -o AspNetCoreApp

// バージョンを確認

dotnet --list-sdks

3.1.100 [/usr/share/dotnet/sdk]

dotnet --version

3.1.100

// 空のソリューションを作成

dotnet new sln -o AspNetCoreApp

dotnet sln command: https://docs.microsoft.com/ja-jp/dotnet/core/tools/dotnet-sln

次は、作成したソリューションにプロジェクトを追加します。

複数プロジェクト作成

引き続きコマンドプロンプトから次のコマンドを実行します

プロジェクト作成

// ディレクトリを作成、移動
cd AspNetCoreApp
mkdir src
cd src
// [個別のユーザーアカウント] オプションを付けて ASP.NET Core MVC プロジェクトを作成
dotnet new mvc -au Individual -o WebMvc
// ASP.NET Core WebApi プロジェクトを作成
dotnet new webapi -o WebApi
// .NET Core クラスライブラリを作成
mkdir lib
cd lib
dotnet new classlib -o WebClassLib

// ディレクトリを作成、移動

cd AspNetCoreApp

mkdir src

cd src

// [個別のユーザーアカウント] オプションを付けて ASP.NET Core MVC プロジェクトを作成

dotnet new mvc -au Individual -o WebMvc

// ASP.NET Core WebApi プロジェクトを作成

dotnet new webapi -o WebApi

// .NET Core クラスライブラリを作成

mkdir lib

cd lib

dotnet new classlib -o WebClassLib

dotnet new command: https://docs.microsoft.com/ja-jp/dotnet/core/tools/dotnet-new?tabs=netcore22

プロジェクトをソリューションファイルに追加

// 作成した３つのプロジェクトをソリューションファイルに追加
dotnet sln AspNetCoreApp.sln add src/WebMvc/WebMvc.csproj
dotnet sln AspNetCoreApp.sln add src/WebApi/WebApi.csproj
dotnet sln AspNetCoreApp.sln add src/lib/WebClassLib/WebClassLib.csproj

// 作成した３つのプロジェクトをソリューションファイルに追加

dotnet sln AspNetCoreApp.sln add src/WebMvc/WebMvc.csproj

dotnet sln AspNetCoreApp.sln add src/WebApi/WebApi.csproj

dotnet sln AspNetCoreApp.sln add src/lib/WebClassLib/WebClassLib.csproj

プロジェクト間参照を追加

// クラスライブラリをアプリで参照できるようにプロジェクト間参照を追加
dotnet add src/WebMvc/WebMvc.csproj reference src/lib/WebClassLib/WebClassLib.csproj

1 2	// クラスライブラリをアプリで参照できるようにプロジェクト間参照を追加 dotnet add src/WebMvc/WebMvc.csproj reference src/lib/WebClassLib/WebClassLib.csproj

これで準備ができたので、VSCode を起動します。

VSCode 起動

次のコマンドを実行します。

cd ソリューションファイルのディレクトリ
code .

1 2	cd ソリューションファイルのディレクトリ code .

デバッグ構成を自動追加

デバッグ構成を自動追加するために、VSCode に以下の拡張機能をインストールします。

作成したプロジェクトの Program.cs をクリックします。初めて C# のコードを開いたときに、デバッグ構成を自動追加する以下のメッセージが表示されるので Yes をクリックします。

WebMvc を選択します。

.vscode ディレクトリに作成された task.json を次のように修正します。

tasks.json

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "build-mvc", // modify
            ・・・
        },
        {
            "label": "publish-mvc", // modify
            ・・・
        },
        {
            "label": "watch-mvc",  // modify
            ・・・
        }
    ]
}

{

"version": "2.0.0",

"tasks": [

{

"label": "build-mvc", // modify

・・・

{

"label": "publish-mvc", // modify

・・・

{

"label": "watch-mvc", // modify

・・・

}

]

}

各 task プロパティの役割は、公式の Custom tasks を参照ください。

タスクの実行

タスクが動作するか実行してみます。ここでは、タスク一覧を表示する方法を２つ紹介します。

タスクの実行->ターミナル/タスクの実行
F1 でコマンドパレットに run task と入力、一覧からタスクを実行

task: https://code.visualstudio.com/docs/editor/tasks

シーケンシャルに実行

複数タスクをシーケンシャルに実行することも可能です。こちらは、次回予定している「Visual Studio Code で TypeScript をデバッグ-using TypeScript babel webpack」をご覧ください。

次は、lanch.json を修正します。

lanch.json

{
    "name": "Launch MVC", // modify
    "type": "coreclr",
    "request": "launch",
    "preLaunchTask": "build-mvc", // modify
    // If you have changed target frameworks, make sure to update the program path.
    "program": "${workspaceFolder}/src/WebMvc/bin/Debug/netcoreapp3.1/WebMvc.dll",
    "args": [],
    "cwd": "${workspaceFolder}/src/WebMvc",
    "stopAtEntry": false,
    // Enable launching a web browser when ASP.NET Core starts. For more information: https://aka.ms/VSCode-CS-LaunchJson-WebBrowser
    "serverReadyAction": {
        "action": "openExternally",
        "pattern": "^\\s*Now listening on:\\s+(https?://\\S+)"
    },
    "env": {
        "ASPNETCORE_ENVIRONMENT": "Development",
        // add 
        "ASPNETCORE_Kestrel__Certificates__Default__Password": <cryptic-password>,
        "ASPNETCORE_Kestrel__Certificates__Default__Path": "/mnt/c/Users/<user_name>/.aspnet/https/aspnetapp.pfx"
    },
    "sourceFileMap": {
        "/Views": "${workspaceFolder}/Views"
    }
},

{

"name": "Launch MVC", // modify

"type": "coreclr",

"request": "launch",

"preLaunchTask": "build-mvc", // modify

// If you have changed target frameworks, make sure to update the program path.

"program": "${workspaceFolder}/src/WebMvc/bin/Debug/netcoreapp3.1/WebMvc.dll",

"args": [],

"cwd": "${workspaceFolder}/src/WebMvc",

"stopAtEntry": false,

// Enable launching a web browser when ASP.NET Core starts. For more information: https://aka.ms/VSCode-CS-LaunchJson-WebBrowser

"serverReadyAction": {

"action": "openExternally",

"pattern": "^\\s*Now listening on:\\s+(https?://\\S+)"

"env": {

"ASPNETCORE_ENVIRONMENT": "Development",

// add

"ASPNETCORE_Kestrel__Certificates__Default__Password": <cryptic-password>,

"ASPNETCORE_Kestrel__Certificates__Default__Path": "/mnt/c/Users/<user_name>/.aspnet/https/aspnetapp.pfx"

"sourceFileMap": {

"/Views": "${workspaceFolder}/Views"

}

WSL 証明書を信頼するように Windows 証明書ストアを構成する必要があります。こちらの記事の「デバッグ」を参考にしてください。

雲の上はいつも晴れ

WSL UbuntuでASP.NET Core+SQLiteの開発環境のをつくる

https://book2525stack.com/2020/01/15/linux-netcore-development-env

OmniSharp: https://github.com/OmniSharp/omnisharp-vscode/blob/master/debugger.md

補足：デバッグ構成を自動追加メッセージを再表示

誤ってメッセージを閉じた場合は、.vscode ディレクトリを削除して、もう一度 code . で VSCode を起動します。

次にWebApi のデバッグ構成を追加して、複数デバッグができるように構成します。

デバッグ構成

「launch.json」「tasks.json」の WebMvc の構成をコピーして WebApi の構成を追加します。

launch.json

{
    "name": "Launch API", // modify
    "type": "coreclr",
    "request": "launch",
    "preLaunchTask": "build-api", // modify
    // If you have changed target frameworks, make sure to update the program path.
    "program": "${workspaceFolder}/src/WebApi/bin/Debug/netcoreapp3.1/WebApi.dll", // modify
    "args": [],
    "cwd": "${workspaceFolder}/src/WebApi", // modify
    "stopAtEntry": false,
    // Enable launching a web browser when ASP.NET Core starts. For more information: https://aka.ms/VSCode-CS-LaunchJson-WebBrowser
    //"serverReadyAction": {
    //    "action": "openExternally",
    //    "pattern": "^\\s*Now listening on:\\s+(https?://\\S+)"
    //},
    "env": {
        "ASPNETCORE_ENVIRONMENT": "Development",
        // add
        "ASPNETCORE_URLS": "http://localhost:5003"
    },
    "sourceFileMap": {
        "/Views": "${workspaceFolder}/Views"
    }
},

{

"name": "Launch API", // modify

"type": "coreclr",

"request": "launch",

"preLaunchTask": "build-api", // modify

// If you have changed target frameworks, make sure to update the program path.

"program": "${workspaceFolder}/src/WebApi/bin/Debug/netcoreapp3.1/WebApi.dll", // modify

"args": [],

"cwd": "${workspaceFolder}/src/WebApi", // modify

"stopAtEntry": false,

// Enable launching a web browser when ASP.NET Core starts. For more information: https://aka.ms/VSCode-CS-LaunchJson-WebBrowser

//"serverReadyAction": {

// "action": "openExternally",

// "pattern": "^\\s*Now listening on:\\s+(https?://\\S+)"

//},

"env": {

"ASPNETCORE_ENVIRONMENT": "Development",

// add

"ASPNETCORE_URLS": "http://localhost:5003"

"sourceFileMap": {

"/Views": "${workspaceFolder}/Views"

}

“env” に “ASPNETCORE_URLS”: “http://localhost:5003” を指定して WebMvc とのポート衝突を回避します（また https ではなくhttp で構成）

複数デバッグ構成

複数デバッグは、“compounds” を使います。また、”preLaunchTask” オプションでデバッグする前に実行するタスクの指定も可能です。

launch.json

"compounds": [
        {
            "name": "exec AspNetCoreApp",
            "configurations": [
                "Launch MVC",
                "Launch API"
            ]
        }
    ]

"compounds": [

{

"name": "exec AspNetCoreApp",

"configurations": [

"Launch MVC",

"Launch API"

]

}

]

launch.json の属性の役割は、公式の Launch.json attributes を参照ください。

デバッグ

VSCode からデバッグします。“exec AspNetCoreApp” を選択して実行します。

WebMvc

WebApi

Postman で API に接続します。

より実践で役立つ「Visual Studio Code で TypeScript をデバッグ（using TypeScript babel webpack）」を ↓ で紹介しています。

雲の上はいつも晴れ

Visual Studio CodeでTypeScriptをデバッグ-using TypeScript babel webpack

https://book2525stack.com/2020/03/24/vscode-typescript-debug

オウルです。フロントで TypeScript を使うとなると当然デバッグしたい。console.log でデバッグなんて、時間がかかるし、コード追加しないといけないので嫌だ。TypeScript のデバッグは、作業効率においてかなり大事。そんな思いから、今回は TypeScript babel webpack を使う ASP.NET Core プロジェクトを準備して、Visual Studio Code（以降、VSCode）で、TypeScript をデバッグします。ローカル環境Client OSWindows10WSLUbuntu 18.04.2 LTSEditorVisual Studio CodeSDKASP.NET Core 3.1ASP.NET Core の Developing in WSL はこち...

Visual Studio Code + ASP.NET Core 複数プロジェクトをデバッグ

ローカル環境

複数プロジェクトをデバッグ

ソリューション作成

複数プロジェクト作成

プロジェクト作成

プロジェクトをソリューションファイルに追加

プロジェクト間参照を追加

VSCode 起動

デバッグ構成を自動追加

tasks.json

タスクの実行

シーケンシャルに実行

lanch.json

補足：デバッグ構成を自動追加メッセージを再表示

デバッグ構成

launch.json

複数デバッグ構成

デバッグ

WebMvc

WebApi

関連記事:

コメントを残すコメントをキャンセル

ローカル環境

複数プロジェクトをデバッグ

ソリューション作成

複数プロジェクト作成

プロジェクト作成

プロジェクトをソリューションファイルに追加

プロジェクト間参照を追加

VSCode 起動

デバッグ構成を自動追加

tasks.json

タスクの実行

シーケンシャルに実行

lanch.json

補足：デバッグ構成を自動追加メッセージを再表示

デバッグ構成

launch.json

複数デバッグ構成

デバッグ

WebMvc

WebApi

関連記事:

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル