ASP.NET Core 3.x + Vue.js で HelloWorld する方法

Ⅰ. はじめに

タイトルの通り「ASP.NET Core 3.x + Vue.js で HelloWorld する方法」です。

※2022/02/08追記
VS2022 Preview2でIDE公式機能としてサポートされました
https://docs.microsoft.com/en-us/visualstudio/javascript/tutorial-asp-net-core-with-vue

「やり方1」と「やり方2」の違い

「やり方1」は Vue.js のサーバを手動で起動します。
「やり方2」は Vue.js のサーバを自動で起動します。

個人的には 「やり方1」を推奨します。

やり方1 のメリット

• Vue.js と ASP.NET Core のコンソールを別々に表示できる。ファイル保存時等リアルタイムにコンソールで ESLint の出力を確認したい場合等に使える。
• Vue.js のビルド処理を挟まないので ASP.NET Core の起動が速い

やり方1 のデメリット

• 特になし

やり方2 のメリット

• 特になし

やり方2 のデメリット

• Vue.js のログと ASP.NET Core のログが1つのコンソールで表示されるので見づらい。
• ASP.NET Core のコードを修正した時、Vue.js のビルド処理が入るので再起動に10秒ほど時間がかかる。細かい修正を連続して行う場合ストレスを感じる場合がある。

Ⅱ. 前提条件

以下3点がインストールされている事

• Visual Studio
• npm
• Vue CLI

Ⅲ. やり方1

1. ASP.NET Core の新規プロジェクトを作成する

2. Vue の新規プロジェクトを作成する

cd "プロジェクトディレクトリ"
vue create client_app

3. ファイルを修正する

client_app/package.json
以下を追加する

{
  "scripts": {
    "watch": "vue-cli-service build --watch"
  }
}

MyProjectName.csproj
以下全てコピペする

<Project Sdk="Microsoft.NET.Sdk.Web">
  <PropertyGroup>
    <TargetFramework>netcoreapp3.1</TargetFramework>

    <SpaRoot>client_app\</SpaRoot>
  </PropertyGroup>

  <ItemGroup>
    <!-- $(SpaRoot)\* をビルド時に出力しない -->
    <Content Remove="$(SpaRoot)**" />
  </ItemGroup>

  <!-- dotnet publish 実行時に以下を実行する -->
  <Target Name="RunWebpack" AfterTargets="ComputeFilesToPublish">
    <!-- 本番環境用ビルド "npm run build" を実行する-->
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build" />

    <ItemGroup>
      <!-- $(SpaRoot)dist\* を publish にコピーする -->
      <DistFiles Include="$(SpaRoot)dist\**" />
      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
        <RelativePath>%(DistFiles.Identity)</RelativePath>
        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
      </ResolvedFileToPublish>
    </ItemGroup>
  </Target>
</Project>

4. 必要なパッケージをNuGetからインストールする

Install-Package Microsoft.AspNetCore.SpaServices.Extensions

5. プログラムを修正する

Startup.cs

public void ConfigureServices(IServiceCollection services)
{
  // 追加
  services.AddSpaStaticFiles(x => { x.RootPath = "client_app/dist"; });
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
  // 追加
  app.UseSpaStaticFiles();
  app.UseSpa(spa => { spa.Options.SourcePath = "client_app"; });
}

6. 実行する

dotnet watch run
cd client_app
npm run watch

# リリース時
# set NODE_ENV=production
# dotnet run -c Release

実行結果

Ⅳ. やり方2

1. ASP.NET Core の新規プロジェクトを作成する

2. Vue の新規プロジェクトを作成する

cd "プロジェクトディレクトリ"
vue create client_app

3. プロジェクトファイルを修正する

MyProjectName.csproj
以下全てコピペする

<Project Sdk="Microsoft.NET.Sdk.Web">
  <PropertyGroup>
    <TargetFramework>netcoreapp3.1</TargetFramework>

    <SpaRoot>client_app\</SpaRoot>
  </PropertyGroup>

  <ItemGroup>
    <!-- $(SpaRoot)\* をビルド時に出力しない -->
    <Content Remove="$(SpaRoot)**" />
  </ItemGroup>

  <!-- dotnet publish 実行時に以下を実行する -->
  <Target Name="RunWebpack" AfterTargets="ComputeFilesToPublish">
    <!-- 本番環境用ビルド "npm run build" を実行する-->
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build" />

    <ItemGroup>
      <!-- $(SpaRoot)dist\* を publish にコピーする -->
      <DistFiles Include="$(SpaRoot)dist\**" />
      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
        <RelativePath>%(DistFiles.Identity)</RelativePath>
        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
      </ResolvedFileToPublish>
    </ItemGroup>
  </Target>
</Project>

4. 必要なパッケージをNuGetからインストールする

Install-Package Microsoft.AspNetCore.SpaServices.Extensions
Install-Package Nyami.AspNetCore.VueCliServices

5. プログラムを修正する

Startup.cs

public void ConfigureServices(IServiceCollection services)
{
  // 追加
  services.AddSpaStaticFiles(x => { x.RootPath = "client_app/dist"; });
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
  // 追加
  app.UseSpaStaticFiles();
  app.UseSpa(spa =>
  {
    spa.Options.SourcePath = "client_app";
    if (env.IsDevelopment())
    {
      spa.UseVueCliServer("serve");
    }
  });
}

6. 実行する

dotnet watch run

# リリース時
# set NODE_ENV=production
# dotnet run -c Release

実行結果

参考

• https://www.nyami.uk/posts/2019-05-21-VueWithAspNetPart2
• https://github.com/Nyami/AspNetCore.VueCliServices