merge upstream 2025-02-03

packages/frontend/vite.config.ts

@@ -3,6 +3,9 @@ import pluginReplace from '@rollup/plugin-replace';
 import pluginVue from '@vitejs/plugin-vue';
 import { type UserConfig, defineConfig } from 'vite';
 import { localesVersion } from '../../locales/version.js';
+import * as yaml from 'js-yaml';
+import { promises as fsp } from 'fs';
+
 import locales from '../../locales/index.js';
 import meta from '../../package.json';
 import packageInfo from './package.json' with { type: 'json' };
@@ -10,6 +13,9 @@ import pluginUnwindCssModuleClassName from './lib/rollup-plugin-unwind-css-modul
 import pluginJson5 from './vite.json5.js';
 import { pluginReplaceIcons } from './vite.replaceIcons.js';
 
+const url = process.env.NODE_ENV === 'development' ? yaml.load(await fsp.readFile('../../.config/default.yml', 'utf-8')).url : null;
+const host = url ? (new URL(url)).hostname : undefined;
+
 const extensions = ['.ts', '.tsx', '.js', '.jsx', '.mjs', '.json', '.json5', '.svg', '.sass', '.scss', '.css', '.vue', '.wasm'];
 
 /**
@@ -76,7 +82,14 @@ export function getConfig(): UserConfig {
 		base: '/vite/',
 
 		server: {
+			host,
 			port: 5173,
+			hmr: {
+				// バックエンド経由での起動時、Viteは5173経由でアセットを参照していると思い込んでいるが実際は3000から配信される
+				// そのため、バックエンドのWSサーバーにHMRのWSリクエストが吸収されてしまい、正しくHMRが機能しない
+				// クライアント側のWSポートをViteサーバーのポートに強制させることで、正しくHMRが機能するようになる
+				clientPort: 5173,
+			},
 			headers: { // なんか効かない
 				'X-Frame-Options': 'DENY',
 			},