Docker desktop Download link
o
Docker ubuntu
Uninstall older versions sudo apt-get remove docker docker-engine docker.io containerd runc
Install last version sudo apt-get install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin
Crear un espacio de trabajo de 2 aplicaciones node. Una aplicación backend en express y otra aplicación frontend en react.
- Crear aplicación backend
- Crear aplicación frontend
- Crear Dockerfile de las 2 aplicaciones
- Crear docker-compose.yml
- Ejecutar Servicios
- Terminar servicios y borrar imágenes
Para empezar con el proyecto backend creamos la carpeta der-api-web. Dentro del directorio se usara el comando npm init para inicializar el proyecto. Luego instalaremos express y cors, para poder iniciar nuestra api, esto lo haremos con el comando npm i express cors. Después podemos crear nuestro archivo index.js que correra nuestra aplicación. Para verificar que esta funcionando se usara el comando node index.js. Finalmente verificamos que nuestro backend se este ejecutando correctamente.
Para empezar con el proyecto frontend se usara el comando yarn create vite para crear el proyecto. Luego dentro del directorio instalaremos todas las dependencias con el comando yarn. y Ejecutaremos la aplicación con el comando yarn dev. y verificamos que nuestro frontend se este ejecutando correctamente.
Para verificar que el frontend se pueda comunicar correctamente con el backend utilizaremos fetch. Dentro de App.jsx agregaremos una función que haga una petición al api local, cuando se haga clic a un botón, Si la petición se hace correctamente se mostrara un mensaje de alerta y el texto del botón cambiara a la respuesta del api.
Dentro de la aplicación der-api-web creamos el archivo Dockerfile con los siguiente elementos.
Indicamos la imagen base, creamos el directorio donde se guardara la aplicación, copeamos el contenido de nuestra aplicación local a el directorio creado, definimos el directorio de trabajo, hacemos la instalación de las dependencias, exponemos el puerto que se usara, y finalmente el comando para ejecutar nuestra aplicación.
Dentro de la aplicación der-api-web creamos el archivo Dockerfile con los siguiente elementos.
Indicamos la imagen base, creamos el directorio donde se guardara la aplicación, copeamos el contenido de nuestra aplicación local a el directorio creado, definimos el directorio de trabajo, hacemos la instalación de las dependencias, exponemos el puerto que se usara, y finalmente el comando para ejecutar nuestra aplicación.
En la carpeta raiz de nuestros 2 proyectos creamos el archivo docker-compose.yml con los siguientes elementos.
La versión de escritura, los servicios que se usaran, de donde se crearan las imagenes, que nombre tendran el contenedor creado, y que puertos se mapearan.
Para crear las imagenes correspondientes de nuestros proyectos, crear los contenedores, red para comunicarse entre contenedores utilizaremos el comando docker compose up.
Ahora podemos revisar localhost:3000 para ver nuestro API
También localhost:5173 para ver nuestra UI
Para terminar podemos borrar los contenedores y red con el comando docker compose down. y borrar las imagenes con el comando docker image rm.
