Cómo usar Docker en una aplicación fullstack (React+Node)

Docker es una plataforma que permite empaquetar, distribuir y ejecutar aplicaciones en contenedores sin instalar dependencias directamente en tu computadora, lo que simplifica la implementación y administración de aplicaciones.

En otras palabras, Docker es una herramienta que te ayuda a empaquetar una aplicación con todas sus dependencias en un contenedor para que pueda ejecutarse en cualquier lugar, independientemente del entorno en el que se ejecute.

¿Para qué sirve Docker?

Al dedicar tiempo a estudiar desarrollo Web, eventualmente nos toparemos con esta tecnología llamada Docker, pero ¿para qué sirve realmente? En pocas palabras, Docker es una herramienta que permite iniciar el proyecto de forma más sencilla, permitiendo crear una base de datos, ejecutar el backend y el frontend en un solo comando, sin instalar nada más que el propio Docker.

Pero ¿por qué es importante? Bueno, la principal dificultad que resuelve Docker es garantizar que una aplicación funcionará de la misma manera en diferentes entornos. Esto se debe a que con Docker puedes empaquetar todas las dependencias de tu aplicación en un contenedor, incluidos el sistema operativo, las bibliotecas y otras herramientas. De esta forma, es posible garantizar que la aplicación funcione de la misma manera en diferentes máquinas y sistemas operativos.

¿Dónde se usa Docker?

Empresas como Uber, PayPal, Netflix y Spotify utilizan Docker en sus aplicaciones. Esto se debe a que Docker hace que la implementación y administración de aplicaciones sea más fácil y eficiente, permitiéndoles desarrollar nuevas características y mejoras en lugar de lidiar con problemas de compatibilidad y entorno.

Además, Docker también es una herramienta muy popular entre los desarrolladores independientes y los equipos de desarrollo de software, ya que les permite compartir fácilmente aplicaciones y servicios con otras personas y equipos sin preocuparse por las diferencias ambientales.

En resumen, Docker es una plataforma poderosa y cada vez más popular en el mercado tecnológico, que resuelve una de las principales dificultades en el desarrollo de software: asegurar la compatibilidad y consistencia de las aplicaciones en diferentes escenarios. Con Docker, los desarrolladores pueden centrarse en crear y mejorar sus aplicaciones sin preocuparse por problemas de implementación y administración.

Cómo usar Docker en fullstack ( React + Nodejs)

Inicialmente crearemos una aplicación sencilla en React y otra sencilla usando una API en Nodejs que nos dará un “Hello World!” como respuesta.

Para comenzar, necesitas tener instalado Node.js en tu máquina. Puedes descargar e instalar la última versión de Node.js desde el sitio web oficial.

Ahora crea una carpeta para el proyecto:

mkdir full-stack-docker

Crea una carpeta llamada backend para el proyecto y accede a él a través de la terminal. Luego inicia un proyecto Node.js con el comando:

npm init

npm install express


Crea un archivo index.js y pega este código.

Este código crea un servidor web utilizando Express y define una ruta /home que retorna un objeto JSON con el mensaje "Hello World!".

Podemos probar la ruta desde el backend e intentando acceder a ella mediante la extensión VS Code llamada Thunder Client.

Ahora generamos un Dockerfile dentro de la carpeta:

touch Dockerfile

FROM

El comando FROM define la "imagen base" que se utilizará como punto de partida para crear la "imagen Docker". En este caso, la imagen base es Node.js en la versión 19.0.1.

EXPOSE

El comando EXPOSE define el puerto expuesto por la imagen. En este caso, será el puerto 3001. Esto significa que la imagen estará lista para recibir conexiones en el puerto 3001.

WORKDIR

El comando WORKDIR define el directorio de trabajo de la imagen, es decir, el directorio donde se ejecutarán los comandos posteriores. En este caso, el directorio de trabajo es /backend.

COPY

El comando COPY copia los archivos package.json y package-lock.json desde la máquina local al directorio /backend en la imagen. Estos archivos contienen la información necesaria para instalar las dependencias de la aplicación.

RUN

