Works on PROD

This commit is contained in:
aodulov
2025-10-15 16:07:56 +03:00
parent 03d31011fd
commit 8cbb520408
7 changed files with 38 additions and 9 deletions

View File

@@ -6,8 +6,8 @@ services:
context: ./frontend context: ./frontend
ports: ports:
- "3000:80" - "3000:80"
env_file: environment:
- ./frontend/.env - API_URL=${API_URL:-ws://localhost:8000}
backend: backend:
build: build:

View File

@@ -24,8 +24,14 @@ COPY --from=build /app/build /usr/share/nginx/html
# Copy a custom Nginx configuration if needed (optional) # Copy a custom Nginx configuration if needed (optional)
COPY nginx.conf /etc/nginx/conf.d/default.conf 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 port 80
EXPOSE 80 EXPOSE 80
# Start Nginx # Set the entrypoint
CMD ["nginx", "-g", "daemon off;"] ENTRYPOINT ["/entrypoint.sh"]

7
frontend/entrypoint.sh Normal file
View File

@@ -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;'

View File

@@ -10,6 +10,7 @@
/> />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<script src="/config.js"></script>
<title>Unisono</title> <title>Unisono</title>
</head> </head>
<body> <body>

View File

@@ -9,7 +9,9 @@ const CreateSession = () => {
useEffect(() => { useEffect(() => {
const handleCreate = async () => { const handleCreate = async () => {
try { 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; const { sessionId } = response.data;
navigate(`/session/${sessionId}`); navigate(`/session/${sessionId}`);
} catch (error) { } catch (error) {

View File

@@ -1,8 +1,10 @@
// frontend/src/services/authService.ts // 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<string> => { export const authenticate = async (passphrase: string): Promise<string> => {
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', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',

View File

@@ -1,3 +1,13 @@
// Define the runtime configuration interface
interface RuntimeConfig {
API_URL: string;
}
declare global {
interface Window {
runtimeConfig?: RuntimeConfig;
}
}
class WebSocketService { class WebSocketService {
private ws: WebSocket | null = null; private ws: WebSocket | null = null;
private messageHandlers: ((message: any) => void)[] = []; private messageHandlers: ((message: any) => void)[] = [];
@@ -14,7 +24,8 @@ class WebSocketService {
this.currentSessionId = sessionId; this.currentSessionId = sessionId;
this.currentClientId = clientId; 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}`; const wsUrl = `${apiUrl.replace(/^http/, 'ws')}/sessions/${sessionId}`;
this.ws = new WebSocket(wsUrl); this.ws = new WebSocket(wsUrl);