.png)
En la primera parte adquirimos un VPS, configuramos SSH y deshabilitamos el acceso root. Nuestra autenticación personalizada ya está lista. Ahora damos el siguiente paso para convertir ese servidor en una plataforma sólida de despliegue frontend y backend.
Plan de esta segunda parte: 1 Instalación y configuración de NGINX. 2 Configuración de Node.js con NVM y ejecución con PM2. 3 Despliegue de un frontend Next.js detrás de NGINX y PM2. 4 Servir React estático directamente con NGINX. 5 Vincular un dominio y ajustar DNS. 6 Añadir un subdominio para backend. 7 Proteger con SSL gratuito de Lets Encrypt.
Por qué NGINX: actúa como reverse proxy para enrutar peticiones a servicios internos, permite balanceo de carga cuando tienes varias réplicas, gestiona SSL TLS, mejora la seguridad y escala con alta concurrencia. Es el front line ideal entre Internet y tus aplicaciones.
Instalación de NGINX en Ubuntu Debian: ejecuta en el VPS con un usuario no root y sudo: sudo apt update; sudo apt install nginx. Al finalizar, NGINX quedará escuchando en el puerto 80.
Archivos y rutas clave en NGINX que usarás a menudo: 1 etc nginx nginx.conf configuración global; desde aquí se incluyen bloques de servidor. 2 etc nginx sites-available ubicación recomendada para tus archivos de configuración de sitios. 3 etc nginx sites-enabled enlaces simbólicos a los sitios activos que NGINX procesa realmente. 4 var www ubicación estándar para el contenido de los sitios; no es obligatorio, pero ayuda a mantener orden y seguridad.
Despliegue de frontend Next.js: coloca el código fuente en var www frontend. Compila en modo producción con npm run build. Esto genera la carpeta .next con los artefactos de producción y servidor para SSR.
Crea la configuración NGINX del sitio en etc nginx sites-available frontend con un bloque de servidor que escuche en 80 y use tu IP pública temporalmente en server_name. Define una ubicación raíz con proxy hacia tu aplicación Next en el puerto 3000 con proxy_pass http: localhost 3000. Explicación rápida: listen 80 indica que atenderá tráfico HTTP. server_name marca el nombre de host o IP que servirá. location indica cómo tratar las peticiones entrantes. proxy_pass reenvía el tráfico al servicio interno en Node.
Activa el sitio con un enlace simbólico y valida: crea el enlace con sudo ln -s etc nginx sites-available frontend etc nginx sites-enabled; prueba la configuración con sudo nginx -t. Si no hay errores, aún no reinicies hasta que tu app esté ejecutándose en el puerto 3000.
Por qué PM2: Next.js con SSR necesita proceso Node en producción. PM2 gestiona procesos, reinicios, logs y monitorización. Si tu app es React estática o Vue estática, puedes servirla sin PM2 desde NGINX, declarando la carpeta de build como raíz y dejando que el routing del cliente resuelva rutas internas con la técnica de fallback a index.html.
React estático con NGINX sin PM2 de forma resumida: define en el server block la raíz en var www frontend build y la página index.html. Asegura que las peticiones no encontradas devuelvan index.html para que el router del cliente gestione rutas como acerca o contacto. Reinicia NGINX y verás la app estática disponible.
Next.js con PM2: instala PM2 con sudo npm install -g pm2. En package.json asegúrate de tener scripts de build y start para producción. Arranca la app en PM2 con pm2 start npm --name frontend-app -- run start. Después reinicia NGINX con sudo systemctl restart nginx y visita la IP pública para confirmar que la app responde a través de NGINX.
Vincular dominio y DNS: compra o usa tu dominio y apunta sus nameservers al proveedor de DNS de tu cloud. Ejemplo con DigitalOcean: en tu registrador elige Custom DNS y añade ns1.digitalocean.com, ns2.digitalocean.com, ns3.digitalocean.com. En el panel de DigitalOcean crea el dominio y añade registros A para el raíz con @ apuntando a la IP del VPS y CNAME para www apuntando al dominio raíz. La propagación puede tardar desde minutos hasta 48 horas.
Actualiza NGINX para usar el dominio: en etc nginx sites-available frontend cambia server_name por tu dominio y www. Reinicia con sudo systemctl restart nginx. Nota práctica: los dominios .dev requieren HTTPS activo. Si aún no has creado el certificado, el navegador bloqueará el acceso. Verifica propagación en DNS Checker si no ves cambios.
Añadir SSL con Lets Encrypt y Certbot: instala Certbot para NGINX con sudo apt install certbot python3-certbot-nginx -y. Genera certificados y configura NGINX automáticamente con sudo certbot --nginx -d tudominio.com -d www.tudominio.com. Verifica y programa la renovación automática con sudo certbot renew --dry-run. Lets Encrypt expira a los 90 días, pero la renovación automática lo mantiene vigente.
Backend y subdominio: si tienes API en Node, Python o Go, clónala en var www backend, compila o prepara producción y ejecútala con PM2. Crea un archivo de configuración NGINX en etc nginx sites-available backend, enlázalo en sites-enabled, crea un registro A para api.tudominio.com apuntando a la IP del VPS, prueba con sudo nginx -t, reinicia NGINX y finalmente emite SSL con Certbot para el subdominio.
Con esto tu VPS sirve aplicaciones en producción, con rendimiento y seguridad HTTPS, tanto para Next.js con SSR como para React estático. En la parte 3 reforzaremos seguridad, añadiremos CI CD, balanceador de carga y exploraremos contenedores.
En Q2BSTUDIO ayudamos a empresas a diseñar, desplegar y operar plataformas modernas en la nube con foco en rendimiento, seguridad y escalabilidad. Desarrollamos aplicaciones a medida y software a medida, integramos pipelines CI CD, monitorización y observabilidad, y combinamos buenas prácticas DevOps con automatización para acelerar el time to market.
Si vas a migrar workloads a la nube o necesitas arquitectura híbrida, nuestros servicios cloud en AWS y Azure cubren diseño de landing zones, redes, alta disponibilidad, copias de seguridad, observabilidad, costes y cumplimiento.
La seguridad es transversal al proyecto. Podemos auditar tu superficie de ataque con servicios de ciberseguridad y pentesting, desplegar WAF, hardening de servidores, gestión de secretos y rotación de certificados, además de implementar políticas de zero trust.
También impulsamos la innovación con inteligencia artificial e IA para empresas, agentes IA y analítica avanzada. Complementamos tus datos con servicios inteligencia de negocio y cuadros de mando power bi para decisiones más rápidas y precisas.
Resumen operativo de comandos clave mencionados: instalar NGINX con sudo apt update; sudo apt install nginx. Validar configuración con sudo nginx -t y reiniciar con sudo systemctl restart nginx. Construir Next con npm run build y ejecutar con PM2 con pm2 start npm --name frontend-app -- run start. Emitir SSL con sudo certbot --nginx -d tudominio.com -d www.tudominio.com y probar renovación con sudo certbot renew --dry-run.
Consejos finales: usa sites-available más sites-enabled para gestionar múltiples sitios, separa front y back en puertos distintos y deja que NGINX haga de reverse proxy, añade logs y métricas, y contempla escalado horizontal con múltiples instancias detrás de NGINX o un balanceador gestionado cuando el tráfico crezca.
