📝 Gestor de Tareas - Ejemplo Full-Stack con Docker Compose

Una aplicación completa de demostración que ilustra todos los conceptos de Docker estudiados en la Clase 2: Dockerfile, Servicios Multi-Contenedor y Networking.

🏗️ Arquitectura

┌─────────────────────────────────────────────────────────┐
│              DOCKER COMPOSE LOCAL                       │
├─────────────────────────────────────────────────────────┤
│                                                         │
│  ┌───────────────────────────────────────────────────┐ │
│  │  FRONTEND (Angular 16 + NGINX)                    │ │
│  │  - http://localhost:4200                          │ │
│  └──────────────────────┬────────────────────────────┘ │
│                         │ HTTP API                      │
│  ┌──────────────────────▼────────────────────────────┐ │
│  │  BACKEND (.NET 7 + ASP.NET Core)                 │ │
│  │  - http://localhost:5000                          │ │
│  │  - /api/tasks (CRUD)                              │ │
│  └──────────────────────┬────────────────────────────┘ │
│                         │                               │
│  ┌──────────────────────▼────────────────────────────┐ │
│  │  DATABASE (PostgreSQL 15)                         │ │
│  │  - localhost:5432 (acceso interno)                │ │
│  └─────────────────────────────────────────────────  │
│                                                         │
└─────────────────────────────────────────────────────────┘

🎯 Stack Tecnológico

Componente	Tecnología	Puerto	Dockerfile
Frontend	Angular 16 + NGINX	4200	3 versiones (simple, progresivo, optimizado)
Backend	.NET 7 + ASP.NET Core	5000	3 versiones (simple, progresivo, optimizado)
Database	PostgreSQL 15	5432	Imagen oficial

🎓 Versiones Progresivas de Dockerfiles

Este proyecto incluye 3 versiones de cada Dockerfile para aprender progresivamente:

Dockerfile.simple - Versión básica (fácil de entender)
Dockerfile.progresivo - Con comentarios detallados

📖 Ver: VERSIONES_DOCKERFILES.md para guía completa

📋 Requisitos Previos

Docker Desktop instalado (incluye Docker Engine y Docker Compose)
Git (para clonar si es necesario)
~2GB de espacio libre en disco

Verificar instalación:

docker --version
docker-compose --version
# o
docker compose version

🚀 Inicio Rápido

1. Clonar/Descargar el proyecto

cd ./ejemplo-app-fullstack

2. Iniciar todos los servicios

# Primera vez (construye imágenes)
docker-compose up -d --build

# Veces posteriores
docker-compose up -d

3. Esperar a que esté lista la BD (~15-20 segundos)

# Ver logs de BD
docker-compose logs -f database

# Cuando vea: "database system is ready to accept connections" ✓
# Presione Ctrl+C para salir

4. Acceder a la aplicación

Frontend: http://localhost:4200
API Backend: http://localhost:5000/api/tasks
Health Check: http://localhost:5000/health

📖 Comandos Principales

Ver estado de servicios

docker-compose ps

Salida esperada:

NAME                COMMAND                  SERVICE      STATUS
app-frontend        "nginx -g daemon off"    frontend     Up
app-backend         "dotnet MiApp.dll"       backend      Up
app-database        "postgres"               database     Up

Ver logs

# Todos los servicios
docker-compose logs -f

# Solo frontend
docker-compose logs -f frontend

# Solo backend
docker-compose logs -f backend

# Solo BD
docker-compose logs -f database

# Últimas 50 líneas del backend
docker-compose logs --tail=50 backend

Ejecutar comandos dentro de contenedores

# Bash en el backend (.NET)
docker-compose exec backend /bin/bash

# Shell en la BD (psql)
docker-compose exec database psql -U admin -d miapp

Reconstruir imágenes

# Reconstruir sin usar caché
docker-compose build --no-cache

# Solo backend
docker-compose build --no-cache backend

# Solo frontend
docker-compose build --no-cache frontend

Reiniciar servicios

# Reiniciar todos
docker-compose restart

# Solo backend
docker-compose restart backend

Detener servicios

# Detener (datos se preservan)
docker-compose stop

# Detener y eliminar contenedores (datos persisten en volúmenes)
docker-compose down

# Detener, eliminar contenedores Y volúmenes (LIMPIA TODO)
docker-compose down -v

🔍 Verificar Conectividad

1. API está accesible

curl http://localhost:5000/api/tasks

Respuesta esperada:

