ASP.NET Core + React + Typescriptで認証付きWebアプリのひな型を作る①

3166 ワード

テキストリンク

はじめに

ASP.NET CoreとReactは、世界的にはポピュラーなフレームワークですが、組み合わせた場合の構築に関する情報が少ない(特に日本語)ことと、Visual Studioのテンプレートを使用するとTypeScriptが有効ではない、加えて認証時に一度認証用ページにリダイレクトされるなど、完全なSPAになっていない若干癖がある作りになっています。

今回、ゼロからいろいろな資料をたどってASP.NET Core + React + TypeScriptで認証機能付きWEBアプリケーションのひな型を作ったので、覚書として手順を残します。

サマリー

大まかな流れ(記事増やすすとともに随時更新)

ソリューション+サーバーサイド側のプロジェクトを作る
クライアント側のアプリを作る

環境

OS:Windows11
エディタ：VS Code
.NETバージョン：.NET5
Reactバージョン：18(17でも大差ない内容だと思います。自動生成に任せていたらv18が入っているので、実際にはv17準拠の内容になってしまっていると思います)

構築

1 ソリューションを作る

まずはソリューションを作ります。今回は、「react-dotnet-skeleton」という名前のソリューション名で作ります。初めに、任意の場所に「react-dotnet-skeleton」という名前のフォルダを作った後、そこに移動して以下のコマンドを実行すると、ソリューションが生成されます

> cd [作りたい場所]
> dotnet new sln

参考に画像を載せておくと今回は具体的には以下のようになります

以下のようにフォルダにソリューションが生成されます

2 サーバーサイド用のプロジェクトを作る

プロジェクト生成

次にサーバーサイド側のプロジェクトを作ります。
今回は、「webapi」のテンプレートを用いて、「server-app」という名称で、フレームワークのバージョンは5.0で作るので、以下のコマンドをソリューションが入っているフォルダで実行します

> dotnet new webapi -n server-app -f net5.0

実際にVS Codeで実施した際の動きは以下です。

生成が成功すると、以下のようにプロジェクトが生成されます。

ソリューションに追加

生成したプロジェクトをソリューションに追加します。こうすることで、Visual Studio(VS Codeではなく2019や2022等)でソリューションを開いたときにプロジェクト込みで開いたり、ソリューションフォルダで「dotnet build」コマンドを実行することで「server-app」のビルドも併せて実行などが行われるようになりなります。

> dotnet sln add server-app/server-app.csproj

実行して動作確認

生成したら、プロジェクトが格納されたフォルダに移動し、「dotnet run」又は「dotnet watch run」コマンドを実行することで、生成したプロジェクトを動かすことができます。

> cd server-app
> dotnet run

コマンドを入力してビルドが成功すると、自動的にブラウザが立ち上がります。

「/WeatherForecast」をURLに打ち込むことで、自動生成時にあらかじめ用意されているAPIを動かすことができます。

今回は以上です。次回はクライアントサイドを生成していきます。