Cómo hostear tu app Node + React en tu propia VPS (Parte 1)

En este video me propuse algo que varios me venían pidiendo: levantar una app full stack (Node + React + Mongo) en una VPS propia, sin plataformas mágicas ni costos raros. Todo con Ubuntu, NGINX y un par de herramientas que, una vez que las tenés claras, te hacen sentir que tenés tu mini-cloud en casa. Es la primera parte de dos: en esta nos enfocamos en dejar todo online y estable, y en la próxima le metemos SSL y más fine-tuning.

¿Qué vas a montar?

• Una VPS con Ubuntu (usé vultr.com, pero podés usar la que quieras).
• NGINX como reverse proxy frente a tu app Node.
• Node y Yarn para correr y buildear.
• MongoDB como base de datos.
• PM2 para mantener la app viva y reiniciar en caso de caídas.
• Dominio apuntando a tu server para que quede pro.

La idea es que termines con tu app React servida por Express/Node, accesible por dominio, detrás de NGINX. Nada de puertos raros a la vista.

La VPS y el acceso por SSH

• Creo una instancia en Vultr, elijo Ubuntu, le doy los recursos básicos y listo.
• Me conecto por SSH (clave o password, como te quede más cómodo).
• Pequeño repaso de seguridad y actualización rápida del sistema.

NGINX: instalación, firewall y prueba

• Instalo NGINX y explico en criollo qué rol cumple: sirve como front door, maneja tráfico en 80/443 y le pasa las requests a Node por atrás.
• Habilito el firewall para NGINX (HTTP/HTTPS) y checo la página de bienvenida desde Chrome para confirmar que estamos bien.

Node, Mongo y el proyecto

• Instalo NodeJS en Ubuntu y dejo los comandos clave.
• También MongoDB para tener la base disponible en el server.
• Clono el repo de ejemplo y te muestro cómo está organizado para que entiendas qué corre en el backend y qué en el frontend.

Repo de ejemplo que uso:

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

Build de React y cómo lo sirve Express

• Instalo Yarn y buildeo el frontend.
• Muestro cómo Express sirve el build estático de React sin necesidad de tener dos servidores públicos.
• Corro todo localmente en el server para comprobar que el stack responde.

Mantener la app viva con PM2

• Configuro PM2 para levantar la app.
• Dejo el proceso en segundo plano y agrego “pm2 startup” para que se inicie solo si el server se reinicia.
• Un clásico que te ahorra dolores de cabeza: logs y restart automático.

Dominio y reverse proxy con NGINX

• Delego un dominio (Namecheap) apuntando a la IP de la VPS.
• Armo el server block de NGINX para hacer de reverse proxy hacia mi app Node (puerto 3000, por ejemplo).
• Te dejo un ejemplo mínimo del bloque de configuración:

server {
  server_name tu-dominio.com www.tu-dominio.com;

  location / {
    proxy_pass http://127.0.0.1:3000;
    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;
  }

  listen 80;
}

Con esto ya quedás sirviendo tu app por HTTP en tu dominio. El candadito (SSL con Let’s Encrypt) lo vemos en la Parte 2 con Certbot.

Recursos que menciono

• VPS: https://vultr.com
• Dominios: https://namecheap.com
• Cómo instalar NGINX: https://www.digitalocean.com/community/tutorials/how-to-install-nginx-on-ubuntu-20-04-es
• Cómo instalar MongoDB: https://www.digitalocean.com/community/tutorials/how-to-install-mongodb-on-ubuntu-20-04-es
• Cómo instalar NodeJS: https://ubunlog.com/nodejs-npm-instalacion-ubuntu-20-04-18-04/
• Cómo instalar Certbot: https://www.digitalocean.com/community/tutorials/how-to-secure-nginx-with-let-s-encrypt-on-ubuntu-20-04-es
• Configurar NGINX como reverse proxy: https://hackernoon.com/configure-nginx-s-a-reverse-proxy-for-your-nodejs-application-9tk032e8
• Repo de ejemplo: https://github.com/martin2844/deploy-example
• Parte 2 (SSL, más configuración): https://www.youtube.com/watch?v=dzEohD1nUOw
• ¿Preferís contenedores? Despliegue con Docker en 5 minutos: https://www.youtube.com/watch?v=Hz_Jr2I_n8w&ab_channel=CodigoMate
• Extra: si querés probar Hetzner con crédito: https://hetzner.cloud/?ref=Sswaf20wbckq

Mirá el video completo

Cierre

Nada como tener tus cosas corriendo en tu propio server y entender cada pieza del stack. En la parte 2 le ponemos el candadito con Let’s Encrypt, ajustamos NGINX y dejamos todo prolijo para producción. Si te sirvió, contame qué querés que agregue o qué te trabó en tu despliegue. Vamos a seguir remándola, pero con buenas prácticas y un mate al lado todo se hace más llevadero. Nos vemos en el próximo.