チュートリアル: Visual Studio での React を使用した ASP.NET Core アプリの作成

  • [アーティクル]

この記事では、API バックエンドとして機能する ASP.NET Core プロジェクトと、UI として機能する React プロジェクトを作成する方法について説明します。

現在、Visual Studio には Angular と React をサポートする ASP.NET Core シングルページ アプリケーション (SPA) テンプレートが含まれています。 テンプレートには、各フレームワークの基本ファイルとフォルダーを含む ASP.NET Core プロジェクトに、組み込みのクライアント アプリ フォルダーが用意されています。

この記事で説明されている方法を使用すると、次のような ASP.NET Core シングル ページ アプリケーションを作成できます。

  • クライアント アプリを ASP.NET Core プロジェクトの外部の別のプロジェクトに置く
  • コンピューターにインストールされているフレームワーク CLI に基づいてクライアント プロジェクトを作成する

Note

この記事では、Vite CLI を使用する Visual Studio 2022 バージョン 17.8 の更新済みテンプレートを使用したプロジェクト作成プロセスについて説明します。

前提条件

  • Visual Studio 2022 バージョン 17.8 以降と、ASP.NET および Web 開発ワークロードがインストールされていること。 Visual Studio のダウンロード ページに移動し、無料試用版をインストールしてください。 ワークロードをインストールする必要があり、既に Visual Studio がある場合は、 [ツール]>[ツールと機能を取得] の順に移動すると、Visual Studio インストーラーが開きます。 [ASP.NET と Web 開発] ワークロードを選択してから [変更] を選択します。
  • Node.js に付属の npm (https://www.npmjs.com/)
  • npx (https://www.npmjs.com/package/npx)

フロントエンド アプリを作成する

  1. [開始] ウィンドウで、 [新しいプロジェクトの作成] を選択します。

    Screenshot showing Create a new project.

  2. 上部の検索バーで React を検索し、[React および ASP.NET Core (プレビュー)] を選択します。 このテンプレートは、JavaScript テンプレートです。

    Screenshot showing choosing a template.

  3. プロジェクトに「ReactWithASP」という名前を付けて、[作成] を選択します。

    ソリューション エクスプローラーには、次のプロジェクト情報が表示されます。

    Screenshot showing Solution Explorer.

    スタンドアロン React テンプレートと比較して、ASP.NET Core との統合用の新しいファイルと変更されたファイルがいくつか表示されます。

    • vite.config.js
    • App.js (変更済み)
    • App.test.js (変更済み)

  4. [デバッグ] ツール バーからインストールされているブラウザー (Chrome や Microsoft Edge など) を選択します。

    必要なブラウザーがまだインストールされていない場合は、まずブラウザーをインストールしてから選択します。

プロジェクトのプロパティを設定する

  1. ソリューション エクスプローラーで、ReactWithASP.Server プロジェクトを右クリックし、[プロパティ] を選択します。

    Screenshot showing Open project properties.

  2. [プロパティ] ページで、[デバッグ] タブを開き、[デバッグ起動プロファイル UI を開く] オプションを選択します。 ASP.NET Core プロジェクト (または、存在する場合は https) にちなんで名前が付けられたプロファイルの [ブラウザーの起動] オプションのチェックをオフにします。

    Screenshot showing Debug launch profiles UI.

    この値により、ソース気象データを含む Web ページが開かなくなります。

    Note

    Visual Studio では、launch.json に、[デバッグ] ツール バーの [スタート] ボタンに関連付けられたスタートアップ設定が格納されます。 現時点で、launch.json は .vscode フォルダーの下に配置する必要があります。

プロジェクトを開始する

F5 キーを押すか、ウィンドウの上部にある [開始] ボタンを選択して、アプリを起動します。 次の 2 つのコマンド プロンプトが表示されます。

  • 実行中の ASP.NET Core API プロジェクト

  • VITE v4.4.9 ready in 780 ms などのメッセージを示す Vite CLI

    Note

    コンソール出力にメッセージがないかどうかを確認します。 たとえば、Node.js を更新するメッセージが表示される場合があります。

React アプリが表示され、API を介して設定されます。 アプリが表示されない場合は、「トラブルシューティング」を参照してください。

プロジェクトの発行

  1. ソリューション エクスプローラーで ReactWithASP.Server プロジェクトを右クリックし、[追加]>[プロジェクト参照] の順に選択します。

    reactwithasp.client プロジェクトが選択されていることを確認します。

  2. OK を選択します。

  3. ASP.NET Core プロジェクトを再び右クリックし、[プロジェクト ファイルの編集] を選択してください。

    これにより、プロジェクトの .csproj ファイルが開きます。

  4. .csproj ファイルで、値が false に設定されている <ReferenceOutputAssembly> 要素がプロジェクト参照に含まれることを確認します。

    この参照は次のようになります。

     <ProjectReference Include="..\reactwithasp.client\reactwithasp.client.esproj">
   <ReferenceOutputAssembly>false</ReferenceOutputAssembly>
 </ProjectReference>

  5. ASP.NET Core プロジェクトを右クリックし、[プロジェクトの再読み込み] を選択します (このオプションを使用できる場合)。

  6. Program.cs で、次のコードが存在することを確認します。

    app.UseDefaultFiles();
app.UseStaticFiles();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
   app.UseSwagger();
   app.UseSwaggerUI();
}

  7. 発行するには、ASP.NET Core プロジェクトを右クリックし、[発行] を選択し、目的の発行シナリオに一致するオプション (Azure、フォルダーへの発行など) を選択します。

    発行プロセスは、発行時に npm run build コマンドが呼び出されるため、単なる ASP.NET Core プロジェクトの場合よりも時間がかかります。 BuildCommand では npm run build が既定で実行されます。

トラブルシューティング

プロキシ エラー

次のエラーがに表示される場合があります。

[HPM] Error occurred while trying to proxy request /weatherforecast from localhost:4200 to https://localhost:7183 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)

この問題が発生した場合は、バックエンドより前にフロントエンドが開始された可能性があります。 バックエンドのコマンド プロンプトが起動したことが表示されたら、ブラウザーで React アプリを更新してください。

ポートを確認する

気象データが正しく読み込まれない場合は、ポートが正しいことを確認する必要もあります。

  1. ポート番号が一致していることを確認します。 ASP.NET Core ReactWithASP.Server プロジェクト (Properties フォルダー内) の launchSettings.json ファイルに移動します。 applicationUrl プロパティからポート番号を取得します。

    複数の applicationUrl プロパティがある場合は、https エンドポイントを使用するものを探します。 それは、https://localhost:7183 のように表示されます。

  2. React プロジェクトの vite.config.js ファイルを開いてください。 launchSettings.json の applicationUrl プロパティと一致するように target プロパティを更新します。 更新された値は次のようになります。

    target: 'https://localhost:7183/',

プライバシー エラー

次の証明書エラーが表示される場合があります:

Your connection isn't private

%appdata%\local\asp.net\https または %appdata%\roaming\asp.net\https から React 証明書を削除してから、再試行してください。

次のステップ

ASP.NET Core での SPA アプリケーションについて詳しくは、「シングル ページ アプリの開発」の React に関するセクションを参照してください。 リンクされた記事では、aspnetcore-https.js などのプロジェクト ファイルに関する追加のコンテキストが提供されますが、実装の詳細はテンプレートの違いによって異なります。 たとえば、React ファイルは、ClientApp フォルダーではなく、別のプロジェクトに含まれます。

クライアント プロジェクトに固有の MSBuild 情報については、JSPS の MSBuild プロパティを参照してください。