끝

backend/transcendence/settings.py

@@ -100,24 +100,25 @@ def custom_exception_handler(exc, context):
     "django.middleware.clickjacking.XFrameOptionsMiddleware",
 ]
 
-# CORS_ORIGIN_ALLOW_ALL = True  # TEST: 모든 도메인 허용 (보안 취약)
+CORS_ORIGIN_ALLOW_ALL = True
 
 CSRF_TRUSTED_ORIGINS = [
+    "https://10.31.5.2",
     "https://localhost:443",
+    "https://localhost:5173",
 ]
 
-CSRF_COOKIE_SECURE = True
-CSRF_COOKIE_SAMESITE = "Lax"
-
 ALLOWED_HOSTS = ["*"]
 
 CORS_ALLOWED_ORIGINS = [
+    "https://10.31.5.2",
     "https://localhost:443",
+    "https://localhost:5173",
 ]
 
 CORS_ALLOW_CREDENTIALS = True  # 쿠키 허용
 
-SESSION_COOKIE_HTTPONLY = True  # 쿠키를 HTTP로만 전송
+# SESSION_COOKIE_HTTPONLY = True  # 쿠키를 HTTP로만 전송
 
 ROOT_URLCONF = "transcendence.urls"
 

frontend/Dockerfile

@@ -15,7 +15,7 @@ RUN npm install && \
 COPY . .
 
 # 6. Vite 서버를 실행합니다.
-CMD ["npm", "run", "dev"]
+CMD ["sh", "-c", "npm run build && cp -r img dist/img && npm run preview"]
 
 # 7. 컨테이너가 노출할 포트를 설정합니다.
 EXPOSE 5173