[
  {
    "id": 1,
    "title": "Aprender Docker",
    "description": "Entender conceptos de contenedores",
    "completed": false,
    "createdAt": "2024-04-14T12:00:00"
  },
  ...
]

2. Frontend está accesible

curl http://localhost:4200

Debería retornar el HTML de la aplicación Angular.

3. Base de datos está accesible desde backend

docker-compose exec backend /bin/bash
# Dentro del contenedor:
curl http://localhost:5000/health
# Respuesta: Healthy

exit  # Salir del contenedor

4. Ver estado de salud

docker-compose ps

# STATUS debería mostrar "Up" para todos

💡 Casos de Uso - Cómo Interactuar

Agregar una tarea

curl -X POST http://localhost:5000/api/tasks \
  -H "Content-Type: application/json" \
  -d '{
    "title": "Mi nueva tarea",
    "description": "Descripción de la tarea"
  }'

Obtener todas las tareas

curl http://localhost:5000/api/tasks

Obtener tarea específica

curl http://localhost:5000/api/tasks/1

Actualizar tarea

curl -X PUT http://localhost:5000/api/tasks/1 \
  -H "Content-Type: application/json" \
  -d '{
    "title": "Tarea actualizada",
    "completed": true
  }'

Marcar como completada/pendiente

curl -X PATCH http://localhost:5000/api/tasks/1/toggle

Eliminar tarea

curl -X DELETE http://localhost:5000/api/tasks/1

🐛 Troubleshooting

El frontend no se conecta al backend

Síntoma: ✗ Desconectado en la interfaz

Causas posibles:

Backend no está listo
Los contenedores no están en la misma red

Solución:

# Ver logs del backend
docker-compose logs backend

# Esperar ~30 segundos a que inicie completamente
# Luego recargar la página

# Verificar que están en la misma red
docker network inspect ejemplo-app-fullstack_app-network

Puerto ya está en uso

Síntoma: Error response from daemon: driver failed programming external connectivity

Solución:

# Cambiar puerto en .env
FRONTEND_PORT=4300  # en lugar de 4200
API_PORT=5001       # en lugar de 5000

# Luego reiniciar
docker-compose down
docker-compose up -d

La BD no se inicializa

Síntoma: Backend dice "cannot connect to database"

Solución:

# Ver logs de la BD
docker-compose logs database

# Si dice "waiting for server to start accepting connections"
# Esperar más tiempo (primeras veces tarda ~20 segundos)

# Forzar reconstrucción de la BD
docker-compose down -v
docker-compose up -d --build

Espacio en disco insuficiente

Síntoma: failed to register layer: no space left on device

Solución:

# Limpiar Docker (¡CUIDADO! elimina TODO no usado)
docker system prune -a --volumes

# Luego reintentar
docker-compose up -d --build

📝 Notas Importantes

Primeras veces: El build puede tardar 2-5 minutos la primera vez
BD: Tarda ~20 segundos en inicializarse completamente
Frontend: Puede mostrar "Desconectado" los primeros 10 segundos
Volúmenes: Los datos de la BD se preservan incluso si hace down

Estructura de archivos

ejemplo-app-fullstack/
├── frontend/                     # Angular 16
│   ├── src/
│   │   ├── app/
│   │   │   └── app.component.ts  # Componente principal (standalone)
│   │   ├── index.html
│   │   ├── main.ts
│   │   └── styles.css
│   ├── angular.json
│   ├── package.json
│   ├── tsconfig.json
│   ├── Dockerfile                # Multi-stage build
│   ├── nginx.conf                # Configuración de NGINX
│   └── .dockerignore
│
├── backend/                      # .NET 7
│   ├── Program.cs               # Configuración principal
│   ├── AppDbContext.cs          # Entity Framework DbContext
│   ├── Controllers/
│   │   └── TasksController.cs   # API REST CRUD
│   ├── appsettings.json         # Configuración
│   ├── MiApp.csproj             # Proyecto .NET
│   ├── Dockerfile               # Multi-stage build
│   └── .dockerignore
│
├── scripts/
│   └── init-db.sql              # Script de inicialización
│
├── docker-compose.yml           # Orquestación (servicios)
├── .env                         # Variables de entorno
├── .dockerignore                # Archivos a ignorar en build
└── README.md                    # Este archivo

👩‍🎓 Student Task: Implement the Frontend Service

Como ejercicio, el servicio de frontend ha sido eliminado de docker-compose.yml. ¡Tu tarea es agregarlo de vuelta!

