Dockerizar App React

Equipo 

Las características con el equipo que estamos usando seria: 

• Sistema Operativo: Windows  
• Versión: Windows 10 
• Memoria RAM: 16GB 

Objetivo 

EL objetivo principal es Dockerizar una app React , ya sea proyecto nuevo o personalizado. En el proceso veremos tipos de errores que nos pueden salir y como solucionarlo. 

Pasos 

Instalación Docker 

El primer paso es instalar Docker Desktop para WIndows , ya que nosotros estamos usando este sistema operativo. 

Usamos el siguiente link para descargarlo:  https://docs.docker.com/desktop/install/windows-install/ 

Una vez estemos en la página daremos click en el botón «Docker Desktop for Windows».  

Y este nos abrirá un ejecutable , en mi caso como ya lo tengo instalado y volverlo a instalar me lleva más de 1h por motivos del pc, lo cancelaré. 

Cuando termine de descargarlo abren el ejecutable y lo instalan, en las opciones a la hora de instalar solo dan click en «siguiente» hasta que tengan la opción de «finalizar». 

Al dar click en «finalizar» les puede salir dos opciones: 

• Completado con satisfacción. 
• Error. 

En mi caso me salió el error de WSL, que en resumen seria que nuestra máquina no tiene la configuración necesaria para la distribución de WSL, además nos recomienda que habilitemos la plataforma de máquinas virtuales. 

Una solución rápida para este error lo podemos encontrar en el siguiente link: https://learn.microsoft.com/en-us/windows/wsl/install 

Lo que nos dice en la página es ejecutar un comando en powershell , ya que con esto habilitaremos nuestra plataforma de virtualización que es lo que se quejaba el error mencionado. 

Si te pide datos como username o password introducelos, da igual si son reales o no. 

Una vez ejecutado el comando reiniciamos nuestra maquina/equipo , y con esto ya estaría solucionado. 

Para comprobar que nuestro docker esta funcionando correctamente podemos hacerlo de dos formas: 

• Comando: Abrimos nuestro cmder o cmd , y escribimos docker –version 

• Aplicación: Tenemos que ver que nuestra aplicación se encuentre verde, ya que esto indicado que esta ok. La parte de abajo en la imagen. 

Dockerizar App 

Cuando tengamos nuestra aplicación Docker instalada correctamente , nos toca ir al siguiente paso, que es explicar que es lo que vamos a hacer con esta aplicación. 

Un resumen rápido sobre Docker seria , que este es una herramienta que nos permite desplegar aplicaciones en contenedores. 

En estos contenedores aparte de aplicaciones tanto nuevos como personalizados también puede tener bases de datos , sistemas operativos e incluso servidores como apache , nginx , etc. 

Una ventaja de desplegarlo de esta forma es que son contenedores individuales y , si tú quieres puedes conectar diferentes contenedores para crear proyectos más avanzados. 

Una vez explicado esto, vamos a crear un proyecto en react , yo en mi caso lo llame react-docker. Lo abrimos con visual studio code.

En este caso como es nuevo y solo modifiqué un párrafo no tiene nada, pero nos puede valer igual para la práctica. 

Antes de todo tenemos que irnos a nuestro archivo «package.json» y añadir el elemento «devDependencies» que lo tengo seleccionado. Este elemento nos permitirá desplegar nuestra imagen sin errores. 

Para añadir el elemento de forma automática en el packagre.json usaremos el siguiente comando en la terminal: 

npm install –save-dev @babel/plugin-proposal-private-property-in-object 

Este comando lo podemos encontrar en el siguiente link : https://stackoverflow.com/questions/76435306/babel-preset-react-app-is-importing-the-babel-plugin-proposal-private-propert  

En mi caso al hacer pruebas y no añadir el elemento mencionado arriba, me aparecía el siguiente error al intentar desplegar una imagen.  

Perfecto, ahora seguimos con los dos fichero más importante a la hora de dockerizar una app, estos son  

• .dockerignore. Este fichero nos permite ignorar ciertos componentes al crear una imagen docker, en nuestro caso lo que tenemos que añadir en este fichero es el node_modules y los ficheros docker ya que no lo queremos en la imagen. Ya que estos dos ficheros solo lo usaremos a la hora de crear imágenes. 

• Dockerfile. Este fichero contiene una serie de pasos , que tiene un orden de arriba hasta abajo , y lee uno a uno.  Un resumen de estos comando seria que estamos obteniendo una imagen de node ya que react trabaja con este y otra imagen de un servidor nginx para levantar ahí la imagen. 

Una vez que tenemos los dos ficheros configurados de forma que nos interesa , es hora de crear nuestra imagen. 

Para crear la imagen docker usaremos el siguiente comando, este leerá los pasos del Docker filé y lo construirá. 

docker build –t «nombre-docker» «ruta-dockerfile» 

Para comprobar que la imagen se nos creó podemos usar este comando, este nos muestra todas las imágenes que tenemos. 

docker images 

Ahora desplegaremos nuestra imagen , y usaremos el ultimo comando. En la imagen podemos comprobar que no salto ningún error y esta arrancado, haremos las comprobaciones. 

docker  run –p «puerto» «nombre-docker» 

Normalmente un servidor React se suele visualizar en el localhost:3000 , iremos a un navegador y lo comprobaremos. 

Como vemos la página no se muestra. Ahora pondremos localhost:2000 ya que ese es el puerto que le hemos indicado para desplegar nuestra imagen en el contenedor. 

Nuestro contenedor ya esta arrancado y podemos verlo. 

Gracias por leer hasta aquí y un saludo 😊. 

Autor/a: Jhon Flores Gutiérrez 

Curso: Desarrollo Web Full Stack + MultiCloud con Azure y AWS 

Centro: Tajamar Tech 

Año académico: 2023-2024