refactor nginx
Signed-off-by: Omar Sánchez Pizarro <omar.sanchez@pistacero.net>
This commit is contained in:
Omar Sánchez Pizarro
205
web/DEVELOPMENT.md
Normal file
205
web/DEVELOPMENT.md
Normal file
@@ -0,0 +1,205 @@
|
||||
# Guía de Desarrollo
|
||||
|
||||
## Configuración de Puertos
|
||||
|
||||
### Desarrollo Local
|
||||
| Servicio | Puerto | URL |
|
||||
|----------|--------|-----|
|
||||
| Dashboard (Vue) | 3000 | http://localhost:3000 |
|
||||
| Backend (API) | 3001 | http://localhost:3001 |
|
||||
| Landing (Astro) | 3002 | http://localhost:3002 |
|
||||
|
||||
### Producción (Docker)
|
||||
| Servicio | Puerto Externo | Puerto Interno |
|
||||
|----------|----------------|----------------|
|
||||
| Nginx Proxy | 80 | - |
|
||||
| Dashboard | - | 80 |
|
||||
| Backend | - | 3001 |
|
||||
| Landing | - | 80 |
|
||||
|
||||
## Ejecutar en Desarrollo Local
|
||||
|
||||
### 1. Backend (API)
|
||||
|
||||
```bash
|
||||
cd web/backend
|
||||
npm install
|
||||
npm run dev
|
||||
```
|
||||
|
||||
El backend estará disponible en `http://localhost:3001`
|
||||
|
||||
**Endpoints**:
|
||||
- API: `http://localhost:3001/api/*`
|
||||
- WebSocket: `ws://localhost:3001/ws`
|
||||
|
||||
### 2. Dashboard (Vue)
|
||||
|
||||
```bash
|
||||
cd web/dashboard
|
||||
npm install
|
||||
npm run dev
|
||||
```
|
||||
|
||||
El dashboard estará disponible en `http://localhost:3000`
|
||||
|
||||
**Nota**: Vite está configurado con proxy automático:
|
||||
- `/api/*` → `http://localhost:3001/api/*`
|
||||
- `/ws` → `ws://localhost:3001/ws`
|
||||
|
||||
Esto significa que puedes hacer peticiones a `/api/users` desde el dashboard y automáticamente se redirigirán al backend.
|
||||
|
||||
### 3. Landing (Astro)
|
||||
|
||||
```bash
|
||||
cd web/landing
|
||||
npm install
|
||||
npm run dev
|
||||
```
|
||||
|
||||
La landing estará disponible en `http://localhost:3002`
|
||||
|
||||
## Ejecutar con Docker (Producción)
|
||||
|
||||
```bash
|
||||
# Construir imágenes
|
||||
docker-compose build
|
||||
|
||||
# Iniciar servicios
|
||||
docker-compose up -d
|
||||
|
||||
# Ver logs
|
||||
docker-compose logs -f
|
||||
|
||||
# Detener servicios
|
||||
docker-compose down
|
||||
```
|
||||
|
||||
Todo estará disponible en `http://localhost`:
|
||||
- Landing: `http://localhost/`
|
||||
- Dashboard: `http://localhost/dashboard/`
|
||||
- API: `http://localhost/api/`
|
||||
|
||||
## Reconstruir después de cambios
|
||||
|
||||
### Cambios en código (desarrollo)
|
||||
|
||||
No es necesario hacer nada, Vite y Node tienen hot-reload automático.
|
||||
|
||||
### Cambios en configuración o Docker
|
||||
|
||||
```bash
|
||||
# Reconstruir servicio específico
|
||||
docker-compose build dashboard
|
||||
docker-compose build backend
|
||||
docker-compose build landing
|
||||
|
||||
# Reconstruir todo
|
||||
docker-compose build
|
||||
|
||||
# Reiniciar servicios
|
||||
docker-compose up -d
|
||||
```
|
||||
|
||||
## Diferencias entre Desarrollo y Producción
|
||||
|
||||
### Dashboard
|
||||
- **Desarrollo**:
|
||||
- Puerto 3000
|
||||
- Vite proxy activo para `/api` y `/ws`
|
||||
- Hot Module Replacement (HMR)
|
||||
- Source maps
|
||||
|
||||
- **Producción**:
|
||||
- Puerto 80 (interno)
|
||||
- Sin proxy (nginx principal maneja todo)
|
||||
- Código minificado y optimizado
|
||||
- Assets con hash para cache
|
||||
|
||||
### Backend
|
||||
- **Desarrollo**:
|
||||
- Puerto 3001
|
||||
- `node --watch` para auto-reload
|
||||
- Variables de entorno por defecto
|
||||
|
||||
- **Producción**:
|
||||
- Puerto 3001 (interno)
|
||||
- `node` sin watch
|
||||
- Variables de entorno de Docker
|
||||
|
||||
### Landing
|
||||
- **Desarrollo**:
|
||||
- Puerto 3002
|
||||
- Servidor de desarrollo de Astro
|
||||
- Hot reload
|
||||
|
||||
- **Producción**:
|
||||
- Puerto 80 (interno)
|
||||
- Archivos estáticos servidos por nginx
|
||||
- Pre-renderizado
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Puerto ya en uso
|
||||
|
||||
```bash
|
||||
# Ver qué está usando el puerto
|
||||
lsof -i :3000 # Dashboard
|
||||
lsof -i :3001 # Backend
|
||||
lsof -i :3002 # Landing
|
||||
|
||||
# Matar proceso
|
||||
kill -9 <PID>
|
||||
```
|
||||
|
||||
### Proxy no funciona en desarrollo
|
||||
|
||||
Asegúrate de que:
|
||||
1. El backend está corriendo en el puerto 3001
|
||||
2. Estás ejecutando `npm run dev` (modo desarrollo)
|
||||
3. La configuración de proxy en `vite.config.js` está correcta
|
||||
|
||||
### Assets 404 en producción
|
||||
|
||||
Ver `NGINX_CONFIG.md` para detalles de configuración de nginx y assets.
|
||||
|
||||
## Variables de Entorno
|
||||
|
||||
### Backend (desarrollo local)
|
||||
|
||||
Crear archivo `.env` en `web/backend/`:
|
||||
|
||||
```env
|
||||
PORT=3001
|
||||
PROJECT_ROOT=/ruta/al/proyecto
|
||||
MONGODB_HOST=localhost
|
||||
MONGODB_PORT=27017
|
||||
MONGODB_DATABASE=wallabicher
|
||||
MONGODB_USERNAME=admin
|
||||
MONGODB_PASSWORD=adminpassword
|
||||
```
|
||||
|
||||
### Backend (Docker)
|
||||
|
||||
Las variables se configuran en `docker-compose.yml`:
|
||||
- `PORT=3001`
|
||||
- `PROJECT_ROOT=/data`
|
||||
- Credenciales de MongoDB
|
||||
|
||||
## Base URLs
|
||||
|
||||
### Dashboard
|
||||
|
||||
La configuración de `base: '/dashboard/'` en `vite.config.js` hace que:
|
||||
- Todos los assets se construyan con prefijo `/dashboard/`
|
||||
- Vue Router use `/dashboard` como base
|
||||
- Service Worker se registre en `/dashboard/sw.js`
|
||||
|
||||
**No cambiar** a menos que quieras cambiar la ruta del dashboard.
|
||||
|
||||
### Landing
|
||||
|
||||
Sin base (raíz por defecto). Se sirve desde `/`.
|
||||
|
||||
**No cambiar** a menos que quieras mover la landing a otra ruta.
|
||||
|
||||
Reference in New Issue
Block a user