Cómo implementar una aplicación MERN en un VPS (Guía completa)

Tu aplicación MERN funciona perfectamente en localhost.

Entonces un cliente pide un enlace en directo y, de repente, te quedas atascado. Me ha pasado.

My team and I have deployed dozens of MongoDB, Express, React, and Node apps to live servers over the past several years and we know exactly where beginners lose their way. If you are still learning the stack itself, start with the Los mejores tutoriales de programación de antemano.

Esta guía soluciona este problema.

Te explicaré cada comando, cada archivo de configuración y cada punto de control, en un lenguaje sencillo que podrás entender sin necesidad de tener conocimientos de DevOps.

Mi equipo de investigación probó cada paso en un servidor VPS nuevo antes de escribir una sola línea aquí. Al final, tu aplicación estará en funcionamiento, segura y operativa las 24 horas. 

Vamos a poner tu proyecto en línea de la manera correcta.

¿Qué significa realmente implementar una aplicación MERN en un VPS?

Antes de tocar un solo comando, permítanme explicarles lo que están a punto de hacer. 

Implementar una aplicación significa trasladarla de tu ordenador portátil a un servidor que permanece en línea día y noche, al que puede acceder cualquier persona con tu enlace.

Una aplicación MERN en un VPS es tu proyecto de MongoDB , Express, React y Node ejecutándose en un servidor virtual privado que controlas por completo. Instalas el software, ejecutas la aplicación y eres dueño de toda la configuración de principio a fin.

Las cuatro partes de una pila MERN

La pila MERN consta de cuatro componentes, y cada uno necesita un lugar en tu servidor. Entender la función de cada componente te permitirá comprender el resto de esta guía con mayor facilidad.

• MongoDB almacena tus datos como documentos flexibles. Se ejecuta discretamente en segundo plano en tu servidor.
• EXpress es tu framework de backend. Gestiona las rutas de la API y se comunica con la base de datos.
• React es tu interfaz de usuario. Se compila en archivos estáticos que el navegador carga.
• Node.js ejecuta tu backend de Express como un proceso en vivo. Es el motor que funciona internamente.

Una vez que se comprende que estos cuatro servicios son independientes, necesitan iniciarse, mantenerse activos y comunicarse entre sí, los pasos de implementación dejan de resultar intimidantes. 

Ese es el modelo mental que mi equipo utiliza siempre.

VPS frente a alojamiento compartido para aplicaciones MERN

Con un VPS obtienes dedicación CPU y RAMControl total sobre las versiones y sin intermediarios que bloqueen las herramientas que necesitas. 

Esa libertad es la razón principal por la que los desarrolladores eligen un VPS para trabajar con MERN.

Lo que necesitas antes de implementar tu aplicación MERN

Una buena preparación evita horas de frustración después. Mi equipo de investigación elaboró ​​una breve lista de verificación para que llegues con todo listo, en lugar de tener que improvisar a mitad de la ejecución de un comando.

Lista de verificación previa al despliegue

Reúna estas cinco cosas antes de empezar. 

Tenerlos listos significa que puedes completar la configuración de una sola vez y sin problemas, sin tener que detenerte a buscar una contraseña o un enlace al repositorio.

• A Servidor VPS con acceso root o sudo, ejecutando Ubuntu 22.04 o 24.04.
• El código de tu proyecto MERN está almacenado en un repositorio de GitHub o GitLab, listo para ser clonado.
• Un nombre de dominio que apunta a su servidor, para una URL limpia y en vivo y gratuita. SSL.
• Los valores de tu archivo .env, los detalles de conexión a MongoDB y cualquier clave API.
• An SSH cliente o PuTTY en Windows, para que puedas iniciar sesión en el servidor.

Habilidades que ayudan pero no son obligatorias

No necesitas ser un experto en servidores para seguir esta guía. Sin embargo, conocer algunos conceptos básicos te facilitará el aprendizaje, y explicaré cada término nuevo en cuanto aparezca.

