build : 볼륨 path들 예쁘게 수정함 / init.sh에 환경변수 하나 수정 / 프론트엔드 전역변수 분기별로 수정하여…

… 웹소켓 / API 나뉘게 수정

docker-compose.yml

@@ -7,14 +7,13 @@ services:
       dockerfile: Dockerfile
     ports:
       - 8200:8200
+    env_file:
+      - .env
     volumes:
-      # - "/Users/sejokim/desktop/volumes/vault/file:/vault/file"
-      # - "/Users/sejokim/desktop/volumes/vault/logs:/vault/logs"
-      # - "/Users/sejokim/desktop/volumes/vault/config:/vault/config"
-      - "./volumes/vault/file:/vault/file"
-      - "./volumes/vault/logs:/vault/logs"
-      - "./volumes/vault/config:/vault/config"
-      - "./volumes/certs:/vault/certs"
+      - ${VAULT_FILE_PATH}:/vault/file
+      - "${VAULT_LOG_PATH}:/vault/logs"
+      - "${VAULT_TOKEN_PATH}:/vault/config"
+      - "${CERTS_PATH}:/vault/certs"
 
     environment:
       VAULT_ADDR: "https://hashicorp_vault:8200"
@@ -32,9 +31,9 @@ services:
       - app_network
     volumes:
       - static-volume:/backend/static
-      - "./volumes/certs:/backend/certs"
+      - "${CERTS_PATH}:/backend/certs"
     env_file:
-      - ./.env
+      - .env
     environment:
     # DB
       DB_HOST: ${DB_HOST}
@@ -60,7 +59,6 @@ services:
       INTRA42_CLIENT_ID: ${INTRA42_CLIENT_ID}
       INTRA42_CLIENT_SECRET: ${INTRA42_CLIENT_SECRET}
       INTRA42_USERINFO_API: ${INTRA42_USERINFO_API}
-      DJANGO_SETTING_MODULE: "src.settings"
       BASE_URL: ${BASE_URL}
 
     depends_on:
@@ -70,10 +68,10 @@ services:
     build: ./nginx
     container_name: nginx_container
     volumes:
-      - "./frontend:/usr/share/nginx/html"
+      - "${FRONTEND_CODE}:/usr/share/nginx/html"
       - static-volume:/usr/share/nginx/html/static
-      - "./volumes/certs:/etc/nginx/certs"
-      # - "/Users/sejokim/desktop/volumes/nginx/logs:/var/log/nginx"
+      - "${CERTS_PATH}:/etc/nginx/certs"
+      - "${NGINX_LOGS}:/var/log/nginx"
     logging:
       options:
         max-size: "10m"
@@ -90,10 +88,8 @@ services:
   #     context: ./elk/elasticsearch
   #     dockerfile: Dockerfile
   #   volumes:
-  #     # - "/Users/sejokim/desktop/volumes/elasticsearch/data:/usr/share/elasticsearch/data"
-  #     # - "/Users/sejokim/desktop/volumes/elasticsearch/certs:/usr/share/elasticsearch/config/certs"
-  #     - "./volumes/elasticsearch/data:/usr/share/elasticsearch/data"
-  #     - "./volumes/elasticsearch/certs:/usr/share/elasticsearch/config/certs"
+  #     - "${ELASTIC_DATA}:/usr/share/elasticsearch/data"
+  #     - "${ELASTIC_CERTS}:/usr/share/elasticsearch/config/certs"
   #   environment:
   #     discovery.type : single-node
   #     ELASTIC_PW : ${ELASTIC_PW}
@@ -115,10 +111,8 @@ services:
   #     ELASTIC_PW: ${ELASTIC_PW}
   #     ES_CERTS_PW: ${ES_CERTS_PW}
   #   volumes:
