Try Docker 1811

frontend/.env.development

@@ -0,0 +1 @@
+VITE_API_BASE_URL=http://localhost:5174

frontend/.env.production

@@ -0,0 +1 @@
+VITE_API_BASE_URL=

frontend/Dockerfile

@@ -0,0 +1,30 @@
+# Etapa 1: Construcción de la aplicación React
+# Usamos una imagen de Node.js (versión Alpine por ser ligera)
+FROM node:20-alpine AS build
+WORKDIR /app
+
+# Copiamos package.json y package-lock.json para instalar dependencias
+COPY package*.json ./
+RUN npm install
+
+# Copiamos el resto de los archivos del frontend
+COPY . .
+# Construimos la aplicación para producción. Los archivos resultantes irán a /app/dist
+RUN npm run build
+
+# Etapa 2: Servidor Nginx
+# Usamos la imagen oficial de Nginx (versión Alpine por ser ligera)
+FROM nginx:stable-alpine
+WORKDIR /usr/share/nginx/html
+
+# Eliminamos el contenido por defecto de Nginx
+RUN rm -rf ./*
+
+# Copiamos los archivos estáticos construidos en la etapa anterior
+COPY --from=build /app/dist .
+
+# Exponemos el puerto 80, que es el puerto por defecto de Nginx
+EXPOSE 80
+
+# El comando por defecto de la imagen de Nginx es suficiente para iniciar el servidor
+# CMD ["nginx", "-g", "daemon off;"]

frontend/src/hooks/useSignalR.ts

@@ -3,7 +3,10 @@
 import { useEffect, useRef, useState } from 'react';
 import * as signalR from '@microsoft/signalr';
 
-const HUB_URL = 'http://localhost:5174/titularesHub';
+// La URL base viene de la variable de entorno
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || '';
+// Construimos la URL completa del Hub
+const HUB_URL = `${API_BASE_URL}/titularesHub`;
 
 // Definimos un tipo para el estado de la conexión para más claridad
 export type ConnectionStatus = 'Connecting' | 'Connected' | 'Disconnected' | 'Reconnecting';

frontend/src/services/apiService.ts

@@ -3,10 +3,12 @@
 import axios from 'axios';
 import type { Configuracion, Titular } from '../types';
 
-const API_URL = 'http://localhost:5174/api';
+// La URL base viene de la variable de entorno
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || '';
 
 const apiClient = axios.create({
-  baseURL: API_URL,
+  // Construimos la URL completa para las llamadas a la API REST
+  baseURL: `${API_BASE_URL}/api`,
   headers: { 'Content-Type': 'application/json' },
 });