Blog CMS Kit

Published

1 min read198 words

## Why Frontend Devs Should Care About Docker

"It works on my machine" is the oldest joke in software development. Docker solves it — and as frontend applications grow more complex, containerization becomes essential.

## Your First Dockerfile

For a Next.js application:

```dockerfile
FROM node:20-alpine AS base

FROM base AS deps
WORKDIR /app
COPY package.json pnpm-lock.yaml ./
RUN corepack enable pnpm && 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"]
```

> **Tip:** Multi-stage builds keep your final image small. The builder stage has all dev dependencies, but the runner only has what's needed to serve.

## Docker Compose for Full-Stack Dev

Spin up your entire stack with one command:

```yaml
services:
  web:
    build: .
    ports:
      - "3000:3000"
    volumes:
      - .:/app
      - /app/node_modules

db:
    image: postgres:16-alpine
    environment:
      POSTGRES_DB: myapp
```

## Common Pitfalls

1. **Don't copy node_modules** — always install inside the container
2. **Use .dockerignore** — exclude .next, node_modules, .git
3. **Pin your base image** — use specific versions, not `latest`