Docker and Kubernetes for Frontend Developers

If you're a frontend developer who's never touched Docker, you're not alone. But as full-stack development blurs the lines, understanding containers is becoming essential — not just for deployment, but for local development too.

Why Containers?

The classic "works on my machine" problem hits harder in modern stacks. Your app needs PostgreSQL 16, Redis 7, MinIO, and maybe Elasticsearch. Installing all of these natively is a nightmare. Docker Compose solves this:

services:
  postgres:
    image: postgres:16-alpine
    environment:
      POSTGRES_DB: myapp
      POSTGRES_PASSWORD: secret
    ports:
      - "5432:5432"
    volumes:
      - pgdata:/var/lib/postgresql/data

  minio:
    image: minio/minio
    command: server /data --console-address ":9001"
    ports:
      - "9000:9000"
      - "9001:9001"

volumes:
  pgdata:

One docker compose up and you have a full backend environment. No Homebrew, no version conflicts, no cleanup headaches.

Dockerizing a Next.js App

A production Dockerfile for Next.js uses multi-stage builds:

FROM node:22-alpine AS base
RUN corepack enable && corepack prepare pnpm@9 --activate

FROM base AS deps
WORKDIR /app
COPY package.json pnpm-lock.yaml ./
RUN pnpm install --frozen-lockfile

FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN pnpm build

FROM base AS runner
WORKDIR /app
ENV NODE_ENV=production
COPY --from=builder /app/.next/standalone ./
COPY --from=builder /app/.next/static ./.next/static
COPY --from=builder /app/public ./public
EXPOSE 3000
CMD ["node", "server.js"]

The final image contains only the production build — no devDependencies, no source maps, no TypeScript. Image size drops from 2GB+ to ~150MB.

Kubernetes Basics

Kubernetes orchestrates containers at scale. For a blog or personal project, you might not need it. But understanding the concepts helps when working with platform teams:

Pod: The smallest deployable unit — one or more containers
Deployment: Manages replicas of a pod (rolling updates, scaling)
Service: Stable network endpoint for a set of pods
Ingress: Routes external traffic to services (like an nginx reverse proxy)

A minimal deployment:

apiVersion: apps/v1
kind: Deployment
metadata:
  name: web
spec:
  replicas: 2
  selector:
    matchLabels:
      app: web
  template:
    spec:
      containers:
        - name: web
          image: myregistry/web:latest
          ports:
            - containerPort: 3000
          env:
            - name: DATABASE_URL
              valueFrom:
                secretKeyRef:
                  name: db-credentials
                  key: url

Local Development Workflow

The sweet spot for most frontend developers is Docker Compose for services + native Node.js for the app:

docker compose up -d starts Postgres, MinIO, etc.
pnpm dev runs Next.js natively (fast HMR, no container overhead)
docker compose down tears everything down when you're done

This gives you container isolation for dependencies without sacrificing the fast feedback loop of local development. Save full containerization for CI/CD and production.