feat : ws 에러 수정 완료 및 소켓 통신 nginx로 변경 성공

MomHelpMe · Aug 25, 2024 · ec7e663 · ec7e663
1 parent 596da1f
commit ec7e663
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 32 deletions.
diff --git a/frontend/src/app.js b/frontend/src/app.js
@@ -1,6 +1,7 @@
-import { initializeRouter, createRoutes } from "./core/router.js";
+import { initializeRouter, createRoutes, changeUrl } from "./core/router.js";
 import { getCookie } from "./core/jwt.js";
 
+
 class App {
 	app;
 	lan;
@@ -16,21 +17,21 @@ export const root = new App();
 export const routes = createRoutes(root);
 
 const online = () => {
-    const onlineSocket = new WebSocket(
-        'ws://'
-        + "localhost:8000"
-        + '/ws/online/'
-        );
-        console.log(onlineSocket);
-        onlineSocket.onopen = () => {
-            const token = getCookie("jwt");
-            onlineSocket.send(JSON.stringify({ 'action': 'authenticate', 'token': token }));
-        };
-        onlineSocket.onclose = () => {
-            console.log("close");
-            // 로그아웃
-        };
-    }
-    
+	const onlineSocket = new WebSocket(
+		'wss://'
+		+ "localhost:443"
+		+ '/ws/online/'
+		);
+		console.log(onlineSocket);
+		onlineSocket.onopen = () => {
+			const token = getCookie("jwt");
+			onlineSocket.send(JSON.stringify({ 'action': 'authenticate', 'token': token }));
+		};
+		onlineSocket.onclose = () => {
+			console.log("online socket closed");
+			changeUrl("/404", false);
+		};
+	}
+	
 initializeRouter(routes);
 online();
diff --git a/frontend/src/components/Game-Core.js b/frontend/src/components/Game-Core.js
@@ -10,8 +10,8 @@ export class GameCore extends Component {
 	initState() {
 		this.keysPressed = {};
 		this.gameSocket = this.gameSocket = new WebSocket(
-			'ws://'
-			+ "localhost:8000"
+			'wss://'
+			+ "localhost:443"
 			+ '/ws/game/'
 			+  this.props.uid
 			+ '/'

diff --git a/frontend/src/components/Main-Menu.js b/frontend/src/components/Main-Menu.js
@@ -54,8 +54,7 @@ export class Menu extends Component {
 		});
 
 		this.addEvent('click', '#LocalGame', () => {
-			const uid = "145058";
-			changeUrl(`/game/local/${uid}`);
+			changeUrl(`/game/local/${this.uid}`);
 		});
 
 		this.addEvent('click', "#MultiGame", () => {

diff --git a/frontend/vite.config.js b/frontend/vite.config.js
@@ -1,15 +1,11 @@
 import { defineConfig } from "vite";
 
 export default defineConfig({
-    server: {
-        host: "0.0.0.0",
-        port: 5173,
-        proxy: {
-            "/api": {
-                // TEST: 평가 시 80번 포트로 변경 (nginx를 거쳐 api를 호출하도록)
-                target: "https://localhost:443",
-                changeOrigin: true,
-            },
-        },
+  server: {
+    host: "0.0.0.0",
+    hmr: {
+      clientPort: 5173,
+      protocol: "ws",
     },
-});
+  },
+});
diff --git a/nginx/compose.conf b/nginx/compose.conf
@@ -23,4 +23,16 @@ server {
         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
         proxy_set_header X-Forwarded-Proto $scheme;
     }
+
+    location /ws/ {
+        proxy_pass http://backend:8000;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection "upgrade";
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_cache_bypass $http_upgrade;
+    }
 }
diff --git a/nginx/local.conf b/nginx/local.conf
@@ -23,4 +23,16 @@ server {
         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
         proxy_set_header X-Forwarded-Proto $scheme;
     }
+
+    location /ws/ {
+        proxy_pass http://host.docker.internal:8000;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection "upgrade";
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_cache_bypass $http_upgrade;
+    }
 }