planetazuzu/codigo0
1
0
Fork 0
Code Issues Pull requests Actions 1 Packages Projects Releases Wiki Activity

docs: añadir análisis tecnológico completo del proyecto

Browse source
This commit is contained in:
planetazuzu 2025-12-21 14:28:05 +01:00
parent 7496ef4bd7
commit 1151ded301
4 changed files with 1168 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

584
ANALISIS_TECNOLOGICO_PROYECTO.md Normal file
View file

@ -0,0 +1,584 @@
# 📊 Análisis Tecnológico Completo del Proyecto
**Proyecto:** EMERGES TES - Protocolo Rápido
**Fecha de Análisis:** 2024-12-19
**Ruta del Proyecto:** `/home/planetazuzu/protocolo-r-pido`
---
## 1. 🎯 TECNOLOGÍAS PRINCIPALES
### 1.1 Lenguaje de Programación
- **TypeScript 5.8.3** (lenguaje principal)
- Configuración: `tsconfig.json`, `tsconfig.app.json`, `tsconfig.node.json`
- Modo: ESNext modules, bundler mode
- JSX: `react-jsx`
- Target: ES2020 (app), ES2022 (node)
### 1.2 Framework Frontend
- **React 18.3.1** (framework principal)
- React DOM 18.3.1
- React Router DOM 6.30.1 (navegación SPA)
- React Hook Form 7.61.1 (formularios)
- React Markdown 10.1.0 (renderizado Markdown)
### 1.3 Herramientas de Build y Empaquetado
- **Vite 5.4.19** (build tool principal)
- Plugin: `@vitejs/plugin-react-swc` 3.11.0 (compilación rápida con SWC)
- Code splitting configurado (manual chunks)
- Soporte para PWA
- Configuración para GitHub Pages
### 1.4 Estilos y UI
- **Tailwind CSS 3.4.17** (framework CSS)
- Plugins:
- `tailwindcss-animate` 1.0.7
- `@tailwindcss/typography` 0.5.16
- PostCSS 8.5.6
- Autoprefixer 10.4.21
- **shadcn/ui** (sistema de componentes)
- Basado en Radix UI
- Componentes accesibles y personalizables
- 40+ componentes UI implementados
- **Radix UI** (primitivos UI accesibles)
- 30+ componentes @radix-ui/*
### 1.5 Procesamiento de Contenido
- **Markdown Processing:**
- `react-markdown` 10.1.0
- `remark-gfm` 4.0.1 (GitHub Flavored Markdown)
- `remark-frontmatter` 5.0.0
- `rehype-highlight` 7.0.2 (syntax highlighting)
- `rehype-raw` 7.0.0
- `rehype-sanitize` 6.0.0
- `unified` 11.0.5
### 1.6 Gestión de Estado y Datos
- **TanStack Query 5.83.0** (React Query)
- Gestión de estado del servidor
- Caché y sincronización
- **LocalStorage/SessionStorage**
- Favoritos (localStorage)
- Historial de búsqueda (sessionStorage)
- Configuración de tema
### 1.7 PWA (Progressive Web App)
- **Service Worker** (`public/sw.js`)
- Estrategia: Cache First
- Versionado de caché
- Actualizaciones automáticas
- **Web App Manifest** (`public/manifest.json`)
- Configuración PWA completa
- Iconos y temas
### 1.8 Utilidades y Librerías Clave
- **Validación:** Zod 3.25.76
- **Fechas:** date-fns 3.6.0
- **Iconos:** lucide-react 0.462.0
- **Temas:** next-themes 0.3.0
- **Notificaciones:** sonner 1.7.4
- **Gráficos:** recharts 2.15.4
- **Carousel:** embla-carousel-react 8.6.0
- **Comandos:** cmdk 1.1.1
- **Utilidades CSS:** clsx 2.1.1, tailwind-merge 2.6.0
---
## 2. 🏗️ ESTRUCTURA DEL PROYECTO
### 2.1 Tipo de Arquitectura
**SPA (Single Page Application)**
- Arquitectura: Frontend monolítico
- Routing: Client-side (React Router)
- Build: Estático (Vite)
- Despliegue: Archivos estáticos en `dist/`
### 2.2 Carpetas Principales
```
protocolo-r-pido/
├── .github/ # GitHub Actions workflows
│ └── workflows/
│ └── deploy.yml # Auto-deploy a servidor
├── public/ # Archivos estáticos públicos
│ ├── assets/ # Imágenes e infografías
│ │ └── infografias/ # Imágenes organizadas por bloque
│ ├── manual/ # Archivos Markdown del manual (78 archivos)
│ ├── manifest.json # PWA manifest
│ ├── sw.js # Service Worker
│ ├── favicon.svg # Favicon
│ └── robots.txt # SEO
├── src/ # Código fuente principal
│ ├── components/ # Componentes React
│ │ ├── content/ # MarkdownViewer
│ │ ├── drugs/ # Componentes de fármacos
│ │ ├── layout/ # Header, Footer, Navigation
│ │ ├── procedures/ # Protocolos
│ │ ├── tools/ # Calculadoras médicas
│ │ └── ui/ # Componentes shadcn/ui (40+)
│ ├── data/ # Datos estáticos TypeScript
│ │ ├── drugs.ts # Vademécum
│ │ ├── procedures.ts # Protocolos
│ │ ├── manual-index.ts # Índice del manual (2500+ líneas)
│ │ └── image-registry.ts # Registry de imágenes
│ ├── hooks/ # Custom React hooks
│ │ ├── useFavorites.ts
│ │ ├── usePWAInstall.ts
│ │ ├── useServiceWorker.ts
│ │ └── useSearchHistory.ts
│ ├── lib/ # Utilidades
│ │ └── utils.ts # Funciones helper
│ ├── pages/ # Páginas principales (20+)
│ ├── utils/ # Utilidades específicas
│ ├── App.tsx # Componente raíz
│ ├── main.tsx # Entry point
│ └── index.css # Estilos globales
├── scripts/ # Scripts Python y shell
│ ├── verificar-manual.ts # Verificación TypeScript
│ └── *.py # Scripts de organización
├── docs/ # Documentación
├── _BACKUP_MD/ # Backups (203 archivos)
├── imagenes-pendientes/ # Imágenes pendientes (60 archivos)
└── [Archivos de configuración]
```
### 2.3 Configuraciones Detectadas
**Build & Development:**
- `vite.config.ts` - Configuración Vite (code splitting, aliases, PWA)
- `tsconfig.json` - TypeScript base
- `tsconfig.app.json` - TypeScript para app
- `tsconfig.node.json` - TypeScript para Node (configs)
**Estilos:**
- `tailwind.config.ts` - Configuración Tailwind (tema, colores, animaciones)
- `postcss.config.js` - PostCSS (Tailwind + Autoprefixer)
**Linting:**
- `eslint.config.js` - ESLint 9.32.0 (flat config)
- `eslint-plugin-react-hooks` 5.2.0
- `eslint-plugin-react-refresh` 0.4.20
- `typescript-eslint` 8.38.0
**Deployment:**
- `ecosystem.config.js` - PM2 (puerto 8607)
- `deploy.sh` - Script de despliegue
- `webhook-deploy.sh` - Webhook handler
- `.github/workflows/deploy.yml` - GitHub Actions
- `vercel.json` - Configuración Vercel
- `netlify.toml` - Configuración Netlify
- `nginx.conf.example` - Ejemplo Nginx
- `public/_redirects` - Netlify redirects
- `public/.htaccess` - Apache config
**PWA:**
- `public/manifest.json` - Web App Manifest
- `public/sw.js` - Service Worker
- `vite-plugin-manifest.js` - Plugin personalizado
**UI Components:**
- `components.json` - Configuración shadcn/ui
---
## 3. 📦 DEPENDENCIAS
### 3.1 Gestión de Dependencias
- **Sistema:** npm (Node Package Manager)
- **Archivo:** `package.json`
- **Type:** `module` (ESM)
- **Node.js:** Requiere 18+
### 3.2 Dependencias de Producción (75 paquetes)
**Core:**
- react ^18.3.1
- react-dom ^18.3.1
- react-router-dom ^6.30.1
**UI Framework:**
- @radix-ui/* (30+ componentes)
- tailwindcss ^3.4.17
- tailwindcss-animate ^1.0.7
- @tailwindcss/typography ^0.5.16
**Markdown:**
- react-markdown ^10.1.0
- remark-gfm ^4.0.1
- remark-frontmatter ^5.0.0
- rehype-highlight ^7.0.2
- rehype-raw ^7.0.0
- rehype-sanitize ^6.0.0
- unified ^11.0.5
**State & Data:**
- @tanstack/react-query ^5.83.0
- react-hook-form ^7.61.1
- zod ^3.25.76
**Utilities:**
- date-fns ^3.6.0
- lucide-react ^0.462.0
- next-themes ^0.3.0
- sonner ^1.7.4
- clsx ^2.1.1
- tailwind-merge ^2.6.0
**Other:**
- recharts ^2.15.4
- embla-carousel-react ^8.6.0
- cmdk ^1.1.1
- vaul ^0.9.9
### 3.3 Dependencias de Desarrollo (15 paquetes)
**Build Tools:**
- vite ^5.4.19
- @vitejs/plugin-react-swc ^3.11.0
- typescript ^5.8.3
**Linting:**
- eslint ^9.32.0
- @eslint/js ^9.32.0
- typescript-eslint ^8.38.0
- eslint-plugin-react-hooks ^5.2.0
- eslint-plugin-react-refresh ^0.4.20
**CSS Processing:**
- tailwindcss ^3.4.17
- postcss ^8.5.6
- autoprefixer ^10.4.21
**Type Definitions:**
- @types/node ^22.16.5
- @types/react ^18.3.23
- @types/react-dom ^18.3.7
**Utilities:**
- tsx ^4.21.0 (TypeScript execution)
- raw-loader ^4.0.2
- globals ^15.15.0
### 3.4 Versiones de Herramientas
- **Node.js:** 18+ (recomendado)
- **npm:** Compatible con Node 18+
- **TypeScript:** 5.8.3
- **React:** 18.3.1
- **Vite:** 5.4.19
---
## 4. 🛠️ ENTORNO DE DESARROLLO
### 4.1 Archivos de Configuración de IDE
**VSCode:**
- `.vscode/extensions.json` (si existe)
- Configuración TypeScript en `tsconfig.json`
**Otros:**
- `.idea/` (ignorado en .gitignore)
- `.DS_Store` (ignorado)
### 4.2 Scripts de Ejecución
**package.json scripts:**
```json
{
"dev": "vite", // Desarrollo (puerto 8096)
"build": "vite build", // Build producción
"build:dev": "vite build --mode development",
"build:github": "GITHUB_PAGES=true ...", // Build para GitHub Pages
"build:production": "NODE_ENV=production vite build",
"preview": "vite preview --host", // Preview build
"start:production": "npx serve -s dist -l 8607", // Servir producción
"lint": "eslint .", // Linter
"verify:manual": "tsx scripts/verificar-manual.ts" // Verificación
}
```
**Scripts Shell:**
- `deploy.sh` - Deploy completo (git pull + build + PM2)
- `webhook-deploy.sh` - Handler webhook
- `servir-local.sh` - Servir localmente
### 4.3 Variables de Entorno
**Archivos:**
- `.env` (ignorado, no existe en repo)
- `.env.local` (ignorado)
- `.env.production` (ignorado)
- `.env.development` (ignorado)
- `env.example` (ejemplo, existe)
**Variables usadas:**
- `GITHUB_PAGES` - Para builds de GitHub Pages
- `GITHUB_REPOSITORY_NAME` - Nombre del repo
- `NODE_ENV` - Entorno (development/production)
- `BASE_URL` - Base path dinámico (Vite)
### 4.4 Configuración de Desarrollo
**Puertos:**
- Desarrollo: `8096` (vite.config.ts)
- Preview: `4173` (Vite default)
- Producción: `8607` (ecosystem.config.js, package.json)
**Hot Reload:**
- ✅ Habilitado en desarrollo (Vite HMR)
- ✅ Fast Refresh (React)
**Code Splitting:**
- ✅ Configurado en `vite.config.ts`
- ✅ Lazy loading de páginas (React.lazy)
- ✅ Manual chunks por librería
---
## 5. 📁 ESTRUCTURA DE ARCHIVOS ESPECÍFICA
### 5.1 Archivos de Configuración Raíz
```
├── package.json # Dependencias y scripts
├── vite.config.ts # Configuración Vite
├── tsconfig.json # TypeScript base
├── tsconfig.app.json # TypeScript app
├── tsconfig.node.json # TypeScript node
├── tailwind.config.ts # Tailwind CSS
├── postcss.config.js # PostCSS
├── eslint.config.js # ESLint
├── components.json # shadcn/ui config
├── ecosystem.config.js # PM2 config
├── deploy.sh # Script deploy
├── webhook-deploy.sh # Webhook handler
├── vercel.json # Vercel config
├── netlify.toml # Netlify config
├── nginx.conf.example # Nginx example
├── .gitignore # Git ignore
└── README.md # Documentación
```
### 5.2 Contenido Estático
**Markdown Manual:**
- `public/manual/` - 78 archivos .md organizados por bloques
- `MANUAL_TES_DIGITAL/` - 110 archivos .md (backup/alternativo)
**Imágenes:**
- `public/assets/infografias/` - 46+ imágenes PNG/SVG organizadas
- `imagenes-pendientes/` - 60 imágenes pendientes de organizar
**Otros:**
- `_BACKUP_MD/` - 203 archivos de backup (129 .md, 62 .docx, 7 .py)
### 5.3 Scripts y Utilidades
**Python Scripts:**
- `analisis_profundo_contenido.py`
- `buscar_multimedia_exhaustivo.py`
- `buscar_multimedia_faltante.py`
- `copiar_archivos_manual.py`
- `generar_documento_word.py`
- `generar_indice_app.py`
- `generar_reportes_app.py`
- `mejorar_reporte_1.py`
- `scripts/*.py` - Scripts de organización
**TypeScript Scripts:**
- `scripts/verificar-manual.ts` - Verificación de manual
**Shell Scripts:**
- `deploy.sh` - Deploy
- `webhook-deploy.sh` - Webhook
- `servir-local.sh` - Servir local
- `reorganizar_proyecto.sh` - Reorganización
---
## 6. 🔍 CARACTERÍSTICAS TÉCNICAS DETECTADAS
### 6.1 Arquitectura de Código
- ✅ **Component-based:** React components
- ✅ **Type-safe:** TypeScript en todo el código
- ✅ **Modular:** Separación clara de concerns
- ✅ **Lazy Loading:** React.lazy para páginas
- ✅ **Code Splitting:** Manual chunks en Vite
### 6.2 PWA Features
- ✅ Service Worker con versionado
- ✅ Web App Manifest completo
- ✅ Offline-first strategy
- ✅ Install banner
- ✅ Update notifications
### 6.3 Performance Optimizations
- ✅ Code splitting (manual chunks)
- ✅ Lazy loading de páginas
- ✅ Image lazy loading
- ✅ Memoization (React.memo, useMemo, useCallback)
- ✅ Optimización de INP (Interaction to Next Paint)
### 6.4 SEO y Accesibilidad
- ✅ Meta tags en index.html
- ✅ robots.txt
- ✅ Semantic HTML
- ✅ ARIA labels (Radix UI)
- ✅ Dark mode support
---
## 7. 📊 ESTADÍSTICAS DEL PROYECTO
### 7.1 Archivos por Tipo
- **TypeScript/TSX:** ~136 archivos en `src/`
- **Markdown:** 78 archivos en `public/manual/` + 110 en backup
- **Imágenes:** 46+ en `public/assets/` + 60 pendientes
- **Componentes UI:** 40+ componentes shadcn/ui
- **Páginas:** 20+ páginas React
- **Hooks:** 4 custom hooks
- **Data Files:** 12 archivos TypeScript de datos
### 7.2 Líneas de Código (estimado)
- `src/data/manual-index.ts`: 2500+ líneas
- `src/App.tsx`: ~130 líneas
- `vite.config.ts`: ~168 líneas
- Total TypeScript/TSX: ~15,000+ líneas (estimado)
### 7.3 Dependencias
- **Producción:** 75 paquetes
- **Desarrollo:** 15 paquetes
- **Total:** 90 paquetes npm
---
## 8. 🚀 DESPLIEGUE Y CI/CD
### 8.1 Plataformas de Despliegue Configuradas
1. **Servidor Propio (PM2)**
- Puerto: 8607
- Script: `deploy.sh`
- Config: `ecosystem.config.js`
2. **GitHub Actions**
- Workflow: `.github/workflows/deploy.yml`
- Auto-deploy en push a main
3. **Vercel**
- Config: `vercel.json`
- SPA routing configurado
4. **Netlify**
- Config: `netlify.toml`
- Redirects: `public/_redirects`
5. **GitHub Pages**
- Build script: `build:github`
- Base path dinámico
6. **Apache**
- Config: `public/.htaccess`
- SPA routing
7. **Nginx**
- Example: `nginx.conf.example`
- Reverse proxy
### 8.2 Estrategias de Despliegue
- ✅ **Static Build:** `dist/` con archivos estáticos
- ✅ **SPA Routing:** Configurado para todas las plataformas
- ✅ **Auto-deploy:** GitHub Actions
- ✅ **Manual Deploy:** Scripts shell
---
## 9. 📝 DOCUMENTACIÓN
### 9.1 Archivos de Documentación (40+ archivos .md)
**Despliegue:**
- `DEPLOYMENT_SERVER.md`
- `DEPLOYMENT_GITHUB.md`
- `VERCEL_DEPLOYMENT.md`
- `RESUMEN_DEPLOY_8607.md`
**PWA:**
- `VERIFICACION_PWA.md`
- `TEST_PWA.md`
- `CHECKLIST_PWA_COMPLETA.md`
- `GUIA_DEBUG_PWA_INSTALL.md`
- `RESUMEN_PWA_INSTALACION.md`
**Contenido:**
- `FASE_1_FALTANTE_DETALLADO.md`
- `ANALISIS_COMPLETO_FALTANTE.md`
- `SISTEMA_MEDIOS_VISUALES.md`
- `PLAN_ESTRUCTURA_PSIQUIATRIA.md`
**Otros:**
- `README.md`
- `ESTADO_FUNCIONALIDADES.md`
- `SPA_ROUTING_CONFIG.md`
- Y muchos más...
---
## 10. ✅ RESUMEN EJECUTIVO
### Stack Tecnológico Principal
```
Frontend: React 18 + TypeScript 5.8
Build: Vite 5.4
Styling: Tailwind CSS 3.4 + shadcn/ui
Routing: React Router 6.3
State: TanStack Query 5.8 + LocalStorage
PWA: Service Worker + Manifest
Markdown: react-markdown + remark/rehype
Deploy: PM2 (puerto 8607) + GitHub Actions
```
### Tipo de Proyecto
- **Aplicación:** SPA (Single Page Application)
- **Arquitectura:** Frontend monolítico
- **Build:** Estático (archivos estáticos)
- **Target:** PWA offline-first
- **Uso:** Médico/emergencias (crítico)
### Puntos Clave para Limpieza
1. **Backups:** `_BACKUP_MD/` (203 archivos) - considerar mover/eliminar
2. **Imágenes pendientes:** `imagenes-pendientes/` (60 archivos)
3. **Documentación:** 40+ archivos .md (algunos pueden consolidarse)
4. **Scripts Python:** 10+ scripts (algunos pueden estar obsoletos)
5. **Configuraciones múltiples:** 7 plataformas de deploy (mantener solo las usadas)
---
**Análisis completado:** 2024-12-19
**Próximo paso:** Identificar archivos obsoletos y redundantes para limpieza

442
DEPLOYMENT_SERVER.md Normal file
View file

@ -0,0 +1,442 @@
# 🚀 Guía de Despliegue en Servidor (Puerto 8607)
Esta guía explica cómo desplegar EMERGES TES en tu servidor propio con auto-actualización desde GitHub.
---
## 📋 Requisitos Previos
- **Servidor Linux** (Ubuntu/Debian recomendado)
- **Node.js 18+** instalado
- **npm** instalado
- **PM2** instalado globalmente
- **Git** instalado
- **Acceso SSH** al servidor
- **Puerto 8607** disponible
---
## 🔧 Instalación Inicial
### 1. Instalar Node.js y npm
```bash
# Usando nvm (recomendado)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
source ~/.bashrc
nvm install 18
nvm use 18
# O usando apt (Ubuntu/Debian)
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get install -y nodejs
```
### 2. Instalar PM2
```bash
npm install -g pm2
```
### 3. Clonar el repositorio
```bash
cd /ruta/donde/quieres/la/app
git clone https://github.com/tu-usuario/guia-tes-digital.git
cd guia-tes-digital
```
### 4. Configurar el script de deploy
```bash
# Hacer el script ejecutable
chmod +x deploy.sh
# Probar el script manualmente
./deploy.sh
```
---
## 🚀 Despliegue Manual
### Opción 1: Script de Deploy Rápido
```bash
./deploy.sh
```
Este script:
1. ✅ Actualiza código desde GitHub (`git pull`)
2. ✅ Instala dependencias (`npm ci`)
3. ✅ Construye la aplicación (`npm run build`)
4. ✅ Reinicia PM2 en puerto 8607
### Opción 2: Deploy sin actualizar Git
Si ya tienes el código actualizado:
```bash
./deploy.sh --skip-git
```
---
## 🔄 Auto-Deploy desde GitHub
Tienes **3 opciones** para auto-actualizar cuando haces push a GitHub:
### Opción 1: GitHub Actions (Recomendado) ⭐
**Ventajas:**
- ✅ No requiere configuración en el servidor
- ✅ Ejecuta el build en GitHub (más rápido)
- ✅ Historial de deployments en GitHub
- ✅ Notificaciones automáticas
**Configuración:**
1. **Añadir secrets en GitHub:**
- Ve a: `Settings > Secrets and variables > Actions`
- Añade estos secrets:
- `SERVER_HOST`: IP o dominio de tu servidor
- `SERVER_USER`: Usuario SSH (ej: `root` o `ubuntu`)
- `SERVER_SSH_KEY`: Clave privada SSH (contenido completo)
- `SERVER_PORT`: Puerto SSH (opcional, default: 22)
- `APP_PATH`: Ruta completa donde está la app (ej: `/home/usuario/guia-tes-digital`)
2. **El workflow ya está configurado:**
- Archivo: `.github/workflows/deploy.yml`
- Se ejecuta automáticamente en cada push a `main`
3. **Probar manualmente:**
- Ve a: `Actions > Auto Deploy to Server > Run workflow`
**Nota:** El workflow usa `deploy.sh --skip-git` porque el código ya está en el servidor.
---
### Opción 2: Webhook de GitHub
**Ventajas:**
- ✅ Ejecuta directamente en el servidor
- ✅ Más control sobre el proceso
**Configuración:**
1. **Instalar dependencias en el servidor:**
```bash
sudo apt-get install -y jq # Para parsear JSON
```
2. **Configurar webhook handler:**
```bash
# Editar webhook-deploy.sh
nano webhook-deploy.sh
# Cambiar:
SECRET="tu-secret-seguro-aqui"
APP_PATH="/ruta/completa/a/tu/app"
```
3. **Crear servicio webhook (usando Node.js simple o nginx):**
**Opción A: Servidor Node.js simple (webhook-server.js):**
```javascript
const http = require('http');
const { exec } = require('child_process');
const crypto = require('crypto');
const SECRET = 'tu-secret';
const PORT = 9000;
const APP_PATH = '/ruta/a/tu/app';
http.createServer((req, res) => {
if (req.method === 'POST' && req.url === '/webhook') {
let body = '';
req.on('data', chunk => body += chunk);
req.on('end', () => {
const payload = JSON.parse(body);
if (payload.ref === 'refs/heads/main') {
exec(`cd ${APP_PATH} && ./deploy.sh --skip-git`, (error, stdout, stderr) => {
console.log(stdout);
if (error) console.error(stderr);
});
}
res.writeHead(200);
res.end('OK');
});
} else {
res.writeHead(404);
res.end('Not Found');
}
}).listen(PORT);
```
**Ejecutar con PM2:**
```bash
pm2 start webhook-server.js --name webhook-deploy
pm2 save
```
4. **Configurar webhook en GitHub:**
- Ve a: `Settings > Webhooks > Add webhook`
- **Payload URL:** `http://tu-servidor:9000/webhook`
- **Content type:** `application/json`
- **Secret:** (el mismo que configuraste en el script)
- **Events:** Solo `push`
---
### Opción 3: Polling con Cron
**Ventajas:**
- ✅ Simple, no requiere configuración externa
- ✅ Funciona sin abrir puertos adicionales
**Configuración:**
1. **Crear script de polling:**
```bash
nano /usr/local/bin/check-github-updates.sh
```
```bash
#!/bin/bash
cd /ruta/a/tu/app
git fetch origin
if [ $(git rev-parse HEAD) != $(git rev-parse origin/main) ]; then
./deploy.sh
fi
```
2. **Hacer ejecutable:**
```bash
chmod +x /usr/local/bin/check-github-updates.sh
```
3. **Configurar cron (cada 5 minutos):**
```bash
crontab -e
```
Añadir:
```
*/5 * * * * /usr/local/bin/check-github-updates.sh >> /var/log/github-poll.log 2>&1
```
---
## 🔍 Verificación y Monitoreo
### Verificar que la app está corriendo
```bash
# Ver estado de PM2
pm2 list
# Ver logs en tiempo real
pm2 logs emerges-tes
# Ver monitor de recursos
pm2 monit
# Verificar que el puerto 8607 está escuchando
netstat -tlnp | grep 8607
# O
ss -tlnp | grep 8607
```
### Acceder a la aplicación
- **Local:** `http://localhost:8607`
- **Red:** `http://tu-servidor-ip:8607`
- **Dominio:** `http://tu-dominio.com:8607`
---
## 🔒 Configurar Nginx como Reverse Proxy (Opcional)
Si quieres usar un dominio y puerto 80/443:
```nginx
server {
listen 80;
server_name tu-dominio.com;
location / {
proxy_pass http://localhost:8607;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}
```
Luego:
```bash
sudo nginx -t
sudo systemctl reload nginx
```
---
## 🛠️ Comandos Útiles
### PM2
```bash
# Iniciar aplicación
pm2 start ecosystem.config.js
# Reiniciar aplicación
pm2 restart emerges-tes
# Detener aplicación
pm2 stop emerges-tes
# Ver logs
pm2 logs emerges-tes
# Ver logs de las últimas 100 líneas
pm2 logs emerges-tes --lines 100
# Reiniciar automáticamente al reiniciar el servidor
pm2 startup
pm2 save
```
### Deploy
```bash
# Deploy completo (con git pull)
./deploy.sh
# Deploy sin git pull (útil para webhooks)
./deploy.sh --skip-git
# Ver qué haría el deploy sin ejecutarlo
bash -n deploy.sh # Verifica sintaxis
```
### Git
```bash
# Verificar estado
git status
# Ver últimos commits
git log --oneline -5
# Forzar actualización
git fetch origin
git reset --hard origin/main
```
---
## 🐛 Solución de Problemas
### Error: "PM2 no está instalado"
```bash
npm install -g pm2
```
### Error: "Puerto 8607 ya en uso"
```bash
# Ver qué proceso usa el puerto
sudo lsof -i :8607
# O
sudo netstat -tlnp | grep 8607
# Detener PM2 y reiniciar
pm2 stop emerges-tes
pm2 restart emerges-tes
```
### Error: "Build falla"
```bash
# Limpiar y reinstalar
rm -rf node_modules dist
npm ci
npm run build
```
### Error: "Git pull falla"
```bash
# Verificar permisos
ls -la .git
# Verificar remoto
git remote -v
# Forzar actualización
git fetch origin
git reset --hard origin/main
```
### La app no se actualiza automáticamente
1. **Verificar GitHub Actions:**
- Ve a: `Actions` en GitHub
- Ver si el workflow se ejecutó
- Revisar logs
2. **Verificar webhook (si usas):**
- Ve a: `Settings > Webhooks` en GitHub
- Ver últimos deliveries
- Revisar logs del servidor
3. **Verificar cron (si usas):**
```bash
tail -f /var/log/github-poll.log
```
---
## 📝 Checklist de Despliegue
- [ ] Node.js 18+ instalado
- [ ] PM2 instalado globalmente
- [ ] Repositorio clonado
- [ ] `deploy.sh` es ejecutable
- [ ] `ecosystem.config.js` configurado para puerto 8607
- [ ] Primer deploy manual exitoso
- [ ] App accesible en `http://servidor:8607`
- [ ] Auto-deploy configurado (GitHub Actions, webhook, o cron)
- [ ] PM2 configurado para iniciar al boot (`pm2 startup`)
- [ ] Logs configurados y accesibles
---
## 🔐 Seguridad
- ✅ No exponer secrets en el código
- ✅ Usar HTTPS si es posible (Let's Encrypt)
- ✅ Configurar firewall (solo puertos necesarios)
- ✅ Mantener Node.js y dependencias actualizadas
- ✅ Usar secrets de GitHub para credenciales SSH
- ✅ Limitar acceso SSH (solo desde IPs conocidas)
---
## 📞 Soporte
Si tienes problemas:
1. Revisar logs: `pm2 logs emerges-tes`
2. Verificar estado: `pm2 list`
3. Probar deploy manual: `./deploy.sh`
4. Verificar puerto: `netstat -tlnp | grep 8607`
---
**Última actualización:** 2024-12-19

141
RESUMEN_DEPLOY_8607.md Normal file
View file

@ -0,0 +1,141 @@
# ✅ Resumen: Despliegue en Puerto 8607 Configurado
## 🎯 Lo que se ha configurado
### 1. **Configuración PM2 (Puerto 8607)**
- ✅ `ecosystem.config.js` actualizado para puerto 8607
- ✅ Configuración optimizada con límites de memoria
- ✅ Logs configurados en `./logs/`
### 2. **Script de Deploy Mejorado**
- ✅ `deploy.sh` con validaciones completas
- ✅ Soporte para `--skip-git` (útil para webhooks)
- ✅ Colores y logging mejorado
- ✅ Verificación de entorno (Node.js, npm, PM2)
- ✅ Verificación de build exitoso
### 3. **Auto-Deploy desde GitHub**
Tres opciones disponibles:
#### ⭐ Opción 1: GitHub Actions (Recomendado)
- ✅ Workflow creado: `.github/workflows/deploy.yml`
- ✅ Se ejecuta automáticamente en cada push a `main`
- ✅ Requiere configurar secrets en GitHub
#### Opción 2: Webhook de GitHub
- ✅ Script creado: `webhook-deploy.sh`
- ✅ Requiere servidor webhook en el servidor
#### Opción 3: Polling con Cron
- ✅ Documentado en `DEPLOYMENT_SERVER.md`
- ✅ Verifica cambios cada 5 minutos
### 4. **Documentación Completa**
- ✅ `DEPLOYMENT_SERVER.md` con guía paso a paso
- ✅ Solución de problemas
- ✅ Comandos útiles
- ✅ Checklist de despliegue
---
## 🚀 Próximos Pasos en el Servidor
### Paso 1: Configurar GitHub Actions (Recomendado)
1. **Añadir Secrets en GitHub:**
- Ve a: `https://github.com/tu-usuario/guia-tes-digital/settings/secrets/actions`
- Añade estos secrets:
```
SERVER_HOST = tu-servidor-ip-o-dominio
SERVER_USER = tu-usuario-ssh
SERVER_SSH_KEY = (contenido de tu clave privada SSH)
SERVER_PORT = 22 (o el puerto que uses)
APP_PATH = /ruta/completa/a/tu/app
```
2. **Probar el workflow:**
- Ve a: `Actions > Auto Deploy to Server > Run workflow`
- O simplemente haz un push a `main`
### Paso 2: Configuración Inicial en el Servidor
```bash
# 1. Clonar repositorio
cd /ruta/donde/quieres/la/app
git clone https://github.com/tu-usuario/guia-tes-digital.git
cd guia-tes-digital
# 2. Hacer ejecutable el script
chmod +x deploy.sh
# 3. Primer deploy manual
./deploy.sh
# 4. Verificar que funciona
pm2 list
pm2 logs emerges-tes
# 5. Configurar PM2 para iniciar al boot
pm2 startup
pm2 save
```
### Paso 3: Verificar Acceso
- **Local:** `http://localhost:8607`
- **Red:** `http://tu-servidor-ip:8607`
---
## 📋 Archivos Creados/Modificados
1. ✅ `ecosystem.config.js` - Configuración PM2 (puerto 8607)
2. ✅ `deploy.sh` - Script de deploy mejorado
3. ✅ `.github/workflows/deploy.yml` - GitHub Actions workflow
4. ✅ `webhook-deploy.sh` - Script webhook alternativo
5. ✅ `DEPLOYMENT_SERVER.md` - Documentación completa
6. ✅ `package.json` - Actualizado `start:production` a puerto 8607
---
## 🔍 Comandos Rápidos
```bash
# Deploy manual completo
./deploy.sh
# Deploy sin git pull (para webhooks)
./deploy.sh --skip-git
# Ver estado PM2
pm2 list
# Ver logs
pm2 logs emerges-tes
# Reiniciar manualmente
pm2 restart emerges-tes
```
---
## ⚠️ Importante
1. **Secrets de GitHub:** No compartas tus secrets públicamente
2. **SSH Key:** Usa una clave SSH dedicada para GitHub Actions
3. **Firewall:** Asegúrate de que el puerto 8607 esté abierto
4. **Permisos:** Verifica que el usuario tenga permisos para ejecutar PM2
---
## 📞 Si algo falla
1. Revisar logs: `pm2 logs emerges-tes`
2. Verificar estado: `pm2 list`
3. Probar deploy manual: `./deploy.sh`
4. Verificar puerto: `netstat -tlnp | grep 8607`
5. Revisar documentación: `DEPLOYMENT_SERVER.md`
---
**Todo está listo para desplegar en el puerto 8607 con auto-actualización desde GitHub! 🎉**

2
package.json
View file

@ -10,7 +10,7 @@
"build:github": "GITHUB_PAGES=true GITHUB_REPOSITORY_NAME=guia-tes-digital npm run build",
"build:production": "NODE_ENV=production vite build",
"preview": "vite preview --host",
"start:production": "npx serve -s dist -l 3000",
"start:production": "npx serve -s dist -l 8607",
"lint": "eslint .",
"verify:manual": "tsx scripts/verificar-manual.ts"
},