frontend/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview"
+    "preview": "vite preview --port 5173"
   },
   "devDependencies": {
     "vite": "^5.3.4"

frontend/src/components/2FA.js

@@ -54,7 +54,7 @@ export class TwoFA extends Component {
 
 		this.addEvent('click', '#resendButton', () => {
 			// resend msg 전송
-			fetch('https://localhost:443/api/send-mail/', {
+			fetch('https://10.31.5.2/api/send-mail/', {
 				method: 'GET',
 				credentials: 'include', // 쿠키를 포함하여 요청
 			})
@@ -77,7 +77,7 @@ export class TwoFA extends Component {
 			}
 
 			// API code 일치 확인 요청
-			fetch('https://localhost:443/api/verify-otp/', {
+			fetch('https://10.31.5.2/api/verify-otp/', {
 				method: 'POST',
 				credentials: 'include', // 쿠키를 포함하여 요청
 				headers: {
@@ -93,7 +93,7 @@ export class TwoFA extends Component {
 				if (data) {
 					if (data.success) {
 						// API!!! jwt가 있으면 해당 유저의 데이터베이스에서 언어 번호 (0 or 1 or 2) 얻어오기
-						fetch("https://localhost:443/api/language/", {
+						fetch("https://10.31.5.2/api/language/", {
 							method: 'GET',
 							credentials: 'include', // 쿠키를 포함하여 요청 (사용자 인증 필요 시)
 						})

frontend/src/components/Edit-Profile.js

@@ -64,7 +64,7 @@ export class EditProfile extends Component {
 		this.is_2FA = true;
 
 		//API!! ME GET
-		fetch("https://localhost:443/api/me/", {
+		fetch("https://10.31.5.2/api/me/", {
 			method: 'GET',
 			credentials: 'include', // 쿠키를 포함하여 요청 (사용자 인증 필요 시)
 		})
@@ -177,7 +177,7 @@ export class EditProfile extends Component {
 
 		this.addEvent('click', '#deleteYesButton', () => {
 			//API!! ME DELETE
-			fetch("https://localhost:443/api/me/", {
+			fetch("https://10.31.5.2/api/me/", {
 				method: 'DELETE',
 				credentials: 'include', // 쿠키를 포함하여 요청 (사용자 인증 필요 시)
 			})
@@ -206,7 +206,7 @@ export class EditProfile extends Component {
 			formData.append('img_url', imageUrl);
 
 			// API!! ME PUT
-			fetch('https://localhost:443/api/me/', {
+			fetch('https://10.31.5.2/api/me/', {
 				method: 'PUT',
 				credentials: 'include', // 쿠키를 포함하여 요청 (사용자 인증 필요 시)
 				body: formData

frontend/src/components/Friends-List.js

@@ -69,7 +69,7 @@ export class FriendsList extends Component {
 
 	mounted() {
 		// API !!! Friends GET
-		fetch("https://localhost:443/api/friends/", {
+		fetch("https://10.31.5.2/api/friends/", {
 			method: 'GET',
 			credentials: 'include', // 쿠키를 포함하여 요청
 		})
@@ -164,7 +164,7 @@ export class FriendsList extends Component {
 			else
 			{
 				// API !!! Friends POST
-				fetch("https://localhost:443/api/friends/", {
+				fetch("https://10.31.5.2/api/friends/", {
 					method: 'POST',
 					credentials: 'include', // 쿠키를 포함하여 요청
 					headers: {
@@ -196,7 +196,7 @@ export class FriendsList extends Component {
 			const nickname = part[0];
 
 			//API !!! userList
-			fetch("https://localhost:443/api/user/", {
+			fetch("https://10.31.5.2/api/user/", {
 				method: 'GET',
 			})
 			.then(response => {
@@ -248,7 +248,7 @@ export class FriendsList extends Component {
 			const uid = part[1];
 
 			// API !!! Friends DELETE
-			fetch("https://localhost:443/api/friends/", {
+			fetch("https://10.31.5.2/api/friends/", {
 				method: 'DELETE',
 				credentials: 'include', // 쿠키를 포함하여 요청
 				headers: {

frontend/src/components/Game-Core.js

@@ -12,7 +12,7 @@ export class GameCore extends Component {
 		this.keysPressed = {};
 		this.gameSocket = new WebSocket(
 			'wss://'
-			+ "localhost:443"
+			+ "10.31.5.2"
 			+ '/ws/game/'
 			+ this.props.uid
 			+ '/'

frontend/src/components/Game-Result-Page.js

@@ -94,7 +94,7 @@ export class GameResultPage extends Component {
 						})
 					};
 
-					fetch("https://localhost:443/api/game-history/tournament", {
+					fetch("https://10.31.5.2/api/game-history/tournament", {
 						method: 'POST',
 						credentials: 'include', // 쿠키를 포함하여 요청
 						headers: {

frontend/src/components/Game-Tournament-Core.js

@@ -12,7 +12,7 @@ export class GameTournamentCore extends Component {
 		this.keysPressed = {};
 		this.gameSocket = new WebSocket(
 			'wss://'
-			+ "localhost:443"
+			+ "10.31.5.2"
 			+ '/ws/game/'
 			+ this.props.uid
 			+ '/'

frontend/src/components/Game-matching-Core.js

@@ -12,7 +12,7 @@ export class GameMatchingCore extends Component {
 		this.keysPressed = {};
 		this.gameSocket = new WebSocket(
 			'wss://'
-			+ "localhost:443"
+			+ "10.31.5.2"
 			+ '/ws/game/vs/'
 			+ this.props.room
 			+ '/'

frontend/src/components/Home-Login.js

@@ -14,7 +14,7 @@ export class Login extends Component {
 	setEvent () {
 		this.addEvent('click', '#login', () => {
 			// 로그인 요청
-			window.location.href = 'https://localhost:443/api/login/';
+			window.location.href = 'https://10.31.5.2/api/login/';
 		});
 	}
 }

frontend/src/components/Main-Menu.js

@@ -68,7 +68,7 @@ export class Menu extends Component {
 		});
 
 		function storeLang(value) {
-			fetch("https://localhost:443/api/language/", {
+			fetch("https://10.31.5.2/api/language/", {
 				method: 'PUT',
 				credentials: 'include', // 쿠키를 포함하여 요청 (사용자 인증 필요 시)
 				headers: {
@@ -112,7 +112,7 @@ export class Menu extends Component {
 
 		this.addEvent('click', '#Logout', () => {
 			// API !! ME POST
-			fetch("https://localhost:443/api/me/", {
+			fetch("https://10.31.5.2/api/me/", {
 				method: 'POST',
 				credentials: 'include', // 쿠키를 포함하여 요청 (사용자 인증 필요 시)
 			})

frontend/src/components/Profile-Info.js

@@ -45,7 +45,7 @@ export class ProfileInfo extends Component {
 		this.rate = null;
 		this.games = null;
 
-		fetch(`https://localhost:443/api/user/${this.props.uid}`, {
+		fetch(`https://10.31.5.2/api/user/${this.props.uid}`, {
 			method: 'GET',
 			credentials: 'include', // 쿠키를 포함하여 요청 (사용자 인증 필요 시)
 		})

frontend/src/components/Tournament-Setting.js

@@ -60,7 +60,7 @@ export class TournamentSetting extends Component {
 
 		const translations = this.translations;
 
-		fetch("https://localhost:443/api/game-history/tournament", {
+		fetch("https://10.31.5.2/api/game-history/tournament", {
 			method: "GET",
 			credentials: "include", // 쿠키 포함
 		})

frontend/src/core/showLoading.js

@@ -2,7 +2,7 @@ import { initializeRouter, changeUrl, parsePath } from "./router.js";
 import { getCookie } from "./jwt.js";
 import { createLoadingElement, addLoadingStyles } from "./loadingComponents.js";
 
-const WEBSOCKET_URL = 'wss://localhost:443/ws/online/';
+const WEBSOCKET_URL = 'wss://10.31.5.2/ws/online/';
 
 export const closeAllSockets = (socketList) => {
     socketList.forEach(socket => {

frontend/src/utils.js

@@ -1,4 +1,4 @@
-export const API_BASE_URL = "https://localhost:443/api";
+export const API_BASE_URL = "https://10.31.5.2/api";
 
 // https://docs.djangoproject.com/en/5.1/howto/csrf/#using-csrf-protection-with-ajax
 function getCookie(name) {

frontend/vite.config.js

@@ -3,6 +3,9 @@ import { defineConfig } from "vite";
 export default defineConfig({
   server: {
     host: "0.0.0.0",
+    logLevel: "silent",
+    https: false,
+    port: 5173,
     hmr: {
       clientPort: 5173,
       protocol: "ws",

run_frontend.sh

@@ -3,4 +3,4 @@
 
 cp .env.local .env
 
-cd frontend && npm install && npm run dev
+cd frontend && npm install && npm run build && cp -r img dist/img && npm run preview