Tener cierta familiaridad con la línea de comandos de Linux ayuda mucho. 

Saber cómo editar un archivo con nano, moverse entre carpetas y ejecutar un comando como sudo cubre aproximadamente el noventa por ciento de lo que necesitas aquí.

Por que recomiendo YouStable VPS para alojar una aplicación MERN

Necesitas un servidor antes de que se ejecute cualquier comando, así que déjame compartir lo que usa mi equipo. 

Después de probar muchos proveedores en proyectos reales, sigo volviendo a YouStable para implementaciones MERN, y esta es la razón honesta por la que.

Acceso root completo y verdadera libertad para desarrolladores.

Una aplicación MERN necesita acceso root para instalar Node, ejecutar PM2 y abrir los puertos. Nginx usos. 

YouStable Te brinda acceso root completo en todos los planes VPS, por lo que nada de esta lista quedará bloqueado.

También puedes elegir tu sistema operativo entre Ubuntu, Debian, AlmaLinux o Rocky Linux. Mi equipo usa Ubuntu para trabajar con MERN porque Node, MongoDB y Nginx Todo se instala correctamente siguiendo los pasos que se indican a continuación.

Precios asequibles y tiempo de actividad confiable.

El coste es importante cuando se trata de proyectos paralelos o trabajos para clientes. 

YouStable Planes VPS El precio inicial ronda los 3.67 dólares al mes, lo cual es justo teniendo en cuenta la velocidad de la unidad SSD NVMe y los recursos dedicados que se obtienen a cambio.

Cada plan está respaldado por un 99.9Compromiso de tiempo de actividad del % y una red de 1 Gbps, funcionando con procesadores AMD EPYC con virtualización KVM. 

Eso significa que tu aplicación MERN en funcionamiento se mantiene rápida y accesible para los visitantes reales.

Cada nivel incluye 1 envío dedicado gratuito IPv4, un panel de control gratuito y acceso root completo. Para una aplicación MERN de inicio, el plan básico maneja Node, MongoDB y Nginx junto con espacio de sobra.

Panel de control gratuito, migración y soporte técnico humano 24/7.

Los problemas con los servidores siempre parecen llegar a medianoche. Es ahí donde el soporte técnico se convierte en la solución que te salva, por lo que mi equipo le da tanta importancia como a las especificaciones técnicas a la hora de elegir un proveedor de alojamiento web.

YouStable Incluye un panel de control gratuito, migración gratuita de sitios web de hasta 5 GB, instantáneas, copias de seguridad automatizadas y protección contra ataques DDoS. 

Respuestas de personas reales a través de chat en vivo y sistema de tickets las 24 horas del día, no bots.

Cómo comprar un servidor VPS de YouStable

Primero, permítanme explicarles cómo configurar su servidor, ya que los pasos de implementación requieren un VPS activo con una dirección IP. Esta parte solo toma unos minutos de principio a fin.

Guía paso a paso para la compra de un VPS

Sigue esta ruta al pie de la letra y pronto recibirás los datos de acceso al servidor en tu correo electrónico. Mi equipo simplificó el proceso para que dediques tu tiempo a crear, en lugar de navegar por una página de pago.

• Ir al oficial YouStable sitio web >> abrir el VPS Alojamiento Menú >> Seleccione VPS para desarrolladores o VPS Linux >> Elija un plan que se ajuste al tamaño de su aplicación.

• Seleccione su ciclo de facturación >> elija Ubuntu 24.04 como sistema operativo >> agregue su dominio cuando se le solicite >> complete el pago utilizando tarjetas, UPI o banca en línea.

• Una vez confirmado el pedido, recibirá un correo electrónico con la dirección IP de su servidor, el nombre de usuario de administrador y la contraseña. 

• Guarda ese correo electrónico en un lugar seguro, porque necesitas esos tres datos para el primer paso que se describe a continuación.

Cómo implementar una aplicación MERN en un VPS: Guía paso a paso