-  #     # - "/Users/sejokim/desktop/volumes/elasticsearch/certs:/usr/share/logstash/config/certs"
-  #     # - "/Users/sejokim/desktop/volumes/nginx/logs:/usr/share/logstash/logs"
-  #     - "./volumes/elasticsearch/certs:/usr/share/logstash/config/certs"
-  #     - "./volumes/nginx/logs:/usr/share/logstash/logs"
+  #     - "${ELASTIC_CERTS}:/usr/share/logstash/config/certs"
+  #     - "${NGINX_LOGS}:/usr/share/logstash/logs"
   #   ports:
   #     - 5333:5333
   #   depends_on:
@@ -130,10 +124,8 @@ services:
   #   build: ./elk/kibana
   #   container_name: kibana_container
   #   volumes:
-  #     # - "/Users/sejokim/desktop/volumes/kibana/data:/usr/share/kibana/data"
-  #     # - "/Users/sejokim/desktop/volumes/elasticsearch/certs:/usr/share/kibana/config/certs"
-  #     - "./volumes/kibana/data:/usr/share/kibana/data"
-  #     - "./volumes/elasticsearch/certs:/usr/share/kibana/config/certs"
+  #     - "${KIBANA_DATA}:/usr/share/kibana/data"
+  #     - "${ELASTIC_CERTS}:/usr/share/kibana/config/certs"
   #   environment:
   #     ELASTICSEARCH_URL: https://elasticsearch:9200
   #     ELASTIC_PW: ${ELASTIC_PW}

frontend/src/global.js

@@ -1,15 +1,18 @@
 const devBackend = "http://localhost:8000/api";
-const prodBackend = "https://localhost/api";
+const devWebSocket = "ws://localhost:8000/ws"
+const prodBackend = "https://localhost:443/api";
+const prodWebSocket = "wss://localhost:443/ws";
 
 const getAPIUrl = () => {
-  if (window.mode === "dev") {
-    return devBackend;
-  } else {
-    return prodBackend;
-  }
+  return window.mode === "dev" ? devBackend : prodBackend;
+};
+
+const getWebsocketUrl = () => {
+  return window.mode === "dev" ? devWebSocket : prodWebSocket;
 };
 
 export const BACKEND = getAPIUrl();
+export const WEBSOCKET = getWebsocketUrl();
 export const HISTORIES_IMAGE_PATH = "../../../assets/images";
 
 export const MODE = {

frontend/src/header/mainHeader/header.js

@@ -27,7 +27,7 @@ export default function MainHeader($container) {
           setUserInfo(data);
         });
         // alert("웹소켓 연결!");
-        new WebSocket("wss://localhost/ws/friend_status/");
+        new WebSocket("{WEBSOCKET}/ws/friend_status/");
       } else {
         // TODO => 에러 페이지로 이동
         navigate("/");

frontend/src/pages/custom-game-list/page.js

@@ -122,9 +122,9 @@ export default function CustomGameList($container) {
 
     if (password != null)
       wss = new WebSocket(
-        `wss://localhost:443/ws/games/${id}/?password=${password}`,
+        `${WEBSOCKET}/ws/games/${id}/?password=${password}`,
       );
-    else wss = new WebSocket(`wss://localhost:443/ws/games/${id}/`);
+    else wss = new WebSocket(`${WEBSOCKET}:443/ws/games/${id}/`);
 
     wss.onmessage = (event) => {
       const res = JSON.parse(event.data);

frontend/src/pages/game-mode/page.js

@@ -14,7 +14,7 @@ export default function GameMode($container) {
       $container.querySelector(".queue-modal").style.display = "flex";
       $container.querySelector(".modal-backdrop").style.display = "block";
       console.log("clicked");
-      this.ws = new WebSocket("wss://localhost/ws/rankgames/");
+      this.ws = new WebSocket("${WEBSOCKET}/ws/rankgames/");
       console.log("ws ok");
       this.ws.onmessage = (event) => {
         console.log(event.data);

init.sh

@@ -1,5 +1,7 @@
 #!/bin/sh
 
+export DJANGO_SETTINGS_MODULE=src.settings
+
 python manage.py collectstatic --noinput
 
 daphne -b 0.0.0.0 -e ssl:8443:privateKey=/backend/certs/server.key:certKey=/backend/certs/server.crt src.asgi:application