ASP.NET ソース変更時にクライアントサーバーを再起動させない方法

ASP.NETでdotnet watch runでソースを監視し、ソース変更時にクライアントサーバーを再起動させない方法を紹介します。

以下のようにクライアントの開発サーバーと連携していると、dotnet watch runでソースを監視時、ソース変更後に毎回クライアント側のサーバーが再起動されます。（毎回npm run startやnpm run serveが走る）

Startup.cs

// Configureファンクション
            
    app.UseSpa(spa =>
    {
        spa.Options.SourcePath = "ClientApp";
        
        if (env.IsDevelopment())
        {
            spa.UseReactDevelopmentServer(npmScript: "start"); // reactの場合
            spa.UseVueCli(npmScript: "serve"); // vueの場合
        }
    });

対処法

以下のようにreactやvueの設定の代わりにプロキシサーバの設定を追記します。

ポートはraectやvueの開発サーバーのポートに合わせてください。

Startup.cs

// Configureファンクション
            
    app.UseSpa(spa =>
    {
        spa.Options.SourcePath = "ClientApp";
        
        if (env.IsDevelopment())
        {
            spa.UseReactDevelopmentServer(npmScript: "start"); // reactの設定
            spa.UseVueCli(npmScript: "serve"); // vueの設定
            spa.UseProxyToSpaDevelopmentServer("http://localhost:8080");
        }
    });

このようにすると、クライアント側の開発サーバーは手動で起動する必要がありますが、サーバー側のソースを変更するたびに毎回クライアント側のサーバーが再起動するのを防ぐことができます。

Hot Module Replacement(hmr)も同じように有効になっているため、クライアント側の開発も今までどおり行えます。

２つのサーバーを同時に起動する

上記のデメリットとして、２つの開発サーバーを個別に起動する必要があります。

対策として、vscodeのタスク機能を使って１つのコマンドで２つのサーバーを同時に起動できるようにします。

下準備として、F5でデバッグ実行をします。

初回起動時は以下のダイアログが表示されるので、.NET Coreを選択してください。

そうするとプロジェクトフォルダの直下に以下のフォルダが作成されていると思います。

プロジェクト
- .vscode
  - launch.json
  - task.json

task.jsonにクライアント側のタスクを追記します。

client startはreactやvueの開発サーバーを起動するタスクで、client start & dotnet watchはASP.NET Coreのwatchのタスクとクライアントサーバー起動のタスクを両方実行するタスクです。

task.json

// 一部抜粋
    {
        "label": "watch",
        "command": "dotnet",
        "type": "process",
        "args": [
            "watch",
            "run",
            "${workspaceFolder}/code.csproj",
            "/property:GenerateFullPaths=true",
            "/consoleloggerparameters:NoSummary"
        ],
        "problemMatcher": "$msCompile"
    },
    {
        "label": "client start",
        "options": {
            "cwd": "${workspaceFolder}/ClientApp"
        },
        "type": "npm",
        "script": "start" // reactの場合
        "script": "serve" // vueの場合
    },
    {
        "label": "client start & dotnet watch",
        "dependsOrder": "parallel",
        "dependsOn": [
            "client start",
            "watch"
        ]
    }

Ctrl+Shift+pでコマンドパレットを起動し、Tasks: Run Taskを選択し、client start & dotnet watchを選択すると、両方の開発サーバーが起動されることを確認できます。