Índice de contenido
1. Introducción
2. Requisitos previos
3. Proyecto de ejemplo
4. ¿Qué es Docker Compose?
5. Con Docker Compose
5.1 API
5.2 UI
5.3 Archivo Docker Compose
6. Comunicación entre servicios
6.1 UI- Servicio-Comunicación
6.2 Servicio-Mongo-Comunicación
7. Estructura del proyecto
8. Demostración
9. Resumen
10. Conclusión
Introducción
Docker Compose es realmente útil cuando no tenemos el entorno de desarrollo configurado en nuestra máquina local para ejecutar todas las partes de la aplicación a probar o queremos ejecutar todas las partes de la aplicación con un solo comando. Por ejemplo, si quieres ejecutar la API REST de NodeJS y la base de datos MongoDB en diferentes puertos y necesitas un único comando para configurar y ejecutar todo. Puedes conseguirlo con Docker Compose.
En este post, veremos qué es Docker Compose y cómo podemos hacer el desarrollo local de MEAN Stack escrito en Typescript con Docker Compose, así como sus ventajas.
Requisitos previos
Hay algunos requisitos previos para este post. Usted necesita tener un NodeJS instalado en su máquina y algunas otras herramientas que se requieren para completar este proyecto.
- NodeJS
- Express Framework
- Mongoose
- MongoDB
- VSCode
- Postman
- nodemon
- dotenv
- Angular CLI
- TypeScript
- ngx-bootstrap
- Docker
- Docker Compose
NodeJS: Como tiempo de ejecución de JavaScript asíncrono impulsado por eventos, Node.js está diseñado para construir aplicaciones de red escalables.
Express Framework: Express es un framework de aplicaciones web Node.js mínimo y flexible que proporciona un conjunto robusto de características para aplicaciones web y móviles.
Mongoose: elegante modelado de objetos MongoDB para node.js
MongoDB: MongoDB es una base de datos distribuida de propósito general, basada en documentos, construida para los desarrolladores de aplicaciones modernas y para la era de la nube.
VSCode: El editor que estamos utilizando para el proyecto. Es de código abierto y puedes descargarlo aquí.
Postman: Prueba manual de sus APIs.
nodemon: Para acelerar el desarrollo.
Proyecto de ejemplo
Este es un ejemplo de una simple aplicación de tareas que crea, recupera, edita y elimina tareas. En realidad, se ejecuta la API en el servidor NodeJS y se puede utilizar MongoDB para guardar todas estas tareas.
Al añadir usuarios estamos haciendo una llamada a la API del servidor nodejs para almacenarlos y obtener los mismos datos del servidor cuando los recuperemos.
¿Qué es Docker Compose?
Docker-compose es una herramienta que se utiliza para aplicaciones multi-contenedor en un solo host. Podemos ejecutar varios contenedores como servicios en un solo host con la ayuda de docker-compose.yaml.
Una vez que instalamos docker-compose, básicamente, tenemos que seguir estos tres pasos.
1- Definir Dockerfile para el servicio/contenedor
2- Definir el archivo docker-compose.yaml con todos los servicios, puertos y otros detalles
3- Ejecute este comando docker-compose up
Estos son algunos comandos útiles:
Con Docker Compose
Vamos a configurar el entorno de desarrollo con Docker Compose. En primer lugar, tenemos que instalar Docker Compose en su máquina aquí está el enlace. Comprueba la instalación con este comando docker-compose --version. Asegúrate de iniciar también el Docker Desktop para que podamos ver visualmente los contenedores, las imágenes y los volúmenes.
Una vez que tienes docker-compose instalado, hay tres cosas que necesitamos ejecutar en docker para una experiencia de desarrollo completa. Vamos a explorar una por una.
- API
- UI
- MongoDB
API
Es más fácil si definimos un Dockerfile para cada servicio. Aquí está el Dockerfile para el node express API y los siguientes son los pasos. Se ha llamado a este archivo Dockerfile.dev.
1- Partimos de la imagen base node:14-slim.
2- Establezca el directorio de trabajo como /usr/app.
3- copiar el package.json para instalar todas las dependencias.
4- Instalar todas las dependencias.
5- Necesitamos poner este comando de exposición con fines de documentación para que otros desarrolladores sepan que este servicio se ejecuta en el puerto 3080.
6- Por último, ejecutamos el comando npm run dev.
Para la API, estamos ejecutando este comando npm run dev que a su vez ejecuta este comando nodemon ./server.js localhost 3080. Como es un entorno de desarrollo estamos usando nodemon que escucha los cambios en los archivos y reinicia el servidor automáticamente.
UI
Aquí está el Dockerfile para el Angular UI y los siguientes son los pasos. Se ha llamado a este archivo Dockerfile.dev también.
1- Partimos de la imagen base node:14-slim.
2- Establecer el directorio de trabajo como /usr/app
3- copiar el package.json para instalar todas las dependencias
4- Necesitamos instalar todas las dependencias
5- Exponer el puerto 4200
6- Por último, ejecutamos el comando npm run start-on-docker
Para la UI, estamos ejecutando este comando npm run start-on-docker que a su vez ejecuta este comando ng serve - host 0.0.0.0 Como es un entorno de desarrollo estamos usando Angular CLI que escucha los cambios en los archivos y reinicia el servidor dev automáticamente y escucha todas las interfaces del contenedor.
Archivo Docker Compose
Finalmente, veamos el archivo docker-compose aquí. Como necesitamos ejecutar Angular en el puerto 4200, la API express en el puerto 3080, y MongoDB en el puerto 27017 necesitamos definir tres servicios: ui, API, y db. Definimos una red para el aislamiento y un volumen para persistir los datos incluso después de los reinicios.
Si nos fijamos en el archivo anterior hemos definido tres servicios cada uno tiene su propio archivo docker. Lo más importante aquí es la parte de los volúmenes que necesitamos para montar toda la parte de la aplicación y la carpeta node_modules también. Necesitamos montar la carpeta node_modules porque el volumen no se monta durante la construcción.
Como el comando ng serve abre el navegador cuando lo ejecutamos tenemos que añadir este stdin_open: true en el archivo docker-compose para iniciar en modo interactivo.
Vamos a ejecutar los siguientes pasos para ejecutar toda la configuración en el modo de desarrollo.
Si todo va bien, debería construirse de la misma manera que a continuación.
Aquí está el comando docker-compose up.
Puede listar el contenedor con estos comandos una vez que se ejecute el comando anterior.
listado de contenedores:
Incluso puede explorar esto en la herramienta Docker Desktop GUI como se indica a continuación.
Comunicación entre servicios
Ahora los servicios se ejecutan en la red local y estos servicios deben ser accesibles por el nombre del servicio. Por defecto, Compose configura una única red para tu aplicación. Cada contenedor para un servicio se une a la red por defecto y es alcanzable por otros contenedores en esa red, y descubrible por ellos en un nombre de host idéntico al nombre del contenedor.
UI-Servicio-Comunicación
Sabemos que se debe utilizar un proxy en el entorno de desarrollo en la máquina local. Debemos actualizar el proxy.conf.json con la URL http://mean-api:3080 como se indica a continuación.
Servicio-Mongo-Comunicación
Sabemos que se debe externalizar todas nuestras variables de entorno utilizando la librería dotenv. Como el nombre del servicio de MongoDB es mongo-db, debes usar la siguiente cadena de conexión.
Estructura del proyecto
Es importante entender la estructura del proyecto. Cada servicio (Angular UI y NodeJS Server) tiene su propio Dockerfile y tenemos un archivo docker-compose en la ubicación raíz.
Demostración
Si miras el diagrama de abajo, toda la configuración funciona con un solo comando docker-compose up y en el momento que cambias algo en el código puedes ver esos cambios en la UI inmediatamente.
Incluso puedes ver las colecciones en el Mongo siguiendo estos comandos.
Documentos de la lista:
Resumen
- Docker-compose es una herramienta que se utiliza para aplicaciones multicontenedor en un único host.
- Docker Compose es realmente útil cuando no tenemos el entorno de desarrollo configurado en nuestra máquina local para ejecutar todas las partes de la aplicación a probar.
- Puedes ejecutar todo el entorno de desarrollo con un solo comando docker-compose up.
- Debes definir un Dockerfile separado para el desarrollo de los servicios. En el caso anterior uno para Angular UI y otro para node api.
- Necesitamos montar volúmenes para el código de la aplicación y node_modules ya que los volúmenes no se montan durante la construcción.
- Por defecto, Compose configura un único network para tu aplicación. Cada contenedor para un servicio se une a la red por defecto y es alcanzable por otros contenedores en esa red, y descubrible por ellos en un nombre de host idéntico al nombre del contenedor.
- Como el comando ng serve abre el navegador cuando lo ejecutamos tenemos que añadir este stdin_open: true en el archivo docker-compose para iniciar en modo interactivo.
- Si el nombre del contenedor es node-api debe llamar a la api con http://node-api:3080/api
- Es necesario definir esta entrada para el objeto proxy de package.json en lugar de http://localhost:3080/api
- Si quieres instalar alguna dependencia nueva mientras desarrollas el proyecto necesitas reconstruir el docker-compose.
Conclusión
Con Docker Compose, podemos ejecutar todos los servicios que queramos con un solo comando. Es realmente útil para ejecutar las aplicaciones cuando no tienes toda la configuración necesaria para ejecutarlas en tu máquina.
¡Gracias por llegar hasta aquí!