Cómo hostear tu app Node + React en tu propia VPS (2/2)

En esta segunda parte rematamos el despliegue: le ponemos HTTPS gratis con Let’s Encrypt, dejamos Nginx fino como reverse proxy, probamos la app en vivo y, de yapa, te muestro cómo ver tus datos de MongoDB y cómo sumar una segunda app al mismo servidor sin romper nada.

Qué vas a aprender en este episodio

• Agregar HTTPS gratis con Certbot y renovar certificados automáticamente.
• Configurar Nginx como reverse proxy para tu backend Node y servir tu frontend React.
• Probar la app en producción y leer logs como corresponde.
• Conectarte a MongoDB del servidor de forma segura para mirar tus datos.
• Instalar una segunda aplicación (otro dominio/subdominio, otro puerto, otro certificado).

1) HTTPS con Certbot (Let’s Encrypt) sin vuelta

La base: tener un dominio apuntando a tu VPS y Nginx ya instalado y corriendo.

• DNS: creá un A record a la IP de tu VPS (por ejemplo, en Namecheap).
• Nginx: definí un server_name con tu dominio y dejá el sitio habilitado.
• Certbot: instalás certbot + plugin de Nginx, corrés sudo certbot --nginx -d tu-dominio.com -d www.tu-dominio.com y listo, te configura el server block con 443 y redirección 80→443.
• Renovación: systemctl status certbot.timer para asegurarte que el cron/daemon está activo. Podés testear con sudo certbot renew --dry-run.

Gotchas típicos:

• Asegurate de tener los puertos 80 y 443 abiertos en el firewall.
• Si usás múltiples sitios, cada uno necesita su server_name correcto y su propio certificado.

Recursos que menciono:

• Cómo instalar Nginx (DigitalOcean, en español)
• Cómo instalar Certbot con Nginx (DigitalOcean, en español)

2) Probando la app en vivo

La idea es que:

• El backend Node corra en un puerto interno (por ejemplo, 3001) y Nginx haga de reverse proxy en 443.
• El frontend React se sirva como estático desde Nginx (build de react-scripts) o, si preferís, que Nginx proxyé a un servidor estático.

Checklist rápido:

• Backend: corré tu app con PM2 o systemd. Ejemplo: pm2 start npm --name api -- start y que escuche en 127.0.0.1:3001.
• Nginx: location /api proxy_pass a http://127.0.0.1:3001/.
• Frontend: generás el build (npm run build) y lo servís en root /var/www/tu-frontend/build; con try_files $uri /index.html;.
• Logs: si algo no responde, mirá sudo journalctl -u nginx -f, pm2 logs, o sudo tail -f /var/log/nginx/error.log.

Repo de ejemplo:

• https://github.com/martin2844/deploy-example

3) Bonus: mirar tus datos de MongoDB sin abrir el puerto al mundo

No abras el 27017 a internet. Mejor:

• Dejá MongoDB bind sólo a 127.0.0.1.
• Hacé un túnel SSH desde tu máquina:
  • Con CLI: ssh -L 27017:127.0.0.1:27017 usuario@tu-servidor
  • Después, conectate con Compass o mongosh a mongodb://127.0.0.1:27017.
• Alternativa rápida: SSH al servidor y corré mongosh ahí. Con db.coleccion.find().limit(5) ya inspeccionás.

Guía útil:

• Instalar MongoDB (DigitalOcean, en español)

4) ¿Querés sumar una segunda app en la misma VPS?

Se puede, y queda prolijo si separás todo por dominio/subdominio:

• Nuevo dominio o subdominio apuntando a tu IP.
• Otra instancia de backend en un puerto distinto (ej. 3002) con PM2 o systemd.
• Nuevo server block de Nginx con su server_name.
• Proxy nuevo a ese puerto, y/o servir otro build de React si aplica.
• Sacá otro certificado con Certbot: sudo certbot --nginx -d nuevo-dominio.tld.

Consejos:

• Nombrá todo con criterio: servicios, carpetas, nombres en PM2.
• No mezcles variables de entorno: .env separados y nunca los subas al repo.
• Activá UFW: sudo ufw allow OpenSSH, sudo ufw allow 'Nginx Full', sudo ufw enable.

Recursos mencionados

• Créditos en Hetzner: Hetzner Cloud (20€ de regalo)
• VPS: vultr.com
• Dominios: namecheap.com
• Nginx (instalación): DigitalOcean (ES)
• MongoDB (instalación): DigitalOcean (ES)
• Node.js (instalación): Ubunlog
• Certbot + Nginx: DigitalOcean (ES)
• Config de Nginx como reverse proxy: Hackernoon (Node.js)
• Repo ejemplo: github.com/martin2844/deploy-example

Mirá el episodio completo

Cierre

Autohostear no es magia: son bloquecitos que, cuando los ordenás, te dan control total y menos costos. Si te sirvió, contame qué parte te complicó más o qué querés que cubra en la próxima. Y si te animás, subí tu primera app y mandame el dominio así la chusmeamos juntos. Abrazo y a seguir construyendo con código y mate.