Configuración de docker-compose.yml para iniciar todos los servicios

4.1 Inicialización

En este paso configuraremos el archivo compose.yaml para iniciar todos los servicios de nuestra aplicación multicontenedor. El archivo compose.yaml incluirá configuraciones para el frontend, backend y la base de datos, así como la definición de redes y volúmenes.

Definición de la versión de Docker Compose

Empezamos especificando la versión de Docker Compose. En este ejemplo se utiliza la versión 3:

version: '3'

4.2 Definición de servicios

Servicio 1: Frontend (ReactJS)

Definimos el servicio para el frontend, que se construirá desde el directorio frontend y estará disponible en el puerto 3000:

services:
  frontend:
    build: ./frontend
    ports:
      - "3000:3000"
    networks:
      - task-network

Servicio 2: Backend (Flask)

Definimos el servicio para el backend, que se construirá desde el directorio backend. Depende del servicio de la base de datos y estará disponible en el puerto 5000:

  backend:
    build: ./backend
    ports:
      - "5000:5000"
    depends_on:
      - database
    networks:
      - task-network
    environment:
      - DATABASE_URL=postgresql://taskuser:taskpassword@database:5432/taskdb

Dónde:

• depends_on: indica que el servicio backend depende del servicio database. Esto significa que la base de datos se iniciará antes de que inicie el backend.
• environment: configura las variables de entorno para conectarse a la base de datos.

Servicio 3: Database (PostgreSQL)

Definimos el servicio para la base de datos, utilizando la imagen oficial de postgres:13. Configuramos las variables de entorno para crear la base de datos y las credenciales del usuario:

  database:
    image: postgres:13
    environment:
      - POSTGRES_DB=taskdb
      - POSTGRES_USER=taskuser
      - POSTGRES_PASSWORD=taskpassword
    networks:
      - task-network
    volumes:
      - db-data:/var/lib/postgresql/data

Dónde:

• environment: configura las variables de entorno para crear la base de datos y el usuario al iniciar el contenedor.
• volumes: conecta el volumen db-data para el almacenamiento persistente de los datos.

4.3 Configuración de redes y volúmenes

Vamos a definir las redes y volúmenes que serán utilizados por nuestros servicios:

networks:
  task-network:
    driver: bridge
      
volumes:
  db-data:

Dónde:

• networks: define la red task-network con tipo de driver bridge, que será utilizada para la comunicación entre contenedores.
• volumes: define el volumen db-data para almacenar los datos de la base de datos.

4.4 Archivo completo docker-compose.yml

Ahora vamos a combinar todas las partes en un solo archivo docker-compose.yml:

version: '3'

services:
  frontend:
    build: ./frontend
    ports:
      - "3000:3000"
    networks:
      - task-network
        
  backend:
    build: ./backend
    ports:
      - "5000:5000"
    depends_on:
      - database
    networks:
      - task-network
    environment:
      - DATABASE_URL=postgresql://taskuser:taskpassword@database:5432/taskdb
        
  database:
    image: postgres:13
    environment:
      - POSTGRES_DB=taskdb
      - POSTGRES_USER=taskuser
      - POSTGRES_PASSWORD=taskpassword
    networks:
      - task-network
    volumes:
      - db-data:/var/lib/postgresql/data
        
networks:
  task-network:
    driver: bridge
        
volumes:
  db-data:

Explicación de las configuraciones

• build: indica la ruta al directorio con el Dockerfile para construir la imagen.
• ports: abre los puertos en el host para acceder a los servicios.
• depends_on: especifica que un servicio depende de otro para garantizar el orden de inicio.
• environment: configura las variables de entorno para los servicios.
• networks: define la red para la comunicación entre contenedores.
• volumes: define los volúmenes para el almacenamiento persistente de datos.

4.5 Inicio de la aplicación

Ahora que el archivo compose.yaml está configurado, podemos iniciar todos los servicios con un solo comando:

docker compose up

Este comando creará y ejecutará contenedores para el frontend, el backend y la base de datos, usando las configuraciones definidas en compose.yaml.

Verificar inicio

Después de iniciar los contenedores, asegúrate de que todos los servicios estén funcionando correctamente:

1. Frontend: abre el navegador y ve a la dirección http://localhost:3000, para comprobar el funcionamiento del frontend.
2. Backend: abre el navegador y ve a la dirección http://localhost:5000, para comprobar el funcionamiento del backend.
3. Base de datos: asegúrate de que el contenedor de la base de datos esté iniciado y accesible a través de la comunicación en red con el backend.