Esta es la parte central de la guía. Mi equipo técnico probó cada comando en un servidor nuevo, así que síguelos en orden y tu aplicación MERN estará operativa y segura al finalizar.

Paso 1: Conéctese a su VPS a través de SSH

Primero, inicia sesión en el servidor desde tu propio ordenador. Abre tu terminal y luego usa la dirección IP de tu YouStable Correo electrónico de bienvenida para comenzar una experiencia segura SSH de preguntas y respuestas.

Ejecuta esto en tu máquina local:

ssh root@your_server_ip

Escribe "sí" cuando se te pregunte si deseas confiar en el servidor y, a continuación, introduce tu contraseña de administrador. Ya estás dentro de tu VPS, listo para configurarlo. 

Ese cambio inmediato significa que la conexión funcionó.

Paso 2: Actualizar el servidor y crear un usuario seguro.

Un servidor nuevo necesita actualizaciones primero, y luego un usuario sin privilegios de administrador para el trabajo diario. Ejecutar todo como administrador es arriesgado, por lo que mi equipo siempre crea un usuario de implementación dedicado de inmediato.

Actualiza y luego crea tu usuario:

sudo apt update && sudo apt upgrade -yadduser deployusermod -aG sudo deploysu - deploy

Cuando se le solicite, establezca una contraseña segura y pulse Intro para completar los campos adicionales. 

El último comando te conecta a la nueva cuenta de despliegue, que usarás para el resto de esta guía.

Paso 3: Configurar el cortafuegos

Un cortafuegos bloquea todos los puertos que no utilizas, lo que reduce drásticamente tu superficie de ataque. Solo abres los puertos que tu aplicación realmente necesita y mantienes todo lo demás bien cerrado.

Permitir SSH, luego active el cortafuegos:

sudo ufw allow OpenSSHsudo ufw enable

Pulsa la tecla Y para confirmar. 

Abriremos los puertos web para Nginx Más tarde, una vez instalado. Por ahora, SSH El acceso permanece protegido, por lo que nunca te quedarás sin poder acceder al servidor.

Paso 4: Instalar Node.js 24 LTS

Tu backend de Node necesita el entorno de ejecución de Node.js. 

Instalamos la versión actual de soporte a largo plazo a través de NodeSource, porque se mantiene estable y funciona correctamente en todo el servidor para todos los usuarios.

Instalar Node.js 24 LTS:

sudo apt install -y curl ca-certificates gnupgsudo mkdir -p /etc/apt/keyringscurl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key \  | sudo gpg --dearmor -o /etc/apt/keyrings/nodesource.gpgNODE_MAJOR=24echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] \  https://deb.nodesource.com/node_$NODE_MAJOR.x nodistro main" \  | sudo tee /etc/apt/sources.list.d/nodesource.listsudo apt updatesudo apt install nodejs -y

Ahora confirme que la instalación se realizó correctamente comprobando las versiones. 

Ver aquí los números de versión reales indica que tanto Node como npm están listos para ejecutar el backend y compilar el frontend.

Verifique las versiones:

node -vnpm -v

Deberías ver una versión de Node que comience con v24 y una versión de npm junto a ella. Cuando ambas se muestren correctamente, tu entorno de ejecución estará configurado y podrás continuar con el mantenimiento de la aplicación.

Paso 5: Instala PM2 para que tu aplicación siga funcionando.

Si ejecutas node index.js, tu aplicación se bloquea en cuanto cierras la terminal. PM2 soluciona ese problema. 

Es un proceso manager que mantiene activo tu backend de Node y lo reinicia después de cualquier fallo.

Instalar PM2 globalmente:

sudo npm install -g pm2

PM2 ya está disponible en todo el servidor. Lo conectaremos a tu backend un poco más tarde, una vez que hayas subido tu código y se hayan instalado sus dependencias. Piensa en ello como tu motor siempre activo.

Paso 6: Instalar y proteger MongoDB