El comando RUN ejecuta el comando npm install en el directorio /backend. Esto instala las dependencias necesarias para que la aplicación funcione.

COPY

El comando COPY copia todo el contenido de la máquina local al directorio /backend en la imagen.

CMD

Finalmente, el comando CMD define el comando que se ejecutará cuando se lance la imagen. En este caso, se ejecutará el comando npm start, que iniciará la aplicación.

Ahora pasemos al frontend, para comenzar, crea una aplicación React en un directorio llamado frontend:

npx create-react-app frontend

cd frontend

Substituye App.js por esto:

Este es un componente de función de React que utiliza el hook useState para definir el estado inicial de message como una string vacía. El hook useEffect se usa para ejecutar una llamada de API fetch para "http://localhost:3001/home" y actualizar el estado message con el mensaje retornado por el servidor. El array vacío [] como segundo parámetro de useEffect garantiza que la llamada de la API se haga una vez que el componente fue montado. Lo restante del código renderiza los componentes.

Ahora hacemos el Dockerfile del frontend.

touch Dockerfile

En este Dockerfile comenzamos definiendo la misma imagen base que antes, luego definimos el directorio de trabajo en la imagen y copiamos todo el contenido del directorio actual al directorio de trabajo en la imagen. A continuación, instalamos las dependencias de la aplicación usando el administrador de paquetes npm y definimos el comando predeterminado que se ejecutará cuando se inicie el contenedor.

Con esto podemos crear docker-compose.yml, un archivo que se encargará de resumir la forma en que subimos al servidor, permitiéndonos usar un solo comando.

Para hacer esto, ve al directorio /full-stack-docker y crea el archivo docker-compose.yml:

touch docker-compose.yml

Es un archivo Docker Compose para una aplicación web. El archivo está escrito en formato YAML y contiene tres secciones principales: version, services y networks.

La sección version indica la versión de Docker Compose que se utilizará para crear y ejecutar el entorno. En el caso de este archivo la versión es 3.9.

La sección services describe los contenedores que se crearán. En este ejemplo, hay dos servicios: frontend y backend. Cada servicio tiene su propio nombre de contenedor, definido por la opción container_name, y se construye a partir de un Dockerfile específico, indicado por la opción build.

Además, cada servicio expone un puerto, definido por la opción ports. La opción working_dir define el directorio de trabajo dentro del contenedor. La opción depends_on indica que el servicio frontend depende del servicio backend. La opción restart define la política de reinicio del contenedor en caso de falla. La opción networks define la red a la que está conectado el contenedor.

La sección volumes define volúmenes de datos que se pueden compartir entre contenedores.

La sección networks define las redes que se crearán para conectar los contenedores. En este caso, existe una sola red, llamada web-net.

Ahora que entendemos todos los archivos, podemos ejecutar la aplicación completa con el comando:

docker-compose up -d

Después de aplicar este proyecto podremos comprender las bases de Docker y cómo puede resultar útil.

Conclusión

Docker es una herramienta esencial para cualquier desarrollador web Full Stack. Docker le permite empaquetar, distribuir y ejecutar aplicaciones en contenedores, haciendo que la implementación y administración de aplicaciones sea más fácil y eficiente. Con Docker es posible garantizar la compatibilidad y coherencia de las aplicaciones en diferentes entornos, lo que supone una de las principales dificultades en el desarrollo de software.

Al crear un proyecto web Fullstack usando React y Node.js, pude ver de primera mano la importancia de Docker. Con Docker, pude empaquetar fácilmente mi aplicación Node.js en un contenedor, permitiéndole ejecutarse en cualquier entorno sin problemas de compatibilidad.

Crear la imagen de Docker fue fácil y rápido gracias a las numerosas funciones de la plataforma, como Dockerfile, que me permitió especificar todas las dependencias de mi proyecto. Esto me permitió crear imágenes consistentes y confiables que se pueden compartir fácilmente con otros desarrolladores.

En conclusión, utilizar Docker es una excelente manera de garantizar la coherencia y compatibilidad de su aplicación en diferentes entornos. Es una herramienta esencial para cualquier desarrollador web Full Stack que desee crear aplicaciones más eficientes y fácilmente compartibles.