Contenido del curso
Despliegue de Aplicaciones con Docker Compose: Frontend y Backend
Dominar la integración de frontend y backend en un proyecto es clave para desarrollar aplicaciones robustas y eficientes. Docker Compose facilita esta tarea permitiendo desplegar ambos entornos en contenedores separados pero comunicados entre sí de manera sencilla y estructurada.
¿Qué es Docker Compose y para qué sirve?
Docker Compose es una herramienta que permite definir y gestionar múltiples contenedores Docker a través de un único archivo YAML. Utilizando Compose puedes configurar servicios como backend y frontend de forma clara y organizada, lo que facilita su despliegue y comunicación.
¿Cómo configurar los servicios en Docker Compose?
Para preparar un despliegue usando Docker Compose es necesario crear un archivo docker-compose.yaml. Este archivo define tanto la versión del esquema (por ejemplo, 3.7) como los diferentes servicios (contenedores) a utilizar.
Algunos puntos esenciales en la configuración incluyen:
depends_on para indicar explícitamente que un servicio depende de otro, como el frontend que depende del backend ya desplegado.Ejemplo práctico del archivo YAML sería:
version: '3.7' services: backend: image: backend build: context: ./backend ports: - 5000:5000 frontend: image: frontend build: context: ./frontend ports: - 8080:80 depends_on: - backend
¿Cómo interactúan los contenedores entre sí?
Los contenedores creados por Docker Compose forman parte de una red interna, permitiendo comunicarse directamente utilizando sus nombres de contenedor como dominios. Desde el exterior, podrías conectarte mediante localhost, pero internamente es necesario usar nombres asignados por Docker Compose (por ejemplo, clase19-backend1).
La comunicación puede ser:
La sintaxis interna para una petición desde un contenedor frontend hacia backend podría ser mediante un comando tipo:
curl clase19-backend1:5000/getMyInfo
Recuerda ajustar las URL internas utilizando el nombre asignado a cada contenedor y no localhost, ya que internamente los contenedores interpretan localhost como ellos mismos.
¿Qué considerar al manejar los puertos en Docker Compose?
Aunque existen algunas convenciones comunes, como utilizar el puerto 5000 para aplicaciones Python o el puerto 80 para servidores web, estos puertos pueden modificarse libremente según necesidades individuales. Docker Compose ofrece flexibilidad en este sentido, dejando claros los puertos utilizados en la sección correspondiente del archivo YAML.
Algunos ejemplos comunes de configuraciones son:
- 9000:5000
- 8080:80
Estos ajustes permiten adaptarse fácilmente a diversos escenarios, desarrollos y estándares propios del equipo.
Invitamos a compartir tus experiencias usando Docker Compose en tus proyectos. ¿Ya has utilizado esta herramienta para gestionar la comunicación entre frontend y backend? ¡Cuéntanos cómo te fue!
Cristian Pisco Intriago
Estudiante
José Pablo Jiménez Cucanán
Estudiante
Iván Andrés Pineda Salazar
Estudiante
Abraham Siso
Estudiante
Daniela Quintana
Estudiante
Amin Espinoza
Profesor
Gabriel Enrique Ortega Colmenares
Estudiante
Alba Nubia Giraldo Molina
EstudianteAmin Espinoza
Profesor
Guillermo Jimenez
EstudianteIván Andrés Pineda Salazar
EstudianteAmin Espinoza
Profesor
José Fabián Beltrán Meza
Estudiante
Airy Nieves
Estudiante
Daniel Eduardo Rojas Pulido
EstudianteJosé Pablo Jiménez Cucanán
EstudianteAmin Espinoza
Profesor
Johan Puentes
EstudianteAmin Espinoza
Profesor
Ivan David Martinez Baron
EstudianteAmin Espinoza
Profesor
Gustavo Pú
EstudianteDaniela Quintana
Estudiante
Jair Israel Avilés Eusebio
Estudiante
Mario Alexander Vargas Celis
Estudiante
IVAN CARAPIA BARAJAS
Estudiante
Jose Emmanuel Chavez Narvaez
Estudiante
Luis Uriel Lugo Ramírez
EstudianteStephanie Martha Peñaloza Cortés
EstudianteAmin Espinoza
Profesor
Cristian Mora Jimenez
Estudiante
Ruben Galindo
Estudiante
ROMMEL DUAREZ SAENZ
Estudiante
Martín Correa
EstudianteRuben Galindo
EstudianteDaniel Eduardo Rojas Pulido
EstudianteAmin Espinoza
ProfesorEl ejemplo de esta clase funciona muy bien como ambiente de desarrollo. Sin embargo, la práctica más común que se hace cuando se lo quiere llevar a un ambiente de desarrollo y producción es crear un REVERSE PROXY, este proxy puede ser un nuevo servicio en el docker-compose o agregarlo en el Dockerfile del servicio frontend.
En mi caso lo agregué en el servicio frontend. el Dockerfile del frontend quedaría así:
FROM nginx:latest
COPY /website /usr/share/nginx/html COPY nginx.default.conf /etc/nginx/conf.d/default.conf
Dentro de la carpeta frontend crear el archivo nginx.default.conf que contiene lo siguiente:
server { listen 80; server_name localhost; index index.html; root /usr/share/nginx/html; location / { try_files $uri $uri/ =404; add_header Cache-Control "no-cache"; } location /api { proxy_pass <URL>; } }
El cambio que hice en el backend fue cambiar el endpoint
@app.route('/getMyInfo') → @app.route('/api/getMyInfo')
Agregué la librería flask-cors en el archivo requirements.txt
Flask==3.0.0 waitress==2.0.0 flask-cors==3.0.10 # app.py import json from flask import Flask from flask_cors import CORS
app = Flask(__name__) CORS(app)
@app.route('/api/getMyInfo') def getMyInfo(): value = { "name": "Amin", "lastname": "Espinoza", "socialMedia": [ {"facebookUser": "aminespinoza10"}, {"instagramUser": "aminespinoza10"}, {"xUser": "aminespinoza"}, {"linkedin": "amin-espinoza"}, {"githubUser": "aminespinoza10"} ], "blog": "", "author": "Miranda Espinoza" } return json.dumps(value)
reverse proxy es muy útil. A mi me ha servido para acceder a múltiples servicios en contenedores desde un único diminio
Gracias Cristian, buen aporte.
En 2025 no es necesario incluir la version en el docker-compose.yml
Si tienes mac y tienen error con el puerto 5000, sólo desactiva el AirPlay y listo :)
Oh!!! Muy buen tip!! Gracias por eso Daniela!!
genia !
Amin, falta cargar los recursos 😉
Muchas gracias Alba, ya lo notificaré
Siguen sin estar los recursos
Si mencionas recursos, se espera que estén disponibles, pero en varios vídeos ha habido el mismo problema. Platzi hay que prestar atención a esos detalles.$$$$
Gracias por hacerlo notar, ya veré que podemos hacer.
Los cargaron en el video anterior
La clase se centra en el despliegue de aplicaciones con Docker Compose, que permite orquestar contenedores de frontend y backend. Aquí tienes un resumen de los comandos clave:
docker compose build: Compila las imágenes definidas en el archivo docker-compose.yaml.docker compose up: Inicia los contenedores y establece la red entre ellos.docker compose down: Detiene y elimina los contenedores y redes creados.Estos comandos son esenciales para gestionar la creación y ejecución de contenedores, facilitando la comunicación entre el frontend y el backend de la aplicación sin conflictos.
Muy completa la info, gracias
Se puede ejecutar docker-compose up en segundo plano usando el flag -d (diminutivo de Detached)
¡Es correcto! ¡Gracias por el aporte!
algo a considerar es que no podemos usar cualquier puerto, la razón principal de usar puertos superiores al 3000 o muy superiores a los primeros puertos, es por el hecho de que algunos puertos están reservados para operaciones del sistema operativo y programas de uso cotidiano, puedes usar el que quieras pero ten en cuenta esto cuando hagas deploy o desarrolles un proyecto.
Eso es cierto, sin embargo creo que al mencionar "cualquier puerto" es que ya estamos dando por hecho que hay algunos "sagrados" como el 80, 8080 o 443.
Lo que no me queda claro es porque ambas imagenes se cargan en un mismo contenedor. No se supone que cada imagen va en un contenedor?
De hecho se cargan en una "lista de contenedores", lo que Compose hace es solo unificarlos como una especie de orquestador, si expandes este contenedor podrás ver ahí todos los demás!
1. Crear un archivo docker-compose.yml
Este archivo YAML define todas las configuraciones necesarias para desplegar los contenedores, incluyendo las imágenes a utilizar, los puertos a exponer, las dependencias entre servicios, volúmenes para persistencia de datos, y más.
Ejemplo de un docker-compose.yml para una aplicación web y su base de datos:
version: '3'
services:
web:
image: my-web-app:latest
ports:
- "5000:5000"
depends_on:
- db
networks:
- mynetwork
db:
image: postgres:latest
environment:
POSTGRES_PASSWORD: mysecretpassword
networks:
- mynetwork
networks:
mynetwork:
En este ejemplo:
my-web-app:latest, mapeando el puerto 5000 del host al puerto 5000 del contenedor y dependiendo del servicio de base de datos.postgres:latest con una variable de entorno para la contraseña.2. Iniciar los servicios con Docker Compose
Una vez que tienes tu archivo docker-compose.yml configurado, puedes usar Docker Compose para desplegar tus servicios.
Este comando busca el archivo docker-compose.yml en el directorio actual, construye las imágenes si es necesario (si has especificado un contexto de construcción en lugar de una imagen preconstruida), crea los contenedores y los inicia.
Este comando detiene y elimina los contenedores, redes, y otros recursos creados al iniciar los servicios.
3. Escalar servicios
Docker Compose también permite escalar servicios fácilmente, aumentando o disminuyendo el número de réplicas de contenedores que se están ejecutando.
Este comando aumentaría el número de contenedores del servicio web a tres.
Conclusión
Desplegar un conjunto de imágenes con Docker y Docker Compose te permite gestionar aplicaciones compuestas por múltiples servicios de una manera mucho más sencilla y reproducible, tanto en desarrollo como en producción.
Aún no están los recursos para descargar -.-
Esta en la clase anterior
Devuélvete al anterior video.
Es una buena practica poner los puertos entre comillas para evitar que YAML los interprete erroneamente como numeros en base 60
ports: - "8080:80"
La capacidad de Docker de usar DNS interno se conoce como "service discovery" o "descubrimiento de servicios". Esto permite que los contenedores se comuniquen entre sí utilizando nombres de host en lugar de direcciones IP. Cuando se crea una red en Docker, se asigna un nombre a cada contenedor, y estos pueden resolverse mediante el DNS interno de Docker, facilitando la comunicación entre servicios sin necesidad de configurar direcciones IP manualmente. Esto es clave al trabajar con Docker Compose, donde los contenedores se agrupan en una red específica.
No encuentro los recursos :(
Gracias por decirlo! Veremos que pasa.
Están en la clase 17
¿Cuándo debo usar la instrucción depends_on?
Imagina que tu aplicación es un restaurante. El frontend son los meseros y el backend es la cocina. Si los meseros empiezan a tomar órdenes antes de que la cocina esté abierta, habrá un caos. La instrucción depends_on en tu archivo docker-compose.yml garantiza exactamente este orden lógico de encendido.
Debes usarla siempre que un servicio necesite que otro esté funcionando previamente para no colapsar. En arquitecturas modernas, es común que una interfaz web intente consumir datos de una API apenas arranca. Si el backend tarda unos segundos más en levantar, el frontend arrojará errores de conexión. Al declarar depends_on: - backend, le dices a Docker Compose que ponga en pausa el despliegue del frontend hasta que el contenedor del backend esté completamente creado y listo para recibir peticiones. Es una regla de oro para evitar errores de sincronización en tus despliegues.
en clase no dejo claro como debía ser el docker-compose.yml para que el contenedor backend solo pudiese ser accedido desde dentro de la red de docker compose?
Hola ROMMEL. Para que el contenedor del backend solo sea accesible internamente y no desde fuera (tu máquina local), simplemente debes eliminar la sección ports de su configuración en el archivo docker-compose.yml.
Al quitar los puertos, Docker no mapeará el servicio a tu máquina, pero el backend seguirá siendo accesible para el frontend a través de la red interna de Docker, usando el nombre del servicio (ej. backend) como host.
Tu configuración quedaría así:
services: backend: build: ./backend # Sin la sección 'ports', no se expone al exterior frontend: build: ./frontend ports: - "8080:80" depends_on: - backend
De esta forma, el frontend se comunica con el backend mediante el nombre http://backend:5000, manteniendo el backend aislado de conexiones externas.
Te recomiendo revisar Redes en Docker: Configuración y Gestión Eficiente de Contenedores para profundizar en cómo funcionan estas comunicaciones internas.
Es verdad que el puerto es una elección personal, pero hay que tener en cuanta que hay convenciones en la industria y varios puertos ya estan reservados para otras cosas
¿Cómo se comunican los contenedores entre sí?
Docker Compose actúa como un operador telefónico privado para tus aplicaciones. Cuando levantas múltiples servicios, crea automáticamente una red interna exclusiva donde todos tus contenedores están conectados.
En lugar de usar direcciones IP complicadas que cambian constantemente, Docker utiliza un sistema de resolución de nombres (DNS) interno. Esto significa que los contenedores se hablan utilizando directamente el nombre del servicio que definiste en tu archivo YAML. Si llamaste a tu API backend, el frontend solo necesita hacer peticiones a http://backend:5000. Es como guardar un contacto en tu celular: no necesitas memorizar su número, solo buscas su nombre. Esta característica es vital porque te permite aislar tus bases de datos o APIs del mundo exterior, asegurando que solo los contenedores autorizados dentro de esa misma red puedan interactuar entre ellos de forma segura y directa.
Esta vez si me funcionó todo con normalidad, muy cómodo el tema del docker compose
Nice!