Dominando VPS para Ingeniero de Frontend - Parte 3

Estamos en la ronda final de esta serie, donde llevamos nuestras aplicaciones web en VPS al siguiente nivel para mejorar la experiencia del desarrollador. Ya no basta con desplegar manualmente: añadiremos Docker, Docker Compose, CI CD con GitHub Actions, y un balanceador de carga simple con NGINX. Con estos pasos reducimos la intervención manual en el VPS y ganamos automatización, reproducibilidad y escalabilidad.
Antes de entrar en Docker y despliegues automáticos, hay que asegurar el servidor. Añadir un firewall es sencillo pero crítico. En Ubuntu recomendamos UFW. Ejemplos de comandos: sudo apt update, sudo apt install ufw, sudo ufw enable, sudo ufw allow 22/tcp, sudo ufw allow 80/tcp, sudo ufw allow 443/tcp. Comprueba el estado con sudo ufw status y abre puertos adicionales solo si son necesarios, por ejemplo sudo ufw allow 3002/tcp para un backend que escuche en 3002.
Docker y Docker Compose garantizan que la app se ejecute igual en tu equipo local, en el servidor y en el entorno del equipo. La idea central es crear un Dockerfile que describa el entorno y las instrucciones de construcción. Ejemplo de Dockerfile para una app NextJS: FROM node:22, WORKDIR /app, COPY package*.json ./, RUN npm install, COPY . ., RUN npm run build, EXPOSE 3000, CMD npm start. Al construir este Dockerfile se genera una imagen que encapsula la app y sus dependencias; a partir de esa imagen lanzamos contenedores aislados y expuestos por puertos, por ejemplo 3000.
Instalación de Docker en Ubuntu, en resumen: actualizar repositorios, añadir la llave GPG de Docker, añadir el repo oficial y luego instalar docker engine y el plugin docker compose. Tras la instalación verifica con docker compose version. Con la imagen construida en la carpeta del proyecto sudo docker build -t myfrontend:latest ., y si antes ejecutabas la app con PM2 deténla con pm2 stop frontend. Para lanzar el contenedor: sudo docker run -d -p 3000:3000 --name myfrontend_container myfrontend:latest. Comprueba contenedores con sudo docker ps, para logs sudo docker logs myfrontend_container, para parar sudo docker stop myfrontend_container, para eliminar sudo docker rm nombre_contenedor y para listar imágenes sudo docker images o eliminar con sudo docker rmi nombreimagen:tag tras parar y eliminar los contenedores que dependan de ella.
Docker Compose simplifica aún más cuando hay varios servicios. Crea un archivo docker-compose.yml y define servicios. Ejemplo mínimo: services: frontend: build: context: . dockerfile: Dockerfile container_name: frontend_app ports: - 3000:3000 restart: always. Para levantar todo usa sudo docker compose up -d y para bajar sudo docker compose down. Compose maneja la construcción, redes internas y reinicios automáticos.
Para eliminar la fricción de despliegue manual conviene implementar CI CD con GitHub Actions. La idea es que al hacer push a la rama principal se desencadene un flujo que conecte por SSH al VPS, actualice el repositorio, reconstruya las imágenes y relance los contenedores. En GitHub se almacenan como secrets la clave privada SSH del runner que accederá al VPS, la IP del servidor y el usuario. El workflow remoto suele ejecutar estos pasos: entrar en la carpeta del proyecto en el VPS, git fetch y git reset hard a la rama main, docker compose down --remove-orphans, docker system prune -af --volumes, docker compose build --no-cache y docker compose up -d. Con esto el deploy queda automatizado y consistente cada vez que se hace push.
Si el tráfico crece es fácil escalar con Docker. Basta con levantar múltiples instancias del mismo servicio en diferentes puertos y configurar NGINX como balanceador. Ejemplo de docker-compose con dos instancias: services: frontend: build: . ports: - 3000:3000 restart: always frontend2: build: . ports: - 3001:3000 restart: always. En NGINX crea un upstream que apunte a localhost:3000 y localhost:3001, por ejemplo upstream nextjsfrontend { server localhost:3000; server localhost:3001; } y en la configuración del sitio usa proxy_pass http://nextjsfrontend; al reiniciar NGINX obtienes balanceo round robin simple entre instancias.
Este flujo completo mejora notablemente el Developer Experience y reduce tiempo perdido en tareas repetitivas. Automatizar builds y despliegues además hace más fácil introducir pruebas, linting y gates antes de que los cambios lleguen a producción.
En Q2BSTUDIO somos especialistas en transformar ideas en soluciones robustas. Ofrecemos desarrollo de aplicaciones y software a medida, integración con servicios cloud y prácticas de ciberseguridad para entornos productivos. Si buscas un socio para construir soluciones escalables o migrar tus despliegues a contenedores y pipelines automatizados podemos ayudarte. Conocemos y aplicamos buenas prácticas en inteligencia artificial y ofrecemos soluciones de ia para empresas, agentes IA y análisis avanzado con Power BI.
Si quieres más información sobre desarrollo y aplicaciones a medida o explorar nuestros servicios cloud AWS y Azure contacta con nosotros. En Q2BSTUDIO trabajamos con tecnologías modernas para ofrecer software a medida, servicios de ciberseguridad y soluciones de inteligencia de negocio que incluyen Power BI y analítica avanzada.
Palabras clave integradas: aplicaciones a medida, software a medida, inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio, ia para empresas, agentes IA y power bi. Si deseas que preparemos un pipeline de CI CD adaptado a tu repositorio y a tus reglas de seguridad o que despleguemos tu arquitectura con escalado automático y monitorización, escríbenos y diseñamos la solución que mejor se adapte a tu negocio.
Si te ha gustado este tutorial y quieres que profundicemos en temas como despliegue con Kubernetes, monitorización con Prometheus y Grafana, o seguridad avanzada y pentesting para entornos de contenedores, dímelo y preparo una continuación práctica con ejemplos reproducibles.
Comentarios