Tu base de datos también reside en el servidor. Instalamos MongoDB Community Edition, lo iniciamos como un servicio en segundo plano y luego lo protegemos con una contraseña para que ningún extraño pueda acceder a tus datos.

Instala MongoDB 8.0 e inícialo:

curl -fsSL https://www.mongodb.org/static/pgp/server-8.0.asc \  | sudo gpg -o /usr/share/keyrings/mongodb-server-8.0.gpg --dearmorecho "deb [ arch=amd64,arm64 \  signed-by=/usr/share/keyrings/mongodb-server-8.0.gpg ] \  https://repo.mongodb.org/apt/ubuntu noble/mongodb-org/8.0 multiverse" \  | sudo tee /etc/apt/sources.list.d/mongodb-org-8.0.listsudo apt updatesudo apt install -y mongodb-orgsudo systemctl start mongodsudo systemctl enable mongod

La palabra "noble" en ese comando es el nombre en clave de Ubuntu 24.04. Cuando ejecutes Ubuntu 22.04, reemplaza "noble" por "jammy" para que el repositorio coincida con tu sistema y la instalación se ejecute sin errores.

Ahora, asegure la base de datos. 

Abre la consola de MongoDB, crea un usuario administrador y, a continuación, activa la autenticación para que cada conexión requiera una contraseña. 

Este sencillo paso evita la brecha de seguridad más común en MongoDB.

Cree un usuario administrador de la base de datos:

mongosh use admindb.createUser({  user: "admin",  pwd: "your_strong_password",  roles: [ { role: "userAdminAnyDatabase", db: "admin" },           "readWriteAnyDatabase" ]})exit

A continuación, indique a MongoDB que requiera ese inicio de sesión. 

Abra su archivo de configuración, agregue el bloque de seguridad que se muestra a continuación y reinicie el servicio para que la nueva regla surta efecto en todas las conexiones futuras.

Habilitar la autenticación de MongoDB:

sudo nano /etc/mongod.conf 

# Añade estas dos líneas y guarda:

security:authorization: enabled sudo systemctl restart mongod

Paso 7: Sube el código de tu aplicación MERN con Git.

Es hora de subir tu proyecto al servidor. El método más limpio es Git, así que clonas tu repositorio directamente en una carpeta web y descargas las futuras actualizaciones con un solo comando.

Clona tu proyecto en /var/www:

sudo mkdir -p /var/wwwcd /var/wwwsudo chown -R $USER:$USER /var/wwwgit clone https://github.com/yourusername/your-mern-app.gitcd your-mern-app

Sustituye el enlace del repositorio de ejemplo por el tuyo. Tras ejecutarlo, tu proyecto completo estará en el servidor. Ahora instalaremos sus dependencias y configuraremos los valores necesarios para conectarlo a la base de datos.

Paso 8: Configurar el backend y las variables de entorno.

Acceda a la carpeta de su backend e instale sus paquetes. A continuación, cree el archivo .env que contiene sus datos confidenciales, como el enlace a la base de datos y el puerto en el que escucha su servidor Express.

Instale los paquetes de backend y abra .env:

cd backendnpm installnano .env

Dentro de ese archivo .env, añade tus valores reales. 

La cadena de conexión que aparece a continuación utiliza las credenciales de administrador que acaba de crear, de modo que su aplicación Express pueda acceder a MongoDB de forma segura en el mismo servidor.

Valores de ejemplo para .env:

PORT=5000NODE_ENV=productionMONGO_URI=mongodb://admin:[email protected]:27017/yourdbname?authSource=admin

Guarda el archivo con Ctrl+O, luego Enter y, a continuación, Ctrl+X para salir de nano. Asegúrate de que el nombre de la base de datos y el puerto coincidan con los que espera tu aplicación; de lo contrario, el servidor no podrá conectarse al iniciarse.

Paso 9: Construir el frontend de React

