React + Vite creados con IA: publicar una SPA con Nginx, SSL y dominio

Publicado el 2026-10-27 por frfrand

Cómo desplegar React Vite desde Lovable o Bolt: npm ci, build dist, try_files Nginx, HTTPS, variables y errores 404.

¿Tu app necesita Node.js ejecutándose siempre?

No si es realmente una SPA de React/Vite sin funciones servidor. En ese caso, la build genera archivos HTML, CSS y JavaScript que puede servir Nginx. Esto reduce la complejidad para muchas demos creadas con herramientas de IA. Pero no confundas una SPA con TanStack Start o Next.js SSR, que sí pueden exigir runtime de servidor.

Del código al build reproducible

Buscá los scripts en package.json y el lockfile. Un flujo habitual, si corresponde a tu repo, utiliza npm ci y npm run build. Esto crea dist/. Si la app usa React Router con URLs como /mi-cuenta/pedidos, el servidor debe devolver index.html en rutas del frontend no encontradas como archivo. Si falta esa regla, navegar desde el inicio puede funcionar pero refrescar una ruta profunda provoca 404.

Configuración ilustrativa de Nginx

location / {
    try_files $uri $uri/ /index.html;
}

Ejemplo: landing y área de clientes

Una empresa creó una landing en Lovable antiguo y una sección /panel. El archivo dist/index.html carga, pero /panel da 404 cuando el usuario vuelve desde un email. Configurás las rutas SPA, revisás conexiones a API y CORS, añadís SSL y probás las mismas URLs en móvil. Asegurás que las variables públicas no incluyan claves de pagos ni contraseñas SQL.

Pasos de verificación

1. Confirmá que sea React/Vite SPA y no un stack con runtime servidor. 2. Instalá dependencias según lockfile y ejecutá build limpio. 3. Desplegá el contenido de dist en el directorio Nginx correcto. 4. Configurá fallback SPA, HTTPS y caché de assets. 5. Probá recarga de rutas, formularios y llamadas API. 6. Publicá mediante proceso reversible y monitorizá 404.

Preguntas frecuentes

### ¿Se debe usar npm run dev en producción? No: debe publicarse la build, salvo arquitecturas específicas diferentes. ### ¿Puedo hacerlo sin Docker? Sí, Nginx puede servir archivos estáticos directamente. ### ¿Dónde va el password PostgreSQL? Del lado servidor, nunca en un frontend descargable. ### ¿Qué sucede si el proyecto usa TanStack Start? Necesita alojar también su parte de servidor.

Fuentes

Vite Production Build · Nginx · Lovable Deployment.

Dónde encaja ArduMaker

El VPS o los servicios de ArduMaker pueden ser el destino del código exportado si la arquitectura lo permite, junto con dominio, HTTPS y procesos de operación. Pero migrar la app no corrige automáticamente sus bugs, permisos ni el diseño de datos. En ardumaker.com/lovable (próximamente) se presentará el servicio especializado para migrar código generado por IA y convertirlo en una aplicación desplegada con revisión técnica. La página aún no está creada: para información actual consultá ArduMaker.

Revisión: octubre de 2026. Cada plataforma y sus modalidades de exportación cambian. Validá fuentes oficiales y trabajá sobre staging con datos de prueba.

Qué muestra la fotografía

Profesionales revisando una interfaz web y su código. Fotografía ilustrativa generada para este artículo sobre llevar código creado con IA a una aplicación de producción; no es una captura oficial de la herramienta ni demuestra una implementación específica.

Lecturas relacionadas de ArduMaker

- Pasar una web de Lovable a un VPS: Nginx, SSL y un dominio profesional - Desplegar Next.js creado con IA en un VPS: SSR, API Routes y Node.js - Migrar el dominio de Lovable sin perder SEO ni interrumpir una aplicación

Elegí entre mantener servicios gestionados o migrar a infraestructura propia a partir de pruebas y requerimientos, no de promesas de un solo clic.