Web 開発

ASP.NET CoreとReactで作るアプリ開発時の起動と再起動を高速化する

投稿日:

前置き

みなさんお久しぶりです!グッチです!

恥ずかしながら、先日、ベッドから転落して棚の角に背中を強打してしまいました。

未だに背中が痛いので、骨にヒビが入ったかもしれない気がしなくもないんですが、それはおいといて、、

今日はタイトルにある通り、

「ASP.NET CoreとReactで作るアプリ開発時の起動と再起動を高速化する」

方法を紹介していきたいと思います!

通常、ASP.NET Coreのアプリが起動したときは、Reactの開発サーバーの独自のインスタンスをバックグラウンドで開始するように構成されています。

これのおかげで手動でnpm startとかやらなくても勝手に起動してくれてとても便利なのですが、1つ大きな欠点があります。

例えば、C#のコードを変更するときです。

C#のコードを変更して、ASP.NET Coreのアプリを再起動する必要がある場合、Reactの開発サーバーも毎回再起動されます。

再起動には結構時間がかかります。TypeScriptとか使ってるとなおのこと時間がかかります。

最初はそれでもよかったのですが、tsxファイルが増えていくにつれて再起動にかかる時間がどんどん伸びていって、

C#のコードをちょっと変更しただけなのに、再起動に時間がかかりすぎて割とストレスで、手の震えが止まりませんでした(嘘です)

なので、C#のコードを変更しただけなんだから、Reactの開発サーバーの再起動まで待ってらんないよーという人たちのために役立つ方法を今回はご紹介します。

 

STEP1

 

まずは、VisualStudioで、対象のソリューションを開きます。

プロジェクトを右クリックして、プロパティを選択します。

プロパティのデバッグを選択して、ブラウザーの起動のチェックを外します。

 

STEP2

 

次は、Startup.csを開きます。

Configureメソッドの

spa.UseReactDevelopmentServer(npmScript: “start”);

の部分を以下のように置き換えます。

ポート番号3000を指定しているのは、Reactの開発サーバーのデフォルトポート番号だからです。

 

STEP3

 

驚くことに、準備はこれだけでOKです!

デバッグ開始してみると、ブラウザが開かれず、高速で起動することが確認できたのではないでしょうか?

Reactの開発サーバーを立ち上げたい時は、ディレクトリをClientAppに移動して、コマンドでnpm startを入力してやればOKです。

 

まとめ

 

うまくできたでしょうか?

この状態に後はSwaggerを使えるように設定してあげれば、APIの開発速度が爆速にあがります。手の震えもとまります。

弊社で開発しているプロダクトもこの方法を利用しています。

起動を高速化したいっていう人はぜひお試ししてみてはいかがでしょうか!

ではまた来月お会いしましょう(@^^)/~~~

 


-Web, 開発