fix(frontend/dev): バックエンド経由での開発時にHMRが効かない問題を修正 (#15255)

misskey-dev · Jan 14, 2025 · d082a1d · d082a1d
1 parent 759b9f4
commit d082a1d
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 0 deletions.
diff --git a/packages/frontend-embed/vite.config.ts b/packages/frontend-embed/vite.config.ts
@@ -63,6 +63,12 @@ export function getConfig(): UserConfig {
 
 		server: {
 			port: 5174,
+			hmr: {
+				// バックエンド経由での起動時、Viteは5174経由でアセットを参照していると思い込んでいるが実際は3000から配信される
+				// そのため、バックエンドのWSサーバーにHMRのWSリクエストが吸収されてしまい、正しくHMRが機能しない
+				// クライアント側のWSポートをViteサーバーのポートに強制させることで、正しくHMRが機能するようになる
+				clientPort: 5174,
+			},
 		},
 
 		plugins: [

diff --git a/packages/frontend/vite.config.ts b/packages/frontend/vite.config.ts
@@ -65,6 +65,12 @@ export function getConfig(): UserConfig {
 
 		server: {
 			port: 5173,
+			hmr: {
+				// バックエンド経由での起動時、Viteは5173経由でアセットを参照していると思い込んでいるが実際は3000から配信される
+				// そのため、バックエンドのWSサーバーにHMRのWSリクエストが吸収されてしまい、正しくHMRが機能しない
+				// クライアント側のWSポートをViteサーバーのポートに強制させることで、正しくHMRが機能するようになる
+				clientPort: 5173,
+			},
 			headers: { // なんか効かない
 				'X-Frame-Options': 'DENY',
 			},