ASP.NET Core + React dotnet watchの再起動時にReactのプロジェクトを再起動させない方法
ASP.NET Core dotnet watch runでソースコードを保存時に自動で反映するで、dotnet watch runでhot reloadができるようになりましたが、プログラムが再起動時に、Reactのプロジェクトも再起動してしまいます。
最初は気にならないかもしれませんが、規模が大きくなるにつれて、Reactの起動時間が長くなり、待ち時間が発生してしまいます。
再起動にReactのプロジェクトを再起動させない方法を紹介します。
手順
フロントエンド(React)のプロジェクトをあらかじめ起動しておきます。
ASP.NET Coreで自動で作成したReactのプロジェクトはcreate-react-appで作成したプロジェクトとほぼ同じなので、npm startのコマンドで起動できます。
$ cd App.Web\ClientApp # Reactプロジェクトのフォルダに移動
$ npm startReactのプロジェクトを起動した状態でバックエンド（ASP.NET COre）のプロジェクトをdotnet watch runで起動します。
このようにしておくと、ASP.NET Coreのプロジェクトが再起動した場合でも、Reactのプロジェクトは再起動しなくなります。
エラーになる場合
上記の方法で起動したとき、Featch Dataのページで504 Gateway Timeoutのエラーが発生して、データの取得ができない場合があります。
対処法として、Reactプロジェクトにある.env.developmentを修正します。
ASPNETCORE_HTTPS_PORTを追加します。
.env.developmentPORT=44491
HTTPS=true
ASPNETCORE_HTTPS_PORT=7041上記の例では、ポート番号は7041と記載していますが、実際はASP.NET CoreのプロジェクトのProperties\launchSetting.jsonファイルのapplicationUrlに設定されているURLのポート番号と同じ値にします。
launchSettings.json "profiles": {
"App.Web": {
"commandName": "Project",
"launchBrowser": true,
"applicationUrl": "https://localhost:7041;http://localhost:5105",
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development",
"ASPNETCORE_HOSTINGSTARTUPASSEMBLIES": "Microsoft.AspNetCore.SpaProxy"
}
},設定後、ASP.NET CoreとReactの両方のプロジェクトを再起動すると、正しくデータが取得できます。