Works on PROD
This commit is contained in:
@@ -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:
|
||||||
|
|||||||
@@ -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
7
frontend/entrypoint.sh
Normal 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;'
|
||||||
@@ -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>
|
||||||
|
|||||||
@@ -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) {
|
||||||
|
|||||||
@@ -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',
|
||||||
|
|||||||
@@ -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);
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user