zukucode
主にWEB関連の情報を技術メモとして発信しています。

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

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

以下のようにクライアントの開発サーバーと連携していると、dotnet watch runでソースを監視時、ソース変更後に毎回クライアント側のサーバーが再起動されます。(毎回npm run startnpm 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の場合
        }
    });

対処法

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

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

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)も同じように有効になっているため、クライアント側の開発も今までどおり行えます。

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

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

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

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

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

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

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

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

client startreactvueの開発サーバーを起動するタスクで、client start & dotnet watchASP.NET Corewatchのタスクとクライアントサーバー起動のタスクを両方実行するタスクです。

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を選択すると、両方の開発サーバーが起動されることを確認できます。



関連記事