Docker para desarrolladores frontend: lo mínimo que necesitas

"En mi máquina funciona" deja de ser excusa cuando usas Docker. No necesitas ser experto en infraestructura para sacarle provecho.

Los tres conceptos

• Imagen: la receta. Sistema base, dependencias y tu código.
• Contenedor: la receta en ejecución. Puedes tener varios de la misma imagen.
• Dockerfile: el archivo donde escribes la receta.

Un Dockerfile para una app Node

FROM node:22-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
EXPOSE 3000
CMD ["npm", "run", "dev"]

Copiar package.json antes que el resto del código hace que Docker reutilice la capa de npm ci si solo cambiaste código. Las reconstrucciones pasan de minutos a segundos.

Construir y ejecutar

docker build -t mi-app .
docker run -p 3000:3000 mi-app

-p 3000:3000 conecta el puerto de tu máquina con el del contenedor.

Donde más me ayudó: la base de datos

En vez de instalar MongoDB en mi computadora:

# docker-compose.yml
services:
  mongo:
    image: mongo:7
    ports:
      - "27017:27017"
    volumes:
      - mongo-data:/data/db

volumes:
  mongo-data:

docker compose up -d

Una base de datos lista en segundos, igual para todo el equipo. Y si la rompes, la borras y la vuelves a crear.

No olvides el .dockerignore

node_modules
.next
.env

Evita copiar dependencias de tu sistema y, sobre todo, tus secretos.

Cuándo no vale la pena

Si tu app solo es frontend y la despliegas en Vercel o Netlify, Docker no te aporta mucho. Brilla cuando tienes varios servicios (API, base de datos, caché) que deben funcionar juntos.