Dockerizando una Aplicación React.

En esta ocasión, vamos a explorar cómo “dockerizar” una aplicación web construida con ReactJS y estilizada con Tailwind CSS, utilizando Vite como herramienta de construcción. En este tutorial no vamos a cubrir la instalación de Docker, eso lo pueden ver aquí.

1. Dockerfile

Una vez que tenemos nuestra aplicación Reactjs, creamos el archivo Dockerfile en la raíz del proyecto, con las siguientes instrucciones:

FROM node:23-alpine

WORKDIR /app

COPY package*.json .

COPY tsconfig*.json .

RUN npm install

COPY . .

EXPOSE 5173

CMD ["npm", "run", "dev"]

Explicación de cada línea

• FROM Especifica la imagen base que se usará para construir la nueva imagen. node:23-alpine: Es una imagen ligera de Node.js basada en Alpine Linux.

• WORKDIR Establece el directorio de trabajo dentro del contenedor. /app: Es el directorio donde se ejecutarán los comandos subsecuentes dentro del contenedor.

• COPY Copia archivos o directorios desde el sistema de archivos de la máquina host al sistema de archivos del contenedor. package*.json y tsconfig*.json: Copian estos archivos específicos al directorio de trabajo actual (/app) en el contenedor. El * indica que cualquier archivo que empiece con lo que está detrás del símbolo, lo va a copiar. En este proyecto además estamos usando Typescript, por lo que es necesario copiar los archivos de configuración. . (punto): Representa el directorio actual en la máquina host y el contenedor.
• RUN Ejecuta comandos dentro de la imagen durante el proceso de construcción. npm install: Instala las dependencias definidas en package.json dentro del contenedor.

• EXPOSE Declara el puerto en el que la aplicación dentro del contenedor estará escuchando. 5173: Es el puerto donde la aplicación (Vite) estará accesible.

• CMD
  Define el comando por defecto que se ejecutará cuando se inicie el contenedor. npm run dev: Inicia la aplicación en modo de desarrollo utilizando el script definido en package.json.

2. dockerignore

Creamos otro archivo en la raíz del proyecto .dockerignore con las siguientes líneas: node_modules .git

3. Modificar package.json

En la sección de scripts dentro del archivo package.json, debemos modificar esta línea: "scripts": { "dev": "vite --host 0.0.0.0", ... }

Explicación

• Configura el servidor de Vite para que escuche en todas las interfaces de red del contenedor o la máquina host.
• En lugar de limitarse a localhost (que solo es accesible desde la máquina donde se ejecuta), el servidor estará accesible desde:
  • La máquina host (si está en un contenedor Docker).
  • Dispositivos conectados en la misma red local.

Por qué es importante en un entorno Docker

Cuando ejecutas tu aplicación dentro de un contenedor Docker:

1. Aislamiento del contenedor:
   El contenedor es una entidad separada de tu máquina host. Si el servidor de desarrollo de Vite escucha únicamente en localhost (comportamiento predeterminado), la aplicación no será accesible desde fuera del contenedor.
2. Acceso externo:
   Al usar --host 0.0.0.0, permites que el servidor sea accesible desde el puerto que expusiste en el contenedor. Esto es fundamental para pruebas locales cuando desarrollas en Docker.

¿Qué pasa si no usas --host 0.0.0.0?

• La aplicación solo será accesible desde dentro del contenedor o desde la máquina donde se ejecuta el servidor de desarrollo. No será accesible desde el navegador en tu máquina host ni desde otros dispositivos.

4. Build imagen

En la terminal escribimos el siguiente comando:

docker build -t my-react-app:1.0.0 .

Se construye una imagen Docker con la aplicación React y se etiqueta como my-react-app:1.0.0.

5. Mapeo de volúmen y creación del contenedor

Luego de verificar que nuestra imagen esté creada con docker images, la ejecutamos en la terminal con el siguiente comando:

docker run -p 5173:5173 -v "$(pwd):/app" my-react-app:1.0.0

• -v "$(pwd):/app": Mapea tu directorio local actual ($(pwd)) al directorio /app dentro del contenedor.
• Esto asegura que los cambios en tu código local se reflejen automáticamente en el contenedor.

Cuando ejecutas tu aplicación dentro de un contenedor, los archivos locales y los del contenedor están separados. Por eso, si no creamos un volúmen que conecte nuestro sistema de archivos local con el contenedor, los cambios realizados en nuestra máquina no se reflejarán automáticamente en el contenedor.

6. Listo

Esto iniciará tu aplicación y la hará accesible en http://localhost:5173.