Visual Studio のビルド待ちが長いから バックエンドと フロントエンドを分離した

TL;DR

プロジェクトが肥大化したので、ビルド待ちが長すぎて辛くなってきた。 ASP.NETCOREのコンパイルはすぐ終わるので　フロントエンドのコンパイル待ちはつらいから分離した

開発環境

バックエンド　ASP.NET core 2.2(C#) フロントエンド　node.js react

課題

build debug 開始できるまでの時間が長い

再現手順

ASP.NET core MVC は　VisualStuio でDebug モードで起動すると IIS express server が立ち上がります

自動的にブラウザが立ち上がる仕組みになっています。

フロントエンドが肥大化するにつれ　node.js + react + typescript の起動が遅くなっている問題がありました。

C#側のデバッグを開始するにしても、フロントエンドの起動に時間を引っ張られるので、 分離を行いました。

課題解決方法

① C#側のコードを　spa.UseProxyToSpaDevelopmentServer を使って着信応急をSPAサーバーの転送する

ASP.NET Core で React プロジェクト テンプレートを使用する | Microsoft Docsdocs.microsoft.com

② node.js側の設定で　pakage.jsonに　 開発側のアドレス　例：port 8080 プロパティ

 "proxy": "http://localhost:8080",

を追加する

採用

今回は①を採用しました startup.csの最後あたりに

// コメントアウト
// spa.UseReactDevelopmentServer(npmScript: "start");
spa.UseProxyToSpaDevelopmentServer("http://localhost:3000");

を書き換える　（例：SPAサーバーが　"http://localhost:3000"　とする。）

これで　フロントエンド　VisualStudioの　デバッグモードでは　バックエンドに分離できます。

フロントエンドと連結する際は　ClientApp 以下で　npm start コマンドを打って

ブラウザが立ち上がったら、URLのポートを手打ちで8080に設定すればOKです。

残った課題

Visual Studio 2017 .netcore dev立ち上げ時にSwaggerのページを表示したいのだが Webappのプロパティの変更から　立ち上げ時にswagger ページを指定しようとすると　うまくいかず泥沼にはまりました

家のvisual studio 2019で再挑戦します休み中に