ASP.NET CoreでVueを使ってSPAのプロジェクトを作成する

はじめに

今回は、ASP.NET CoreでVueを使ってSPAを作成する。
Microsoftにチュートリアルがあるので、これに沿って構築をしてみる。

https://learn.microsoft.com/ja-jp/visualstudio/javascript/tutorial-asp-net-core-with-vue?view=vs-2022&viewFallbackFrom=aspnetcore-8.0

環境

Windows 11 Professional
Visual Studio 2022 Community
ASP.NET Core 8.0

構築

1. Visual Studio を起動する

2. 「新しいプロジェクトの作成」を選択する

3. 検索バーで「Vue」と検索し、「Vue and ASP.NET Core」を選択して、「次へ」

※2つ「Vue and ASP.NET Core」があるが、今回はTypeScriptの方を選択する。

4. 「ソリューション名」を入力し、「次へ」

5. 「追加情報」にてnpmのインストールが必要な旨の注意書きが表示されるので、npmをインストールする

今回は、nodist を入れることにした。
https://github.com/nodists/nodist

6. nodistを入れて、再度1~4を実施すると、「追加情報」の表示が変わることを確認する

ここは、デフォルトのままで「作成」を選択する。

7. プロジェクトの作成後、ソリューションエクスプローラーを確認する

プロジェクトの修正

1. ソリューションエクスプローラーで [VueSampleApplication.Server] を右クリックし、[プロパティ] を選択する

2. 「デバッグ」→「全般」から「デバッグ起動プロファイル UI を開く」オプションを選択

3. 「https」 →[ブラウザーの起動] オプションのチェックをオフにする

プロジェクトの開始

1. 「デバッグ」→「デバッグ開始」をする

2. 起動すると下記のエラーとなった

> vuesampleapplication.client@0.0.0 dev
> vite

There was an error exporting the HTTPS developer certificate to a file.
failed to load config from C:\Users\XXXX\source\repos\VueSampleApplication\vuesampleapplication.client\vite.config.ts
error when starting dev server:
Error: Could not create certificate.
    at file:///C:/Users/XXXX/source/repos/VueSampleApplication/vuesampleapplication.client/vite.config.ts.timestamp-1730526698133-010552f01672d.mjs:24:11
    at ModuleJob.run (node:internal/modules/esm/module_job:218:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:329:24)
    at async loadConfigFromBundledFile (file:///C:/Users/XXXX/source/repos/VueSampleApplication/vuesampleapplication.client/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:66691:15)
    at async loadConfigFromFile (file:///C:/Users/XXXX/source/repos/VueSampleApplication/vuesampleapplication.client/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:66532:24)
    at async resolveConfig (file:///C:/Users/XXXX/source/repos/VueSampleApplication/vuesampleapplication.client/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:66140:24)
    at async _createServer (file:///C:/Users/XXXX/source/repos/VueSampleApplication/vuesampleapplication.client/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:62758:18)
    at async CAC.<anonymous> (file:///C:/Users/XXXX/source/repos/VueSampleApplication/vuesampleapplication.client/node_modules/vite/dist/node/cli.js:735:20)
続行するには何かキーを押してください . . .

問題のある、vite.config.tsを見たところ、

vite.config.ts

const baseFolder =
    env.APPDATA !== undefined && env.APPDATA !== ''
        ? `${env.APPDATA}/ASP.NET/https`
        : `${env.HOME}/.aspnet/https`;

const certificateName = "vuesampleapplication.client";
const certFilePath = path.join(baseFolder, `${certificateName}.pem`);
const keyFilePath = path.join(baseFolder, `${certificateName}.key`);

if (!fs.existsSync(certFilePath) || !fs.existsSync(keyFilePath)) {
    if (0 !== child_process.spawnSync('dotnet', [
        'dev-certs',
        'https',
        '--export-path',
        certFilePath,
        '--format',
        'Pem',
        '--no-password',
    ], { stdio: 'inherit', }).status) {
        throw new Error("Could not create certificate.");
    }
}

でエラーが起きているようだ。

調査したところ、対象のディレクトリが存在していないので失敗している模様。なので、対象のディレクトリがない場合は作成するようにした。

vite.config.ts

import { fileURLToPath, URL } from 'node:url';

import { defineConfig } from 'vite';
import plugin from '@vitejs/plugin-vue';
import fs from 'fs';
import path from 'path';
import child_process from 'child_process';
import { env } from 'process';

const baseFolder =
  env.APPDATA !== undefined && env.APPDATA !== ''
    ? `${env.APPDATA}/ASP.NET/https`
    : `${env.HOME}/.aspnet/https`;

const certificateName = "vuesampleapplication.client";
const certFilePath = path.join(baseFolder, `${certificateName}.pem`);
const keyFilePath = path.join(baseFolder, `${certificateName}.key`);

// baseFolderディレクトリが存在しない場合は作成する
if (!fs.existsSync(baseFolder)) {
  fs.mkdirSync(baseFolder, { recursive: true });
}

if (!fs.existsSync(certFilePath) || !fs.existsSync(keyFilePath)) {
  if (0 !== child_process.spawnSync('dotnet', [
    'dev-certs',
    'https',
    '--export-path',
    certFilePath,
    '--format',
    'Pem',
    '--no-password',
  ], { stdio: 'inherit', }).status) {
    throw new Error("Could not create certificate.");
  }
}

const target = env.ASPNETCORE_HTTPS_PORT ? `https://localhost:${env.ASPNETCORE_HTTPS_PORT}` :
  env.ASPNETCORE_URLS ? env.ASPNETCORE_URLS.split(';')[0] : 'https://localhost:7084';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [plugin()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    proxy: {
      '^/weatherforecast': {
        target,
        secure: false
      }
    },
    port: 5173,
    https: {
      key: fs.readFileSync(keyFilePath),
      cert: fs.readFileSync(certFilePath),
    }
  }
})

3. 再度デバッグの開始を行う

ドキュメントに記載の通り、以下が出力されているのでOK

実行中の ASP.NET Core API プロジェクト
VITE v4.4.9 ready in 780 ms などのメッセージを示す Vite CLI

※注意として、ドキュメントにも記載されているが、プロキシエラーが発生することがある。
今回のキャプチャでも、Proxy Errorが発生しているので、以下のように対処した。

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

https://learn.microsoft.com/ja-jp/visualstudio/javascript/tutorial-asp-net-core-with-vue?view=vs-2022#troubleshooting

参考

チュートリアル: Visual Studio での Vue を使用した ASP.NET Core アプリの作成 https://learn.microsoft.com/ja-jp/visualstudio/javascript/tutorial-asp-net-core-with-vue?view=vs-2022

おわりに

今回は、ASP.NET, Vue, Vite, TypeScriptでアプリケーションのプロジェクトを作成した。
Server, Clientでソースが分かれているケースとなるが、どこかでサーバとクライアントが同じプロジェクトにあるケースもやっておきたい。

また、NextStep を見ると、ASP.NET Core でのシングルページアプリケーション (SPA) の概要が紹介されているので、次回はこのページを参考にしながら、アプリケーションを改造したい。
その前に、ASP.NETの既存のプロジェクトに、Vue, Viteを導入してSPAのプロジェクトにするということもしてみたい。