ASP.NET Core と Vue.js を同梱して発行する方法

Angular, React はあるのに Vue がないので。

手順

• ASP.NET Core の API プロジェクトを作成
• ASP.NET Core のプロジェクトの下で vue create someproject のようにして Vue のプロジェクト作成
• Microsoft.AspNetCore.SpaServices.Extensions を ASP.NET Core のプロジェクトに追加
• ASP.NET Core のプロジェクトファイルを開いて以下のようにソリューションエクスプローラーへの表示や発行時に Vue のビルドと Vue のビルド成果物を含める構成を追加

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>netcoreapp3.1</TargetFramework>
    <SpaRoot>someproject\</SpaRoot> <!-- ここは SPA のプロジェクト名 -->
    <DefaultItemExcludes>$(DefaultItemExcludes);$(SpaRoot)node_modules\**</DefaultItemExcludes>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.SpaServices.Extensions" Version="3.1.4" />
  </ItemGroup>

  <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>

  <Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
    <!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build" />

    <!-- Include the newly-built files in the publish output -->
    <ItemGroup>
      <DistFiles Include="$(SpaRoot)dist\**" />
      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
        <RelativePath>%(DistFiles.Identity)</RelativePath>
        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
      </ResolvedFileToPublish>
    </ItemGroup>
  </Target>
</Project>

• Startup.cs の ConfigureServices と Configure に SPA 用の設定を追加

public void ConfigureServices(IServiceCollection services)
{
    services.AddControllers();

    services.AddSpaStaticFiles(options => options.RootPath = "someproject/dist"); // SPA のプロジェクト名/dist
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }

    app.UseHttpsRedirection();

    app.UseRouting();

    app.UseAuthorization();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
    });

    app.UseSpaStaticFiles();
    app.UseSpa(spa =>
    {
        spa.Options.SourcePath = "someproject"; // SPA のプロジェクト名
        if (env.IsDevelopment())
        {
            // npm run serve で走らせる開発サーバーの URL
            spa.UseProxyToSpaDevelopmentServer("http://localhost:8080");
        }
    });
}

動作確認

Vue のプロジェクトフォルダーで npm run serve をしてローカルの開発用サーバーを立ち上げます。そして ASP.NET Core のプロジェクトをデバッグ実行すると

Vue の画面が表示されます。8080 ポートじゃない点に注目

そして dotnet publis -c Release か Visual Studio のウィザードから発行したフォルダーにある exe を起動すると 5001 ポートで待ち受けするサーバーが起動します。

ブラウザーでアクセスしてみると、ちゃんと表示されました。