はじめに

お試しでReact＋Asp.net Core WebAPIプロジェクトを作成した際にうまくいかなかったことがありました。
備忘のため残しておきます。

問題

新規プロジェクト作成からReact and ASP.NET Coreを選択しプロジェクトを作成後、デフォルトの状態でデバッグをスタートしてもエラーが発生する。

エラー内容

There was an error exporting the HTTPS developer certificate to a file.
failed to load config from C:\Users\myUser\source\repos\ReactApp2\reactapp2.client\vite.config.js
error when starting dev server:
Error: Could not create certificate.
    at file:///C:/Users/myUser/source/repos/ReactApp2/reactapp2.client/vite.config.js.timestamp-1732241848768-aaf22f60515b5.mjs:25:11
    at ModuleJob.run (node:internal/modules/esm/module_job:222:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:323:24)
    at async loadConfigFromBundledFile (file:///C:/Users/myUser/source/repos/ReactApp2/reactapp2.client/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:66691:15)
    at async loadConfigFromFile (file:///C:/Users/myUser/source/repos/ReactApp2/reactapp2.client/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:66532:24)
    at async resolveConfig (file:///C:/Users/myUser/source/repos/ReactApp2/reactapp2.client/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:66140:24)
    at async _createServer (file:///C:/Users/myUser/source/repos/ReactApp2/reactapp2.client/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:62758:18)
    at async CAC.<anonymous> (file:///C:/Users/myUser/source/repos/ReactApp2/reactapp2.client/node_modules/vite/dist/node/cli.js:735:20)

原因

証明書関連の部分がうまくいっていないみたいです。

対策

ソリューションエクスプローラー上から"reactapp2(作成したプロジェクト名).client"を右クリックし"ターミナルで開く"を選択

ターミナル上から下記コマンドを実行

npm i vite-plugin-mkcert -D

クライアントプロジェクト内のvite.config.jsを以下のように修正
※修正するのは差分が表示されているところだけでOKです。

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

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


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

+fs.mkdirSync(baseFolder, { recursive: true });

const certificateName = "reactapp2.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.");
    }
}

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

// https://vitejs.dev/config/
export default defineConfig({
-    plugins: [plugin()],
+    plugins: [plugin(),mkcert()],
    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),
        }
    }
})

この状態でデバッグをスタートすると証明書のインストール許可を求めるダイアログが表示されるためOKを選択すると正常にフロントエンド側の実行が可能になります。

証明書のインストール後に別プロジェクトでReact＋Asp.net Coreプロジェクトを作成してみましたがデフォルトの状態で正常に実行できました。

おわりに

React単体のプロジェクトで試すと最初から問題なく起動できていたためAsp.net Coreと組み合わせた時だけ発生するみたいでした。

みなさまのコーディングライフの助けになれば幸いです！！

参考