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

オウルです。

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

Developing in 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 に接続します。コマンドプロンプトを起動して wsl と入力後 Enter します。

ソリューション作成

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

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

複数プロジェクト作成

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

プロジェクト作成

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

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

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

VSCode 起動

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

デバッグ構成を自動追加

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

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

WebMvc を選択します。

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

tasks.json

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

タスクの実行

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

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

シーケンシャルに実行

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

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

lanch.json

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

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

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

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

デバッグ構成

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

launch.json

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

複数デバッグ構成

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

launch.json

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

デバッグ

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

WebMvc

WebApi

Postman で API に接続します。

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA