APIをASP.NET Coreで画面をReactで作成する

.Net
2023.11.23

はじめに

今回は私はWeb管理ツールを作成する際の構成として、ASP.Net CoreとNode.js(React)を選択しました。
.NetにもSPAを作成する方法は用意されていますが、ReactなどのSPAライブラリの方がシェア率は高く、オープンソースで安心して利用できるので、画面はReact、APIは得意なC#で、フレームワークは実績のあるASP.Net Coreという構成を選択しました。

開発環境
・.Net6
・VisualStudio2022 17.8

※MSの記事を参考にしています
ASP.NET Core で React を使用する

テンプレートの選択

VisualStudioのテンプレートにいくつかReactのテンプレートが存在しますが、構成がReactとASP.NET Coreのプロジェクトが分かれてしまいます。

↓※今回は使用しないVisual Studioのテンプレート

↓ReactとASP.NET Coreプロジェクトが分かれてしまう

パッケージングの際に2つを1つのEXEとして扱いたいので、今回はdotnetコマンドに用意されているテンプレートを使います。

CMDから以下のコマンドを入力します。

dotnet new react -o プロジェクト名

コマンドにより作成されたプロジェクトではASP.NET Coreプロジェクトの中にClientAppフォルダ(Nodejs用)があります。

状態を検証

ビルドボタンを押してWebページが起動するか確認していきます。

こんな画面が出れば成功です。
ただ私の場合は初回のアクセス時にSSL証明書がうまく設定されず、アクセスエラーになりました。2回目起動してみると成功しました。おそらく今回使用したテンプレートが、初回起動時に証明書の作成&設定をするように組まれているので、その辺のバグだと思います。

もし何回試してもアクセスできない場合は「.env.development.local」ファイルができていることと、ファイルの内容に以下の記載があることを確認してみてください。

SSL_CRT_FILE=C:\Users\ユーザー名\AppData\Roaming\ASP.NET\https\react_test.pem
SSL_KEY_FILE=C:\Users\ユーザー名\AppData\Roaming\ASP.NET\https\react_test.key

もしなければ自分で追加してみて実行してみると動作すると思います。
この辺は「aspnetcore-https.js」、「aspnetcore-react.js」に処理が書いてあるので、上記でも解決しない場合は、ログを仕込んで証明書のパスなどを確認してみてください。

画面を操作してみてFetch dataで天気が確認できればAPIの呼び出しも確認完了です。

起動の速度改善

Visual Studioのデバッグ起動をすると、先にプロキシサーバー経由でNode.jsが起動する特性上、起動が低速です。ASP.NET Coreだけを再起動したくても、Node.jsまで再起動がかかってしまいます。
そこで開発にはASP.NET CoreとNode.jsは別々に起動しておくのがおすすめです。

やり方はまず最初にNode.jsをCMDやVisualStudio Code経由で起動しておきます。

cd ClientApp
npm start

次に今までと同じようにVisual Studioでデバッグ実行するだけです。
※この時「.env.development」で指定しているPortと、VisualStudioのcsprojファイルに記載してある<SpaProxyServerUrl>のPortを一致させておいてください。

ブラウザが起動すると思いますが、先ほどに比べて起動速度が高速になります。
これであれば、APIと画面の開発がそれぞれやりやすくなると思います。

もし上記の設定でAPI呼び出しがうまくいかない場合は、ASP.NET CoreのURLとsetupProxy.csファイルのtarget変数に入るURLが一致しているか確認してみてください。個別でNode.jsを起動した場合は環境変数が設定されないため、target変数に入る値が変わり、プロキシがうまくいっていない可能性があります。

発行

発行手順は他のVisual Studioプロジェクトと変わりありません。
VisualStudio上でプロジェクトを右クリック>発行。発行先にフォルダを選択して、発行ボタンを押します。

発行されたexeを起動して、ブラウザでhttps://localhost:5000にアクセスすると画面にアクセスできます。

発行されたアプリはデバッグ起動と違い、起動速度は高速です。
もしPortを変える場合は、appsettings.jsonにKestrelの設定を記入してください。

{
    "Logging": {
        "LogLevel": {
            "Default": "Information",
            "Microsoft": "Warning",
            "Microsoft.AspNetCore.SpaProxy": "Information",
            "Microsoft.Hosting.Lifetime": "Information"
        }
    },
    "AllowedHosts": "*",
    "Kestrel": {
        "Endpoints": {
            "Http": {
                "Url": "http://localhost:1234"
            }
        }
    }
}

SSLを無効にしてHTTP通信に切り替える

管理ツールなど内部向けツールの場合は、証明書が不要になる場合もあると思います。
その場合は「.env.development」を書き換えます

HTTPS=false

次にVisualStudioのcsprojファイルに記載してある<SpaProxyServerUrl>のhttpsをhttpに書き換えます。

以上で、http通信が機能するようになります。

最後に

Visual StudioではTypescript周りのサポートが薄く、開発がしずらいので、画面の開発はVisualStudio Codeをお勧めします。
時代的に.Net開発者にもWebの開発知見が求められる機会が増えてきたと思います。あえてMSのサポートよりオープンソースを選択するようにしないとなぁと感じています。
記事で使用したソースコードはgithubにアップしてあります。

タイトルとURLをコピーしました