ASP.NET Core with Vite プロジェクトの構成⚓︎

ASP.NET Core with Vite プロジェクトには、フロントエンドのアプリケーションとの連携に関する設定をします。

ASP.NET Core Web API の設定⚓︎

ASP.NET Core with Vite プロジェクトは、 ASP.NET Core Web API プロジェクトと同じ Web API 向け構成を組みこみます。 ASP.NET Core Web API プロジェクトの構成 を参照し、設定してください。

フロントエンドアプリケーションの配置変更⚓︎

フロントエンドアプリケーションのフォルダーをプロジェクト内から移動または削除する⚓︎

Vue.js などの JavaScript フレームワークを用いたフロントエンドアプリケーションは、バックエンドアプリケーションと階層構造の異なる場所に配置することを推奨します。 ASP.NET Core with Vite プロジェクトを作成すると、プロジェクトルートにフロントエンドアプリケーションを配置するための [ClientApp] フォルダーが生成されます。 このフォルダーを [backend] フォルダーと同じ階層に移動し、 [frontend] にフォルダー名を変更します¹。

以降、図のような階層となっていることを前提に、設定値を変更します。 フォルダー名や階層構造が異なる場合は、適宜読み替えてください。

フロントエンドアプリケーションの配置設定⚓︎

ASP.NET Core with Vite プロジェクトを実行したとき、適切なフロントエンドアプリケーションが実行できるように、プロジェクトファイルの設定値を変更します。

ASP.NET Core with Vite プロジェクトのプロジェクトファイルを開き、 <SpaRoot> プロパティの値を変更します。 上記の例のような配置の場合、 [AaaSubSystem.Web.csproj] から、フロントエンドアプリケーションを配置したルートフォルダー [frontend] に対する相対パスを設定します。 続けて、<SpaRootWorkspace> プロパティを追加し、プロジェクトフォルダー [workspace-name] に対する相対パスを設定します。

1
2

<SpaRoot>..\..\..\frontend\</SpaRoot>
<SpaWorkspace>$(SpaRoot)workspace-name\</SpaWorkspace>

フロントエンドアプリケーションの参照削除⚓︎

上記のフォルダー移動と設定変更を行うと、 ASP.NET Core with Vite プロジェクトにフロントエンドアプリケーションへの参照設定を残す必要がなくなります。 プロジェクトファイル内の以下の設定を削除します。

1
2
3
4
5
6

<ItemGroup>
    <!-- Don't publish the SPA source files, but do show them in the project files list -->
    <Content Remove="$(SpaRoot)**" />
    <None Remove="$(SpaRoot)**" />
    <None Include="$(SpaRoot)**" Exclude="$(SpaRoot)node_modules\**" />
</ItemGroup>

フロントエンドアプリケーションの起動設定⚓︎

ASP.NET Core with Vite プロジェクトのプロジェクトファイルには、フロントエンドアプリケーションを実行するためのコマンドを設定できます。 この設定は、 Visual Studio で ASP.NET Core with Vite プロジェクトを実行したとき、 Web サーバーの起動完了後に自動実行されます。 これにより、 SPA の実行を Visual Studio の操作のみで行うことができます。

既定では、 npm start コマンドが設定されています。 フロントエンドアプリケーションの実装にあわせて、起動コマンドを設定してください。 設定箇所は ASP.NET Core with Vite プロジェクトのプロジェクトファイル内、 <SpaProxyLaunchCommand> プロパティです。

1

<SpaProxyLaunchCommand>npm run dev:workspace-name</SpaProxyLaunchCommand>