Domina VPS para Frontend - Parte 3

En esta tercera parte de Domina VPS para Frontend cerramos el ciclo: vamos a mejorar la experiencia del desarrollador y la estabilidad de nuestras aplicaciones migrando de procesos manuales a contenedores Docker, automatizando despliegues con CI CD y añadiendo balanceo de carga. Si gestionas aplicaciones a medida o software a medida esta guía te permitirá escalar y asegurar tus proyectos de forma profesional.

Firewall básico y seguridad inicial. Nunca omitas este paso o abrirás la puerta a atacantes. En Ubuntu instala UFW con sudo apt update y sudo apt install ufw. Activa el firewall con sudo ufw enable y permite solo los puertos necesarios sudo ufw allow 22/tcp sudo ufw allow 80/tcp sudo ufw allow 443/tcp. Revisa el estado con sudo ufw status y añade puertos extra si tu backend los necesita por ejemplo sudo ufw allow 3002/tcp. La ciberseguridad es clave cuando trabajas en VPS y si necesitas auditoría o pentesting puedes consultar nuestros servicios de seguridad en ciberseguridad y pentesting.

Instalación de Docker y Docker Compose. Docker garantiza que la app se ejecute igual en local y en servidor. En Ubuntu añade el repositorio oficial, instala docker engine y el plugin docker compose. Verifica con docker compose version. Con Docker crearás una imagen a partir de un Dockerfile y desde esa imagen lanzarás contenedores aislados y reproducibles.

Ejemplo de Dockerfile para una app NextJS. Sitúate en el directorio de tu app por ejemplo cd /var/www/frontend y crea un archivo Dockerfile con estas instrucciones elementales FROM node:22 WORKDIR /app COPY package*.json ./ RUN npm install COPY . . RUN npm run build EXPOSE 3000 CMD [npm start] Este Dockerfile define el entorno Node, instala dependencias, construye la app y expone el puerto 3000 para producción.

Construir imagen y ejecutar contenedor. Desde el directorio con el Dockerfile ejecuta sudo docker build -t myfrontend:latest . Para ejecutar sudo docker run -d -p 3000:3000 --name myfrontend_container myfrontend:latest. Lista contenedores con sudo docker ps, para detener sudo docker stop myfrontend_container y para eliminar sudo docker rm myfrontend_container. Si quieres liberar espacio usa sudo docker system prune -af --volumes.

Simplificar con Docker Compose. Crea un archivo docker-compose.yml en la raíz de tu proyecto con servicios definidos para frontend y otros componentes. Ejemplo mínimo services: frontend: build: context: . dockerfile: Dockerfile container_name: frontend_app ports: - 3000:3000 restart: always Con docker compose up -d levantas todo en segundo plano y con docker compose down lo paras. Docker Compose facilita desplegar múltiples servicios como bases de datos, colas o microservicios sin escribir comandos docker run largos.

CI CD con GitHub Actions para despliegue automático. Para evitar entrar al VPS cada vez que haces un push automatiza el despliegue. Flujo general: genera un par de claves SSH en tu máquina local, agrega la clave pública al archivo authorized_keys del usuario del VPS y añade en tu repositorio en GitHub los secrets VPS_SSH_KEY con la clave privada completa, VPS_HOST con la IP y VPS_USER con el usuario. Luego crea .github/workflows/deploy.yml que, al pushear a main, haga checkout, se conecte por SSH y ejecute comandos en el servidor como git fetch origin main git reset --hard origin/main docker compose down --remove-orphans docker system prune -af --volumes docker compose build --no-cache docker compose up -d

El truco es que la acción de GitHub se ejecuta en runners temporales que conectan por SSH y ejecutan exactamente las tareas necesarias para actualizar contenedores sin intervención humana. Esto mejora enormemente la experiencia de desarrollo y despliegue y encaja con prácticas DevOps modernas.

Balanceo de carga simple con NGINX y múltiples instancias Docker. Si tu web necesita más capacidad levanta varias instancias en Docker Compose por ejemplo services: frontend: build: context: . dockerfile: Dockerfile ports: - 3000:3000 restart: always frontend2: build: context: . dockerfile: Dockerfile ports: - 3001:3000 restart: always Luego en la configuración de NGINX crea un upstream nextjsfrontend { server localhost:3000; server localhost:3001; } y en el bloque de site usa location / { proxy_pass https://nextjsfrontend; } Reinicia nginx y tendrás un balanceador básico que reparte carga entre contenedores. Esta técnica es ideal cuando escalas aplicaciones a medida y servicios cloud.

Buenas prácticas adicionales. Mantén variables sensibles en secretos de GitHub en lugar de en el código, usa docker compose con restart always para resiliencia, aplica limpieza periódica con docker system prune y monitoriza logs con docker logs myfrontend_container. Para entornos críticos estudia orquestadores como Kubernetes y soluciones de observabilidad.

Sobre Q2BSTUDIO. En Q2BSTUDIO desarrollamos software a medida y aplicaciones a medida integrando inteligencia artificial y ciberseguridad desde la fase de diseño. Si buscas migrar a infraestructuras seguras y escalables o aprovechar servicios cloud AWS y Azure consultanos en nuestros servicios cloud AWS y Azure. También ofrecemos proyectos de inteligencia de negocio y power bi para transformar datos en decisiones y servicios de ia para empresas y agentes IA que automatizan procesos y mejoran eficiencia.

Conclusión. Pasar de VPS manual a una arquitectura basada en Docker, CI CD y balanceo con NGINX mejora la estabilidad, la experiencia del desarrollador y la capacidad de escalar. Si necesitas apoyo para implantar estas prácticas, optimizar despliegues o diseñar software a medida, el equipo de Q2BSTUDIO puede acompañarte en todo el ciclo de desarrollo y operaciones.