前端开发者 Docker 实战

为什么前端需要 Docker？

1. 环境一致性：消除"在我电脑上能运行"的问题

2. 简化部署：一键部署，无需手动配置环境

3. 隔离开发环境：不影响本地系统

前端项目 Docker 化

开发环境

FROM node:20-alpine AS development

WORKDIR /app

COPY package*.json ./
RUN npm install

COPY . .

EXPOSE 3000

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

多阶段构建

# 构建阶段
FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

# 生产阶段
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Docker Compose

version: '3.8'
services:
  frontend:
    build:
      context: .
      target: development
    ports:
      - "3000:3000"
    volumes:
      - .:/app
      - /app/node_modules
    environment:
      - NODE_ENV=development

最佳实践

1. 使用 .dockerignore：排除 node_modules 等无关文件

2. 多阶段构建：减小镜像体积

3. 利用缓存：合理安排 Dockerfile 指令顺序

4. 最小基础镜像：使用 alpine 版本

总结

Docker 是每个前端开发者都应该掌握的工具，它能极大提升开发效率和部署可靠性。