From 8cbb520408735f6ba58e8e5847521098507c147b Mon Sep 17 00:00:00 2001 From: aodulov Date: Wed, 15 Oct 2025 16:07:56 +0300 Subject: [PATCH] Works on PROD --- docker-compose.yaml | 4 ++-- frontend/Dockerfile | 10 ++++++++-- frontend/entrypoint.sh | 7 +++++++ frontend/public/index.html | 1 + frontend/src/pages/CreateSession.tsx | 4 +++- frontend/src/services/authService.ts | 8 +++++--- frontend/src/services/websocket.ts | 13 ++++++++++++- 7 files changed, 38 insertions(+), 9 deletions(-) create mode 100644 frontend/entrypoint.sh diff --git a/docker-compose.yaml b/docker-compose.yaml index b90b5a7..cc37ba6 100644 --- a/docker-compose.yaml +++ b/docker-compose.yaml @@ -6,8 +6,8 @@ services: context: ./frontend ports: - "3000:80" - env_file: - - ./frontend/.env + environment: + - API_URL=${API_URL:-ws://localhost:8000} backend: build: diff --git a/frontend/Dockerfile b/frontend/Dockerfile index f7079e9..4f63fef 100644 --- a/frontend/Dockerfile +++ b/frontend/Dockerfile @@ -24,8 +24,14 @@ COPY --from=build /app/build /usr/share/nginx/html # Copy a custom Nginx configuration if needed (optional) COPY nginx.conf /etc/nginx/conf.d/default.conf +# Copy the entrypoint script +COPY entrypoint.sh /entrypoint.sh + +# Make the entrypoint script executable +RUN chmod +x /entrypoint.sh + # Expose port 80 EXPOSE 80 -# Start Nginx -CMD ["nginx", "-g", "daemon off;"] +# Set the entrypoint +ENTRYPOINT ["/entrypoint.sh"] diff --git a/frontend/entrypoint.sh b/frontend/entrypoint.sh new file mode 100644 index 0000000..fca4ba5 --- /dev/null +++ b/frontend/entrypoint.sh @@ -0,0 +1,7 @@ +#!/bin/sh + +# Create a config.js file with the runtime environment variable +echo "window.runtimeConfig = { API_URL: '${API_URL}' };" > /usr/share/nginx/html/config.js + +# Start the Nginx server +exec nginx -g 'daemon off;' diff --git a/frontend/public/index.html b/frontend/public/index.html index 17b965c..8cae02d 100644 --- a/frontend/public/index.html +++ b/frontend/public/index.html @@ -10,6 +10,7 @@ /> + Unisono diff --git a/frontend/src/pages/CreateSession.tsx b/frontend/src/pages/CreateSession.tsx index adb0a16..1a94be9 100644 --- a/frontend/src/pages/CreateSession.tsx +++ b/frontend/src/pages/CreateSession.tsx @@ -9,7 +9,9 @@ const CreateSession = () => { useEffect(() => { const handleCreate = async () => { try { - const response = await axios.post('http://localhost:8000/sessions'); + const apiUrl = window.runtimeConfig?.API_URL || 'http://localhost:8000'; + const httpApiUrl = apiUrl.replace(/^ws/, 'http'); + const response = await axios.post(`${httpApiUrl}/sessions`); const { sessionId } = response.data; navigate(`/session/${sessionId}`); } catch (error) { diff --git a/frontend/src/services/authService.ts b/frontend/src/services/authService.ts index 98ea1f0..b961d0a 100644 --- a/frontend/src/services/authService.ts +++ b/frontend/src/services/authService.ts @@ -1,8 +1,10 @@ // frontend/src/services/authService.ts -const API_BASE_URL = process.env.REACT_APP_API_BASE_URL || 'http://localhost:8000'; - export const authenticate = async (passphrase: string): Promise => { - const response = await fetch(`${API_BASE_URL}/api/auth/passphrase`, { + // Read the API_URL from the runtime configuration and convert ws to http + const apiUrl = window.runtimeConfig?.API_URL || 'http://localhost:8000'; + const httpApiUrl = apiUrl.replace(/^ws/, 'http'); + + const response = await fetch(`${httpApiUrl}/api/auth/passphrase`, { method: 'POST', headers: { 'Content-Type': 'application/json', diff --git a/frontend/src/services/websocket.ts b/frontend/src/services/websocket.ts index a516161..575d441 100644 --- a/frontend/src/services/websocket.ts +++ b/frontend/src/services/websocket.ts @@ -1,3 +1,13 @@ +// Define the runtime configuration interface +interface RuntimeConfig { + API_URL: string; +} +declare global { + interface Window { + runtimeConfig?: RuntimeConfig; + } +} + class WebSocketService { private ws: WebSocket | null = null; private messageHandlers: ((message: any) => void)[] = []; @@ -14,7 +24,8 @@ class WebSocketService { this.currentSessionId = sessionId; this.currentClientId = clientId; - const apiUrl = process.env.REACT_APP_API_URL || 'ws://localhost:8000'; + // Read the API_URL from the runtime configuration + const apiUrl = window.runtimeConfig?.API_URL || 'ws://localhost:8000'; const wsUrl = `${apiUrl.replace(/^http/, 'ws')}/sessions/${sessionId}`; this.ws = new WebSocket(wsUrl);