Tu código React necesita compilarse en archivos estáticos simples que el navegador pueda cargar rápidamente. Ve a la carpeta frontend, instala sus paquetes y luego ejecuta el comando build para generar esos archivos.

Construye el frontend:

cd ../frontendnpm installnpm run build

Un proyecto Vite crea una carpeta dist, mientras que un proyecto Create React App crea una carpeta build. Observa cuál aparece, porque Nginx Necesita esa ruta de carpeta exacta en un momento para servir su sitio.

Paso 10: Ejecutar el backend con PM2

Ahora inicia tu backend de Express bajo PM2 para que se ejecute indefinidamente y sobreviva a los reinicios. Vuelve a la carpeta del backend y ejecuta el archivo principal de tu servidor con un nombre claro y fácil de recordar.

Iniciar y mantener el backend:

cd ../backendpm2 start server.js --name mern-backendpm2 startuppm2 save

Reemplaza server.js con tu archivo de entrada real, que suele ser index.js o app.js. El comando de inicio pm2 imprime una línea que debes copiar y ejecutar, lo que configura tu aplicación para que se inicie automáticamente en cada reinicio.

Consulta el estado y los registros en tiempo real:

pm2 listpm2 logs mern-backend

Ejecuta estos dos comandos para confirmar que el servidor muestra el estado "en línea". El comando `logs` transmite la salida en tiempo real, lo que te permite observar el arranque de la aplicación y detectar cualquier error en el momento en que aparezca.

Paso 11: instalar y configurar Nginx

Nadie quiere escribir un número de puerto en el navegador. Nginx Soluciona ese problema. Sirve tus archivos React y reenvía discretamente las llamadas a la API a tu backend Node, todo desde un nombre de dominio limpio.

Instale Nginx y puertos web abiertos:

sudo apt install nginx -ysudo ufw allow 'Nginx Full'

Ahora crea un archivo de configuración para tu sitio. Esto indica Nginx dónde se encuentran los archivos de tu frontend y cómo pasar cualquier solicitud que comience con /api al backend que se ejecuta en el puerto 5000.

Abre un nuevo Nginx archivo de configuración:

sudo nano /etc/nginx/sites-available/mern-app

Pega el siguiente bloque en ese archivo. Actualiza el dominio y la ruta raíz para que coincidan con tu sitio web y la carpeta de compilación del frontend que anotaste anteriormente. Luego, guarda y cierra el editor.

Nginx Configuración del sitio:

