Docker para Desarrolladores Frontend: Guía Práctica

¿Qué es Docker y por qué debería importarte?

Imagina que has creado una aplicación web en tu ordenador y funciona perfectamente. Pero cuando tu compañero intenta ejecutarla, le salen errores por todas partes. "En mi máquina funciona" es la frase más temida en desarrollo. Docker soluciona exactamente este problema.

Docker es como una caja de mudanza para tu aplicación: empaqueta todo lo que necesita (código, dependencias, configuraciones) en un contenedor que funciona igual en cualquier lugar, ya sea tu portátil, el servidor de tu compañero o la nube.

Conceptos básicos sin tecnicismos

Imagen vs Contenedor

• Imagen: Es la receta o plantilla. Como un molde para hacer galletas.
• Contenedor: Es la galleta en sí, la aplicación ejecutándose. Puedes crear múltiples contenedores desde una misma imagen.

Dockerfile

Es un archivo de texto donde escribes las instrucciones para construir tu imagen. Piensa en él como una lista de pasos para preparar el entorno perfecto para tu aplicación.

Tu primer Dockerfile para una aplicación React

Vamos a crear un Dockerfile simple para una aplicación React. Crea un archivo llamado Dockerfile en la raíz de tu proyecto:

# Usamos Node.js como base
FROM node:18-alpine

# Establecemos el directorio de trabajo
WORKDIR /app

# Copiamos los archivos de dependencias
COPY package*.json ./

# Instalamos las dependencias
RUN npm install

# Copiamos el resto del código
COPY . .

# Exponemos el puerto donde corre la app
EXPOSE 3000

# Comando para iniciar la aplicación
CMD ["npm", "start"]

¿Qué hace cada línea?

• FROM node:18-alpine: Partimos de una imagen que ya tiene Node.js instalado
• WORKDIR /app: Creamos y nos movemos a una carpeta llamada "app"
• COPY package*.json ./: Copiamos primero solo los archivos de dependencias
• RUN npm install: Instalamos las dependencias
• COPY . .: Copiamos todo nuestro código
• EXPOSE 3000: Indicamos que la app usará el puerto 3000
• CMD ["npm", "start"]: Comando que ejecuta la aplicación

Comandos esenciales que usarás a diario

Construir una imagen

docker build -t mi-app-react .

El -t es para darle un nombre (tag) a tu imagen.

Ejecutar un contenedor

docker run -p 3000:3000 mi-app-react

El -p 3000:3000 conecta el puerto 3000 de tu ordenador con el puerto 3000 del contenedor.

Ver contenedores en ejecución

docker ps

Detener un contenedor

docker stop [ID_DEL_CONTENEDOR]

Eliminar contenedores e imágenes

docker rm [ID_DEL_CONTENEDOR]  # Elimina un contenedor
docker rmi [ID_DE_LA_IMAGEN]    # Elimina una imagen

Dockerfile optimizado para producción

Para producción, queremos que la aplicación sea más rápida y ligera. Aquí usamos un "multi-stage build":

# Etapa 1: Construir la aplicación
FROM node:18-alpine AS builder

WORKDIR /app

COPY package*.json ./
RUN npm ci --only=production

COPY . .
RUN npm run build

# Etapa 2: Servir con nginx
FROM nginx:alpine

COPY --from=builder /app/build /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

Esta versión crea la aplicación en una etapa y luego la sirve con Nginx en otra, resultando en una imagen final mucho más pequeña.

Docker Compose: orquestando múltiples servicios

Si tu aplicación frontend necesita conectarse a una API backend o base de datos, Docker Compose te permite gestionar todo junto. Crea un archivo docker-compose.yml:

version: '3.8'

services:
  frontend:
    build: ./frontend
    ports:
      - "3000:3000"
    volumes:
      - ./frontend:/app
      - /app/node_modules
    environment:
      - REACT_APP_API_URL=http://localhost:5000

  backend:
    build: ./backend
    ports:
      - "5000:5000"
    environment:
      - DATABASE_URL=postgres://db:5432/mydb

  db:
    image: postgres:14
    environment:
      - POSTGRES_DB=mydb
      - POSTGRES_PASSWORD=secret
    volumes:
      - postgres_data:/var/lib/postgresql/data

volumes:
  postgres_data:

Para iniciar todo:

docker-compose up

Para detener todo:

docker-compose down

Trucos útiles para el día a día

Hot reload en desarrollo

Para que los cambios se reflejen automáticamente, monta tu código como volumen:

docker run -p 3000:3000 -v $(pwd):/app -v /app/node_modules mi-app-react

Archivo .dockerignore

Similar a .gitignore, evita copiar archivos innecesarios:

node_modules
npm-debug.log
.git
.gitignore
README.md
.env
.DS_Store

Ver logs de un contenedor

docker logs [ID_DEL_CONTENEDOR]

Ejecutar comandos dentro de un contenedor

docker exec -it [ID_DEL_CONTENEDOR] sh

Casos de uso reales

1. Estandarizar el entorno de desarrollo

Todo el equipo usa el mismo Node.js, las mismas versiones de dependencias. Cero problemas de "en mi máquina funciona".

2. Testing en diferentes versiones de Node

Puedes probar tu app con Node 16, 18 y 20 simplemente cambiando una línea en el Dockerfile.

3. Deploy simplificado

Subes tu imagen a Docker Hub y tu servidor simplemente la descarga y ejecuta. Sin configurar nada manualmente.

4. Microservicios

Si trabajas con microfrontends, cada uno puede estar en su propio contenedor.

Errores comunes y cómo solucionarlos

Error: "Cannot connect to the Docker daemon"

• Solución: Asegúrate de que Docker Desktop está ejecutándose.

La aplicación no se actualiza con los cambios

• Solución: Verifica que has montado el volumen correctamente con -v.

El contenedor se detiene inmediatamente

• Solución: Revisa los logs con docker logs para ver qué error está ocurriendo.

Imagen muy pesada (>1GB)

• Solución: Usa imágenes alpine, multi-stage builds, y un .dockerignore adecuado.

Recursos para seguir aprendiendo

• Documentación oficial: docs.docker.com
• Docker Hub: hub.docker.com (para encontrar imágenes)
• Play with Docker: labs.play-with-docker.com (para practicar sin instalar)

---

💡 ¿Necesitas ayuda con tu proyecto?
Si quieres que te ayude con tu proyecto web, no tienes más que ponerte en contacto. Estaré encantado de ayudarte.

---

Conclusión

Docker puede parecer intimidante al principio, pero una vez que entiendes los conceptos básicos, se convierte en una herramienta indispensable. Empieza simple: crea un Dockerfile básico, construye tu imagen, ejecuta un contenedor. Con el tiempo, descubrirás cómo Docker puede hacer tu flujo de trabajo más eficiente y profesional.

La mejor forma de aprender es practicando. Toma uno de tus proyectos existentes y intenta "dockerizarlo". ¡Te sorprenderás de lo rápido que le coges el truco!