No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Despliegue de Aplicaciones con Docker Compose: Frontend y Backend

18/19
Recursos

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:

  • Indentación y estructura: semejante a la sintaxis en Python, usa tabulaciones para estructurar claramente los distintos servicios.
  • Imagen y contexto: para cada servicio, especifica la imagen que se generará y la ubicación de su Dockerfile.
  • Manejo de puertos: define claramente los puertos internos y externos mediante la sintaxis "puerto_externo:puerto_interno".
  • Dependencias: utiliza la palabra clave 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:

  • Expuesta claramente al usuario mediante puertos externos.
  • Restringida y accesible únicamente desde dentro de la red de contenedores en Docker.

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:

  • Para backend: ```
  • 9000:5000 ```
  • Para frontend: ```
  • 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!

Aportes 26

Preguntas 6

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

El 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": "\<https://aminespinoza.com>", "author": "Miranda Espinoza" } return json.dumps(value)
Si tienes mac y tienen error con el puerto 5000, sólo desactiva el AirPlay y listo :)
Amin, falta cargar 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.$$$$
En 2025 no es necesario incluir la version en el docker-compose.yml
Aún no están los recursos para descargar -.-
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.
Se puede ejecutar **docker-compose up** en segundo plano usando el flag **-d** (diminutivo de Detached)
No encuentro los recursos :(
### 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: * **web**: Un servicio que utiliza una imagen personalizada `my-web-app:latest`, mapeando el puerto 5000 del host al puerto 5000 del contenedor y dependiendo del servicio de base de datos. * **db**: Un servicio de base de datos utilizando la imagen `postgres:latest` con una variable de entorno para la contraseña. * **networks**: Define una red interna para que los contenedores se comuniquen entre sí. ### 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. * **Comando para iniciar los servicios**:bashCopiar códigodocker-compose up 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. * **Comando para detener los servicios**:bashCopiar códigodocker-compose down 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. * **Comando para escalar servicios**:bashCopiar códigodocker-compose up --scale web=3 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.
Esta genial, todo salio bien ![](https://static.platzi.com/media/user_upload/image-41a99871-2947-442c-a25a-b6f52bb5e385.jpg)
Este es el repositorio del curso: <https://github.com/platzi/curso-de-docker-fundamentos> En las ramas va el contenido de la clase correspondiente.
Para los que estan buscando los recursos de la clase, los encontre en un repo de Platzi. Aca se los dejo: <https://github.com/platzi/curso-de-docker-fundamentos.git>
La edición de esta y otras clases es terrible. Se les olvidó cortar pedazos de video donde el profesor regraba una escena y dice lo mismo (o similar)
Yo puedo subir varias aplicaciones fullstack donde tengo distintos contenedores en un mismo OS, es decir, varios docker-composer en un OS ?
Funciono a la perfección. EL curso de fundamentos de verdad imprimió ganas de seguir.
No encuentro los recurso de la clase. ¿Alguien me los puede compartir?
Durante el curso hubo un problema de edición de video ya que se presentan de manera recurrente dos fragmentos de grabaciones de el mismo tema que se está desarrollando en ese momento, creo que deberian revisarlo, distrae un poco, además generalmente suelen hacer propaganda en ig y en otras redes de que están grabando clases y al ver esto al menos yo espero que el contenido realmente sea premium, espero que sirva esta critica constructiva.
Al realizar el docker compose build con una version en el archivo docker-compose, arroja "the attribute `version` is obsolete, it will be ignored, please remove it to avoid potential confusion" Entonces ahora no es de uso.
version: '3.7'
No estan los recursos
No es recomendable generar una imagen para el Frontend y otra para el Backend? No sé, con el fin de escalarlo más facilmente?
Excelente curso, resolvió varias dudas que tenia.
Muy buienas tardes ¿como saber que versión estoy utilizando? ya que en su momento fue colocado en el docker-compose la versión 3.7.
excelente material, una consulta me podrás orientar cómo puedo llevar este proyecto a una vpn ubuntu 20 en digitalocean ? hay una clase me pueda ayudar, gracias !!
Al momento de hacer la solicitud al backend desde el from por medio de la consola Exec me funciono de esta manera ```js curl --location 'curso-de-docker-fundamentos-clase-17-backend-1:5000/getMyInfo' ```curl --location 'curso-de-docker-fundamentos-clase-17-backend-1:5000/getMyInfo'