server {    listen 80;    server_name yourdomain.com www.yourdomain.com;     root /var/www/your-mern-app/frontend/dist;    index index.html;     location / {        try_files $uri $uri/ /index.html;    }     location /api {        proxy_pass http://localhost:5000;        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;    }}

Ahora habilita el sitio, comprueba la configuración en busca de errores tipográficos y recarga. NginxLa fase de prueba es tu red de seguridad, ya que detecta los errores antes de que puedan dejar tu servidor en producción fuera de servicio.

Habilita el sitio y recarga. Nginx:

sudo ln -s /etc/nginx/sites-available/mern-app /etc/nginx/sites-enabled/sudo nginx -tsudo systemctl restart nginx

Cuando nginx -t informa que la sintaxis es correcta, todo está bien. Visite su dominio ahora y su aplicación MERN debería cargarse a través de HTTP simple. Queda un paso: bloquearlo con free SSL.

Paso 12: Agregar gratis SSL Con Let's Encrypt

Un candado en el navegador genera confianza instantánea, y los motores de búsqueda también lo recompensan. Certbot de Let's Encrypt te da un certificado gratuito y lo conecta a Nginx Automáticamente en menos de un minuto.

Instale Certbot y emita SSL:

sudo apt install certbot python3-certbot-nginx -ysudo certbot --nginx -d yourdomain.com -d www.yourdomain.com

Introduce tu correo electrónico, acepta los términos y elige la opción que redirige todo el tráfico a HTTPS. Certbot renueva el certificado automáticamente, así que tu candado permanecerá verde sin que tengas que hacer nada.

Cómo probarlo todo antes de lanzarlo

Ya casi terminas, pero una revisión rápida ahora evita un lanzamiento fallido más adelante. Mi equipo ejecuta la misma lista corta en cada implementación para confirmar que cada servicio esté funcionando correctamente.

Lista de verificación final

Realiza estas cuatro comprobaciones en orden. Cada una confirma que una capa diferente de tu infraestructura está en buen estado, para que puedas compartir tu enlace con total confianza en lugar de cruzar los dedos.

• Interfaz: Abre tu dominio en un navegador. Tu interfaz de React debería cargar rápidamente a través de HTTPS con un candado.
• backend: Activa una acción que llame a la API, como un inicio de sesión o una recuperación de datos, y confirma que devuelve datos reales.
• Base de datos: Agregue o lea un registro a través de su aplicación y, a continuación, confirme que el cambio se mantiene después de actualizar la página.
• Tiempo de actividad: Ejecuta pm2 list y comprueba que tu servidor backend siga apareciendo en línea después de reiniciar el servidor de prueba.

Cuando las cuatro pruebas se superan, tu aplicación MERN está realmente lista para producción. En ese momento, mi equipo considera que el despliegue ha finalizado y te has ganado el derecho a compartir el enlace con todo el mundo.

Errores comunes en la implementación de MERN y cómo solucionarlos

Incluso los pasos probados presentan dificultades en proyectos reales. Mi equipo de investigación registró los errores más comunes, junto con la solución exacta para cada uno, para que nunca te quedes atascado por mucho tiempo.

El backend muestra un error en PM2.

Cuando la lista pm2 muestra errores en lugar de estar en línea, la aplicación falla al iniciarse. Primero, lee los registros, ya que casi siempre indican la causa real en texto plano cerca del final.

Lea las últimas 50 líneas del registro:

pm2 logs mern-backend --lines 50

Las causas habituales son un valor incorrecto en el archivo .env, un paquete faltante o un enlace de base de datos defectuoso. Corrige la línea a la que apunta el registro y luego ejecuta pm2 restart mern-backend para intentarlo de nuevo.

Nginx Muestra un error 502 Bad Gateway.

Un error 502 significa Nginx Está en funcionamiento, pero no puede acceder a tu servidor. En la mayoría de los casos, el servidor está caído o escuchando en un puerto diferente al que espera tu configuración.

Verifique que PM2 muestre la aplicación en línea y luego confirme el puerto proxy_pass en su Nginx La configuración coincide con el PUERTO en su archivo .env. 

Alinea esos dos y el 502 se despeja de inmediato.

La interfaz de usuario carga correctamente, pero la API falla.

Si tu sitio web se muestra pero los botones no funcionan, significa que el frontend está llamando a la dirección incorrecta. Esto ocurre cuando la URL base de la API aún apunta a localhost desde tu entorno de desarrollo.

Establezca la URL base de la API de frontend en /api, vuelva a compilar con npm run build y recargue la página. Nginx Luego, esas llamadas se redirigen a tu servidor y los botones averiados vuelven a funcionar.

Preguntas Frecuentes

Reflexiones finales: Su aplicación MERN está lista para el mundo.

Empezaste con una aplicación alojada en localhost, y ahora tienes un plan completo para implementarla en producción, de forma segura y siempre disponible. Esa es una verdadera habilidad, y te abre las puertas para entregar proyectos a tus clientes con confianza.

Los pasos que se describen aquí son los mismos que mi equipo técnico sigue semanalmente en los servidores de producción. Síguelos en orden, consulta las notas y las soluciones cuando surja algún problema, y ​​tu implementación funcionará correctamente incluso con tráfico real.

Cuando necesitas un servidor que te brinde acceso root completo, velocidad NVMe y soporte humano a un precio justo, YouStable Aquí es donde mi equipo desarrolla sus proyectos. Obtén un plan, sigue esta guía y presenta tu proyecto a usuarios reales hoy mismo.