zukucode
主にWEB関連の情報を技術メモとして発信しています。
ASP.NET

ASP.NET Core + Reactのプロジェクトを作成する

ASP.NET Core + Reactの開発環境をDockerで作成するで作成したDockerの開発環境に、ASP.NET Core(.NET6) + Reactのプロジェクトを作成します。

現状は、以下の構成になっています。

  • .devcontainer
    • .devcontainer.json
  • docker
    • app
      • Dockerfile
  • docker-compose.yml

VSCodeでこのコンテナを開き、ctrl+@でコンソールを表示します。

以下のコマンドで、ASP.NET Core + Reactを作成します。

$ dotnet new react -o App.Web

dotnet new テンプレート名 -o 出力フォルダ名の形式で指定します。

出力フォルダ名はそのままプロジェクト名になりますので、適宜変更してください。

最終的には以下の４階層のプロジェクトを作成し、ソリューションで管理する予定です。

  • App.Application
  • App.Domain
  • App.Infrastructure
  • App.Web

Appはソリューション名（システム名）として、すべてのプロジェクトの先頭に記載し、その後ろにWebなどの各プロジェクト名を記載しています。

コマンドを実行すると、App.Webのフォルダが作成されます。

バックエンドはASP.NET COre、フロントエンドはReactの構成でプロジェクトが作成されます。

ClientAppというフォルダがReactのプロジェクトになります。

プロジェクトを実行する

コンソールで、カレントディレクトリをApp.Webに移動し、dotnet runのコマンドを実行します。

$ cd App.Web #カレントディレクトリの移動
$ dotnet run

初回のみ、Reactのプロジェクトでnode_modulesをインストールする処理が行われるため、少し時間がかかりますが、ASP.NET COreとReactの両方のプロジェクトが実行されます。

VSCodeの右下に「ポート XXXX で実行されているアプリケーションは使用可能です。」というダイアログが表示されるので、「ブラウザで開く」ボタンをクリックします。

httpsのセキュリティの警告ページが表示される場合がありますが、無視してそのまま表示します。

動作確認

ブラウザで開くと、Hellow, worldのページが表示されることを確認できます。

右上のFeatch Dataのリンクをクリックすると、データが表形式で一覧表示されます。

このデータはASP.NET COreで自動作成されたAPIからデータを取得して、表示しています。

CORSやプロキシなどの設定は、ひな形のテンプレートで設定されているため、特に気にすることなく、バックエンドとフロントエンドでデータのやり取りが可能になります。

ASP.NET

関連記事