Dominando VPS para Ingeniero de Frontend - Parte 3

Despliega y automatiza apps en VPS con Docker, Docker Compose y CI/CD con GitHub Actions. Configura seguridad con UFW, balanceo con NGINX y despliegues reproducibles desde Ubuntu para mayor escalabilidad y menos intervención manual.

12 sept 2025 • 5 min de lectura • Equipo Q2BSTUDIO

Inteligencia-Artificial-

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 https://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.

¿UNA PAUSA?

Juega un momento antes de irte

NUESTROS SERVICIOS

Cómo podemos ayudarte

Inteligencia artificial

Agentes de IA, chatbots y asistentes inteligentes que automatizan tareas y atienden a tus clientes 24/7 para mejorar la eficiencia de tu negocio.

Más info

Desarrollo de software

Aplicaciones web, móviles y de escritorio, intranets, e-commerce, SaaS y plataformas de gestión diseñadas para las necesidades concretas de tu empresa.

Más info

Servicios cloud

Migración, infraestructura, hosting gestionado, alta disponibilidad y seguridad en Microsoft Azure y Amazon Web Services para que tu negocio escale sin límites.

Más info

Ciberseguridad y pentesting

Auditorías de seguridad, test de intrusión (pentesting) y protección de aplicaciones, datos e infraestructura on-premise y cloud, con hacking ético y cumplimiento normativo.

Más info

Business Intelligence

Cuadros de mando y análisis de datos con Power BI: integramos tus fuentes, diseñamos dashboards y KPIs y convertimos tus datos en decisiones.

Más info

Automatización de procesos

Automatizamos tareas repetitivas y conectamos tus aplicaciones con n8n, Power Automate, Make y RPA, eliminando trabajo manual y aumentando la productividad.

Más info

Formación para empresas

Formamos a tus equipos en tecnología con criterio: desarrollo web, bases de datos, Git, buenas prácticas y seguridad, automatización con n8n, inteligencia artificial para empresas y creación de soluciones de IA con Azure AI Foundry.

Más info

Auditoría de código

Auditamos el código que creas tú, tu equipo o una IA: te decimos qué está bien y qué mejorar, lo securizamos y lo dejamos listo para producción, web o app.

Más info

Generación de imágenes con IA

Creamos por ti las imágenes que necesita tu negocio con inteligencia artificial: producto, redes, publicidad, ilustración y avatares. Tú nos dices qué quieres y te lo entregamos listo para usar.

Más info

Generación de vídeos con IA

Creamos por ti vídeos con inteligencia artificial: promocionales, para redes, presentadores virtuales, doblaje y animaciones. Nos cuentas la idea y te lo entregamos montado y listo para publicar.

Más info

Avatares conversacionales con IA

Creamos avatares conversacionales con IA —humanos digitales con cara y voz— que atienden a tus clientes y equipos con el conocimiento de tu empresa, en tu web, monitores interactivos, WhatsApp o Teams.

Más info

Marketing Online e IA

Google Ads, Meta Ads, LinkedIn Ads y posicionamiento en motores de IA (GEO/AEO): captamos clientes y hacemos que tu marca aparezca donde te buscan, también en ChatGPT, Gemini y Perplexity.

Más info

¿Tienes un proyecto en mente?

Cuéntanos tu visión y la convertimos en una solución de software. Sea cual sea el alcance, hacemos realidad tu idea.

Live Chat