Desplegar tu app React/Vue en producción sin morir en el intento: Guía paso a paso desde cero

Comedy

Hola comunidad, llevo meses desarrollando una SPA con React (aunque aplica igual para Vue, Angular, etc.) y por fin la tengo lista para enseñar al mundo. El problema: siempre he trabajado en localhost y el despliegue me da pánico. He leído mil tutoriales contradictorios sobre Netlify, Vercel, AWS S3, Docker, Nginx... y me he hecho un lío monumental.

Quiero compartir mi proceso y que me ayudéis a corregirlo o completarlo. Mi objetivo es desplegar una app con:

Enrutamiento cliente (React Router / Vue Router) que funcione al refrescar.
Variables de entorno seguras.
Un dominio personalizado con HTTPS.
Un proceso que sea reproducible y no "mágico".

Mi plan actual (para Netlify) es:

1. Build: npm run build
2. Arrastrar la carpeta /dist o /build al dashboard de Netlify.
3. Configurar _redirects para el enrutamiento.
4. Añadir variables en la configuración del sitio.
5. Conectar el dominio.

¿Estoy olvidando algo crucial? ¿Es mejor Vercel para Next.js? ¿Cómo manejo las API keys sin quemarlas en el frontend? ¡Iluminadme!

Cars

Tu plan con Netlify es sólido para empezar. El paso que te falta detallar es el del archivo _redirects. Para que el enrutamiento funcione al refrescar en cualquier ruta, necesitas esta línea en el archivo (en la raíz de tu build):

/* /index.html 200

O, mejor aún, crea un netlify.toml en la raíz de tu proyecto con:

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Respecto a las API keys: nunca las pongas en variables de entorno del frontend. Se exponen al cliente. Para eso, usa funciones serverless (Netlify Functions, Vercel Serverless) que actúen como proxy. Tu frontend llama a tu función, y esa función, con la key segura, llama a la API externa.

Guitar

Discrepo un poco en lo de Netlify/Vercel. Si tu app es un SPA "tradicional", Netlify está bien. Pero si usas o planeas usar Next.js (que tiene renderizado híbrido), Vercel es la opción nativa y la experiencia es imbatible: detecta automáticamente el framework, configura los redirects y el caching por ti. El despliegue se hace con un simple push a Git.

Para el HTTPS y el dominio, ambos servicios lo gestionan automáticamente con Let's Encrypt. Solo compras el dominio y apuntas los DNS. Lo más "crucial" que se te olvida es la optimización post-build: compresión de assets, caching headers, y una CDN. Tanto Netlify como Vercel lo hacen por defecto, pero si vas a un S3 + CloudFront manual, tienes que configurarlo tú.

Comedy

¡Gracias por los aportes! Lo de las funciones serverless para las API keys es justo lo que no entendía. Pensaba que las variables de entorno del panel de Netlify ya eran seguras. Entonces, ¿la variable REACT_APP_API_KEY que defino en el panel se envía igual al cliente? ¿Solo es segura si la usa una función serverless, no el build de React?

Y sobre Vercel, tengo curiosidad. Si mi app es Create-React-App puro, sin SSR, ¿sigue siendo mejor Vercel o da igual?

Guitar

Exacto. Cualquier variable que prefijes con REACT_APP_ o VUE_APP_ se incrusta en el bundle JavaScript durante el build. Cualquiera que abra las herramientas de desarrollador puede ver su valor. Son útiles para cosas como URLs públicas de APIs, pero no para secretos.

Para un CRA puro, da prácticamente igual entre Netlify y Vercel. Elige el que te ofrezca mejor experiencia de desarrollo (integración con tu repo, preview deployments, etc.). Yo personalmente uso Vercel para todo por su velocidad y porque si algún día migro a Next.js, ya estoy allí.

Te dejo un ejemplo rápido de una Netlify Function (en /netlify/functions/proxy-api.js):

exports.handler = async (event) => {
  const apiKey = process.env.MY_SECRET_API_KEY;
  const response = await fetch('https://api.externa.com/data', {
    headers: { 'Authorization': `Bearer ${apiKey}` }
  });
  const data = await response.json();
  return { statusCode: 200, body: JSON.stringify(data) };
};

Luego en tu React, llamas a /.netlify/functions/proxy-api.

Coffee

Todo el mundo habla de plataformas PaaS (Netlify, Vercel, Render) pero nadie del despliegue "tradicional". Si quieres aprender de verdad y tener control total, monta un servidor VPS (DigitalOcean, Linode) con Docker y Nginx.

Pasos extra:

Dockeriza tu app (crea un Dockerfile multi-stage para build y serve con Nginx).
Sube la imagen a un registry (Docker Hub, GitHub Container Registry).
En tu VPS, despliega con docker-compose.
Configura Nginx como reverse proxy, gestiona el SSL con Certbot y sirve los estáticos.

Es más laborioso, pero entiendes cada capa. Para proyectos personales puede ser excesivo, pero para un portfolio técnico mola. Aquí tienes que gestionar tú el monitoreo, backups y escalabilidad.

Comedy

La opción del VPS y Docker la tengo en mente para un futuro, cuando el proyecto crezca. Ahora mismo priorizo salir a producción rápido y sin complicaciones. Con lo comentado, creo que voy a probar el flujo Netlify + Functions para las keys secretas.

Resumo mi checklist final basado en vuestra ayuda:

Build y despliegue automático desde Git.
Archivo netlify.toml para el redirect de SPA.
Variables públicas en el panel (para URLs base).
Secretos en funciones serverless, NUNCA en variables del frontend.
Conectar dominio y confiar en el HTTPS automático.

¡Muchas gracias a todos! Si a alguien le interesa, puedo subir el proyecto de ejemplo a GitHub con este flujo ya configurado.

Typography

Un último consejo que no he visto mencionar: los environment variables en el build. A veces necesitas tener valores distintos para desarrollo, staging y producción (como la URL de una API). Netlify y Vercel te permiten definir variables por branch (ej. production y develop). Así, cuando haces un deploy desde la rama main, se usan las variables de prod, y desde una feature branch, las de dev.

Y sí, por favor, sube el proyecto de ejemplo. Una guía práctica con repo es mucho más valiosa que mil posts teóricos. Podrías incluir un README con los pasos exactos, desde create-react-app hasta el dominio en producción.