Title: Despliegue de aplicaciones web en contenedores
Course: 2025 - LISI - Virtualizacion 2-2 > Section: Aplicaciones Prácticas y Proyecto Final

🧩 Tema: Despliegue de Aplicaciones Web en Contenedores

🎯 Objetivo General

Comprender y aplicar el proceso de despliegue de aplicaciones web utilizando contenedores Docker, facilitando la portabilidad, escalabilidad y mantenimiento de los servicios.

📘 Contenidos

1. ¿Qué es el despliegue de aplicaciones web?

El despliegue es el proceso de poner una aplicación en funcionamiento en un entorno de producción o pruebas. En el contexto de contenedores, implica empaquetar la aplicación con sus dependencias y configuraciones en una imagen que puede ejecutarse en cualquier sistema compatible con Docker.

2. Ventajas del despliegue con contenedores

- Portabilidad: El contenedor se ejecuta igual en cualquier sistema.
- Aislamiento: Cada servicio corre en su propio entorno.
- Escalabilidad: Fácil de replicar y escalar horizontalmente.
- Automatización: Compatible con CI/CD y herramientas de orquestación.

3. Componentes clave en el despliegue

- Dockerfile: Define cómo construir la imagen de la aplicación.
- Docker Image: Resultado del Dockerfile, lista para ejecutarse.
- Contenedor: Instancia en ejecución de una imagen.
- Docker Compose: Herramienta para definir y ejecutar múltiples servicios.

4. Ejemplo práctico: Despliegue de una app web con frontend y backend

🗂 Estructura del proyecto

web-app/
├── docker-compose.yml
├── backend/
│   ├── Dockerfile
│   ├── app.js
│   └── package.json
└── frontend/
    ├── Dockerfile
    ├── app.js
    └── package.json


📄 backend/app.js

const express = require('express');

const app = express();

app.get('/api', (req, res) => res.json({ msg: 'Hola desde el backend!' }));

app.listen(3000, () => console.log('Backend en puerto 3000'));

📄 frontend/app.js

const express = require('express');

const axios = require('axios');

const app = express();

app.get('/', async (req, res) => {

  const response = await axios.get('http://backend:3000/api');

  res.send(`Mensaje: ${response.data.msg}`);

});

app.listen(8080, () => console.log('Frontend en puerto 8080'));

📄 docker-compose.yml

version: '3'

services:

  backend:

    build: ./backend

    ports:

      - "3000:3000"

  frontend:

    build: ./frontend

    ports:

      - "8080:8080"

    depends_on:

      - backend

🧪 Actividad Sugerida

Título: Despliegue de una aplicación web con Docker Compose
Producto final: Video explicativo en YouTube
Pasos:

1. Crear los archivos del proyecto.
2. Construir las imágenes con docker-compose build.
3. Ejecutar los servicios con docker-compose up.
4. Verificar la comunicación entre frontend y backend.
5. Grabar un video explicando el proceso.

📌 Recomendaciones

- Usar OBS Studio para grabar pantalla.
- Explicar cada archivo y comando utilizado.
- Mostrar la app funcionando en el navegador.