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 • Equip 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?

Juga una estona abans de marxar

ELS NOSTRES SERVEIS

Com et podem ajudar

Intel·ligència artificial

Agents d'IA, chatbots i assistents intel·ligents que automatitzen tasques i atenen els teus clients 24/7 per millorar l'eficiència del teu negoci.

Més info

Desenvolupament de programari

Aplicacions web, mòbils i d'escriptori, intranets, e-commerce, SaaS i plataformes de gestió dissenyades per a les necessitats concretes de la teva empresa.

Més info

Serveis cloud

Migració, infraestructura, hosting gestionat, alta disponibilitat i seguretat en Microsoft Azure i Amazon Web Services perquè el teu negoci escali sense límits.

Més info

Ciberseguretat i pentesting

Auditories de seguretat, test d'intrusió (pentesting) i protecció d'aplicacions, dades i infraestructura on-premise i cloud, amb hacking ètic i compliment normatiu.

Més info

Business Intelligence

Quadres de comandament i anàlisi de dades amb Power BI: integrem les teves fonts, dissenyem dashboards i KPIs i convertim les teves dades en decisions.

Més info

Automatització de processos

Automatitzem tasques repetitives i connectem les teves aplicacions amb n8n, Power Automate, Make i RPA, eliminant treball manual i augmentant la productivitat.

Més info

Formació per a empreses

Formem els teus equips en tecnologia amb criteri: desenvolupament web, bases de dades, Git, bones pràctiques i seguretat, automatització amb n8n, intel·ligència artificial per a empreses i creació de solucions d'IA amb Azure AI Foundry.

Més info

Auditoria de codi

Auditem el codi que creguis tu, el teu equip o una IA: et diem què està bé i què millorar, el securitzem i el deixem llest per a producció, web o app.

Més info

Generació d'imatges amb IA

Creem per tu les imatges que necessita el teu negoci amb intel·ligència artificial: producte, xarxes, publicitat, il·lustració i avatars. Tu ens dius què vols i t'ho lliurem llest per fer servir.

Més info

Generació de vídeos amb IA

Creem per tu vídeos amb intel·ligència artificial: promocionals, per a xarxes, presentadors virtuals, doblatge i animacions. Ens comptes la idea i t'ho lliurem muntat i llest per publicar.

Més info

Avatars conversacionals amb IA

Creem avatars conversacionals amb IA —humans digitals amb cara i veu— que atenen els teus clients i equips amb el coneixement de la teva empresa, a la teva web, monitors interactius, WhatsApp o Teams.

Més info

Màrqueting Online i IA

Google Ads, Meta Ads, LinkedIn Ads i posicionament en motors d'IA (GEO/AEO): captem clients i fem que la teva marca aparegui on et busquen, també a ChatGPT, Gemini i Perplexity.

Més info

Tens un projecte en ment?

Explica'ns la teva visió i la convertim en una solució de programari. Sigui quin sigui l'abast, fem realitat la teva idea.

Live Chat