Pistas para Implementar el Servicio de Frontend:

Nombre del Servicio: Agrega un servicio frontend bajo services:
Contexto de Build: Usa build: context: ./frontend para construir el código del frontend
Dockerfile: Elige entre Dockerfile.simple o Dockerfile.progresivo
Redes: Agrega networks: - app-network para conectar con otros servicios
Puertos: Expone el puerto ${FRONTEND_PORT} para acceder al frontend (usualmente 4200)
Variables de Entorno: Configura similares al backend:
- FRONTEND_PORT=${FRONTEND_PORT}
- API_PORT=${API_PORT}
- ENVIRONMENT=${ENVIRONMENT}
Dependencias: Agrega depends_on: backend: condition: service_healthy para que el frontend inicie después de que el backend esté saludable
Nombre del Contenedor: Usa algo como frontend-app(opcional)

Instrucciones:

Edita docker-compose.yml y agrega el bloque del servicio frontend
Asegúrate de tener la indentación correcta (YAML es sensible a espacios)
Ejecuta docker-compose up -d --build para probar (incluye --build ya que es la primera vez)
Verifica docker-compose ps para ver todos los servicios ejecutándose
Accede a http://localhost:4200 en tu navegador
Prueba que el frontend se conecte a la API (debería mostrar tareas del backend)

Comandos Útiles:

docker-compose up -d frontend --build para construir/probar solo el frontend
docker-compose logs frontend para los logs del frontend

¡Recuerda: El código del frontend ya está en el directorio frontend/, solo necesitas agregarlo a la configuración del compose!

📊 Monitoreo

Ver estadísticas en tiempo real

docker stats

Muestra:

CPU usage
Memory usage
Network I/O
Disk I/O

🎓 Conceptos de Docker Demostrados

Concepto	Ubicación
Dockerfile simple	backend/Dockerfile, frontend/Dockerfile
Multi-stage build	Ambos Dockerfiles (reduce tamaño)
Docker Compose	docker-compose.yml
Networking	app-network (conexión entre servicios)
Volúmenes	db-data (persistencia), ./backend (desarrollo)
Health checks	Dockerfile (healthcheck) + compose (depends_on)
Variables de entorno	.env + docker-compose.yml
Bind mounts	backend:/app (desarrollo)
CORS	nginx.conf + Program.cs (comunicación frontend-backend)
Build arguments	.dockerignore (optimización)

📚 Recursos Relacionados

Docker Docs: https://docs.docker.com/
Docker Compose Docs: https://docs.docker.com/compose/

Name		Name	Last commit message	Last commit date
Latest commit History 9 Commits
backend		backend
frontend		frontend
scripts		scripts
.gitignore		.gitignore
README.md		README.md
docker-compose.yml		docker-compose.yml
policy.json		policy.json
simple_service.yml		simple_service.yml
trust-policy.json		trust-policy.json

Folders and files

Latest commit

History

Repository files navigation

📝 Gestor de Tareas - Ejemplo Full-Stack con Docker Compose

🏗️ Arquitectura

🎯 Stack Tecnológico

🎓 Versiones Progresivas de Dockerfiles

📋 Requisitos Previos

Verificar instalación:

🚀 Inicio Rápido

1. Clonar/Descargar el proyecto

2. Iniciar todos los servicios

3. Esperar a que esté lista la BD (~15-20 segundos)

4. Acceder a la aplicación

📖 Comandos Principales

Ver estado de servicios

Ver logs

Ejecutar comandos dentro de contenedores

Reconstruir imágenes

Reiniciar servicios

Detener servicios

🔍 Verificar Conectividad

1. API está accesible

2. Frontend está accesible

3. Base de datos está accesible desde backend

4. Ver estado de salud

💡 Casos de Uso - Cómo Interactuar

Agregar una tarea

Obtener todas las tareas

Obtener tarea específica

Actualizar tarea

Marcar como completada/pendiente

Eliminar tarea

🐛 Troubleshooting

El frontend no se conecta al backend

Puerto ya está en uso

La BD no se inicializa

Espacio en disco insuficiente

📝 Notas Importantes

Estructura de archivos

👩‍🎓 Student Task: Implement the Frontend Service

Pistas para Implementar el Servicio de Frontend:

Instrucciones:

Comandos Útiles:

📊 Monitoreo

Ver estadísticas en tiempo real

🎓 Conceptos de Docker Demostrados

📚 Recursos Relacionados

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages