Estructura básica de contenedores para Node, Angular y un servidor de imágenes y documentos.

🧩 Estructura completa

version: '3.8'
services:
  backend:
    ...
  frontend:
    ...
  image-server:
    ...
  db:
    ...
volumes:
  ...
networks:
  ...

---

🔧 version: '3.8'

Define la versión del esquema de Docker Compose. La 3.8 es una versión compatible con muchas funciones modernas, incluyendo redes y volúmenes.

---

📦 services: → define cada contenedor de tu aplicación

🔙 backend

  backend:
    build: ./backend
    ports:
      - "3000:3000"
    volumes:
      - uploaded-images:/app/uploads
    environment:
      - DATABASE_URL=postgresql://postgres:password@db:5432/mydatabase
    depends_on:
      - db
    networks:
      - app-network

• build: ./backend: construye la imagen usando el Dockerfile dentro de la carpeta backend.
• ports: mapea el puerto 3000 del contenedor al host (localhost:3000).
• volumes: comparte un volumen llamado uploaded-images para almacenar las imágenes que subas.
• environment: define una variable de entorno con la URL de conexión a PostgreSQL.
• depends_on: espera a que el contenedor db (la base de datos) esté disponible antes de iniciar.
• networks: lo conecta a una red virtual para comunicarse con otros servicios.

---

🖼 image-server

  image-server:
    image: nginx:alpine
    ports:
      - "8080:80"
    volumes:
      - uploaded-images:/usr/share/nginx/html
    networks:
      - app-network

• Usa una imagen oficial de Nginx.
• Sirve contenido en el puerto 8080 del host.
• Monta el volumen uploaded-images, apuntando al directorio donde Nginx sirve archivos estáticos.
• Gracias a este volumen compartido, las imágenes subidas por el backend pueden ser vistas desde el navegador.

---

🌐 frontend

  frontend:
    build: ./frontend
    ports:
      - "80:80"
    depends_on:
      - backend
    networks:
      - app-network

• Construye tu aplicación Angular desde la carpeta frontend.
• Expone el puerto 80 al navegador.
• Espera a que el backend esté listo antes de iniciar.
• Se comunica con el backend e image-server a través de la misma red.

---

🛢 db (PostgreSQL)

  db:
    image: postgres:15
    restart: always
    environment:
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: password
      POSTGRES_DB: mydatabase
    volumes:
      - pgdata:/var/lib/postgresql/data
    networks:
      - app-network

• Usa una imagen oficial de PostgreSQL 15.
• Configura el usuario, contraseña y nombre de la base de datos.
• Usa un volumen (pgdata) para guardar los datos de forma persistente.
• Está en la misma red para que el backend pueda accederlo como db.

---

🗂 volumes:

volumes:
  uploaded-images:
  pgdata:

• uploaded-images: volumen compartido entre el backend y el servidor Nginx.
• pgdata: volumen persistente para la base de datos PostgreSQL.

---

🔗 networks:

networks:
  app-network:
    driver: bridge

Crea una red interna para que todos los contenedores se comuniquen por nombre (por ejemplo: http://backend:3000, http://db:5432).

---

🏁 ¿Qué sucede al correr docker-compose up --build?

1. Construye las imágenes (backend y frontend).

2. Inicia los contenedores: base de datos, backend, frontend y Nginx.

3. Los contenedores se comunican entre sí usando la red app-network.

4. Los archivos subidos desde el backend se almacenan en uploaded-images y son servidos por Nginx.

5. Angular puede acceder al backend o imágenes usando rutas como:

   • http://backend:3000
   • http://image-server:80

---

Diagrama de contenedores y su comunicación: