Merge pull request #5 from dlsrks1021/main

chore: 런타임에 호출 URL을 환경변수로 설정 가능하도록 수정
good idea!

Author: tech-kms-jake

public/index.html

@@ -6,6 +6,7 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
+    <script src="/env.js"></script>
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

server.js

@@ -4,6 +4,14 @@ const path = require('path');
 const app = express();
 const PORT = process.env.PORT || 3000;
 
+const env = {
+    REACT_APP_API_BASE_URL: process.env.REACT_APP_API_BASE_URL || "https://api-brainrace.duckdns.org",
+    REACT_APP_WS_BASE_URL: process.env.REACT_APP_WS_BASE_URL || "wss://api-brainrace.duckdns.org",
+};
+const fs = require('fs');
+const envFileContent = `window.__ENV__ = ${JSON.stringify(env)};`;
+fs.writeFileSync(path.join(__dirname, 'build', 'env.js'), envFileContent);
+
 // 정적 파일 제공 (build 디렉토리)
 app.use(express.static(path.join(__dirname, 'build')));
 

src/hooks/useRoomSseClient.js

@@ -14,7 +14,7 @@ export default function useRoomSseClient(onRoomEvent) {
     useEffect(() => {
         if (eventSource) return;
 
-        eventSource = new EventSource(`${process.env.REACT_APP_API_BASE_URL}/sse/lobby`, {withCredentials: true});
+        eventSource = new EventSource(`${window.__ENV__?.REACT_APP_API_BASE_URL || "https://api-brainrace.duckdns.org"}/sse/lobby`, {withCredentials: true});
 
         eventSource.onopen = () => {
             console.log('✅ SSE 연결됨');

src/hooks/useStompClient.js

@@ -25,7 +25,7 @@ export default function useStompClient(roomId, onMessage) {
         isConnecting = true;
 
         stompClient = new Client({
-            brokerURL: `${process.env.REACT_APP_WS_BASE_URL}/ws/game-room`,
+            brokerURL: `${window.__ENV__?.REACT_APP_WS_BASE_URL || "wss://api-brainrace.duckdns.org"}/ws/game-room`,
             reconnectDelay: 5000,
             // debug: (msg) => console.log('[STOMP]', msg),
             onConnect: () => {

src/index.js

@@ -7,7 +7,7 @@ import {RecoilRoot} from "recoil";
 import {QueryClient, QueryClientProvider} from "react-query";
 import axios from "axios";
 
-axios.defaults.baseURL = process.env.REACT_APP_API_BASE_URL || "https://api-brainrace.duckdns.org";
+axios.defaults.baseURL = window.__ENV__?.REACT_APP_API_BASE_URL || "https://api-brainrace.duckdns.org";
 // react-qeury사용을 위해 선언
 const queryClient = new QueryClient({
     defaultOptions: {

src/pages/login/Login.js

@@ -11,7 +11,7 @@ const Login = () => {
         </div>
         <button className={styles.loginButton}
                 onClick={() => {
-                  window.location.href = `${process.env.REACT_APP_API_BASE_URL}/oauth2/authorization/kakao`;
+                  window.location.href = `${window.__ENV__?.REACT_APP_API_BASE_URL || "https://api-brainrace.duckdns.org"}/oauth2/authorization/kakao`;
                 }}>
           뇌이싱 입장하기
         </button>