Los servicios de despliegue son plataformas que construyen y publican nuestra aplicación automáticamente a partir de un repositorio Git.
En la entrada anterior vimos cómo desplegar React en un VPS propio. Esa es la opción que más control nos da.
Ahora vamos a ver la alternativa cómoda: delegar el build, el hosting, el HTTPS y el despliegue automático en una plataforma externa.
Ojo, no es malo usar plataformas externas para el despliegue. Estas plataformas son muy útiles. Lo que no conviene es usarlas sin entender qué hacen por debajo (porque entonces cuando algo falla, toca rezar al panel de control).
Qué hacen estos servicios
La mayoría funcionan de una forma parecida:
- Conectáis un repositorio de GitHub, GitLab o Bitbucket.
- La plataforma detecta que es un proyecto Vite.
- Ejecuta
npm installynpm run build. - Publica la carpeta
dist. - Cada
git pushgenera un nuevo despliegue.
Para una aplicación React con Vite, la configuración clave casi siempre es la misma: Build Command npm run build y Output Directory dist.
¿Cuál elegir?
No hay una respuesta universal. Como orientación rápida:
| Caso | Opción razonable |
|---|---|
| Demo rápida o portfolio | Netlify, Vercel o Cloudflare Pages |
| Proyecto personal con dominio propio | VPS o Cloudflare Pages |
| Documentación sencilla | GitHub Pages |
| App seria donde queréis control | VPS |
| MVP donde prima velocidad | Vercel o Netlify |
Vercel
Vercel es muy popular, especialmente porque es la empresa detrás de Next.js. Para una app React con Vite, el flujo es bastante directo.
Importáis el repositorio.
Vercel detecta el framework.
Revisáis la configuración:
Framework Preset: Vite
Build Command: npm run build
Output Directory: dist
- Pulsáis Deploy.
Netlify
Netlify es otra opción muy cómoda para webs estáticas. El flujo es similar:
Build command: npm run build
Publish directory: dist
Para arreglar las rutas de React Router, cread un archivo llamado _redirects dentro de public:
/* /index.html 200
Como Vite copia public al build final, ese archivo acabará dentro de dist cuando hagáis npm run build.
GitHub Pages
GitHub Pages es útil para proyectos pequeños, documentación, demos y portfolios. Tiene una ventaja evidente: si el código ya está en GitHub, no hay que salir de GitHub.
Aquí hay dos detalles importantes:
- Normalmente necesitáis configurar
baseenvite.config.jssi publicáis en una ruta tipo/mi-repo/. - Las rutas SPA con React Router pueden ser más incómodas que en Vercel o Netlify.
Ejemplo de vite.config.js para un repositorio llamado mi-app:
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
export default defineConfig({
plugins: [react()],
base: "/mi-app/",
});
Si vais a usar GitHub Pages con React Router, valorad usar HashRouter para demos simples, o preparad una estrategia específica para redirecciones. GitHub Pages no es tan flexible como Nginx, Vercel o Netlify para este caso.
Cloudflare Pages
Cloudflare Pages es una alternativa muy interesante. Suele ir muy rápido, se integra con Git y encaja muy bien con sitios estáticos.
La configuración habitual:
Framework preset: Vite
Build command: npm run build
Build output directory: dist
Para rutas SPA, podéis crear un archivo _redirects en public, igual que en Netlify:
/* /index.html 200
Ventajas y límites
Estas plataformas aportan cosas muy cómodas, pero tienen sus peajes:
- Despliegues automáticos con cada
git push. - HTTPS gratis sin configurar Certbot.
- Preview deployments para probar ramas o pull requests.
- CDN global sin configurar Nginx ni cachés.
- Dependéis de las reglas, límites y precios de un tercero.
- Algunas configuraciones avanzadas son menos transparentes.
- Migrar puede ser molesto si os acostumbráis demasiado a una plataforma concreta.
- Cuando algo falla, muchas veces toca mirar logs dentro de su panel.
Mi recomendación es sencilla: aprended primero a desplegar en VPS y luego usad estos servicios cuando os convengan. Así los elegís por comodidad, no por dependencia.
