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 read • Q2BSTUDIO Team

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.

A BREAK?

Play for a moment before you go

OUR SERVICES

How we can help you

Artificial intelligence

AI agents, chatbots, and intelligent assistants that automate tasks and serve your customers 24/7 to improve the efficiency of your business.

More info

Software Development

Web, mobile, and desktop applications, intranets, e-commerce, SaaS, and management platforms designed for your company's specific needs.

More info

Cloud services

Migration, infrastructure, managed hosting, high availability, and security on Microsoft Azure and Amazon Web Services to help your business scale without limits.

More info

Cybersecurity and pentesting

Security audits, penetration testing and protection of applications, data and infrastructure on-premise and cloud, with ethical hacking and regulatory compliance.

More info

Business Intelligence

Dashboards and data analysis with Power BI: we integrate your sources, design dashboards and KPIs and turn your data into decisions.

More info

Process automation

We automate repetitive tasks and connect your applications with n8n, Power Automate, Make, and RPA, eliminating manual work and increasing productivity.

More info

Training for Companies

We train your teams in technology with criteria: web development, databases, Git, best practices and security, automation with n8n, artificial intelligence for companies and creation of AI solutions with Azure AI Foundry.

More info

Code Auditing

We audit the code that you, your team or an AI create: we tell you what is good and what to improve, we secure it and make it ready for production, web or app.

More info

AI Image Generation

We create for you the images that your business needs with artificial intelligence: product, networks, advertising, illustration and avatars. You tell us what you want and we deliver it ready to use.

More info

AI Video Generation

We create videos with artificial intelligence for you: promotional, networking, virtual presenters, dubbing and animations. You tell us the idea and we will deliver it assembled and ready to publish.

More info

AI Conversational Avatars

We create conversational avatars with AI – digital humans with a face and voice – that serve your customers and teams with the knowledge of your company, on your website, interactive monitors, WhatsApp or Teams.

More info

Online Marketing and AI

Google Ads, Meta Ads, LinkedIn Ads and AI Engine Positioning (GEO/AEO): we attract customers and make your brand appear where they search for you, also on ChatGPT, Gemini and Perplexity.

More info

Do you have a project in mind?

Tell us your vision and we'll turn it into a software solution. Whatever the scope, we make your idea real.

Live Chat