前端项目 Docker 构建镜像太大怎么优化？

Question

仓乃文 · Accepted Answer

前端项目 Docker 镜像动辄 1-2GB，因为包含了 node_modules、源代码等不需要的东西。优化后可以降到 50MB 以下。

优化方案：
```dockerfile
# 错误示范（镜像 1.5GB）
FROM node:18
COPY . .
RUN npm install && npm run build
CMD ["npm", "start"]
# 问题：包含完整 node_modules + 源代码 + 构建工具

# 正确方案：多阶段构建（镜像 30MB）
FROM node:18-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;"]
```

优化要点：
```
1. 多阶段构建：构建阶段用 node 镜像，运行阶段用 nginx
2. alpine 基础镜像：node:18-alpine 比 node:18 小 800MB
3. .dockerignore：排除不需要的文件
4. 利用缓存：先 COPY package.json 再 COPY 源代码
```

.dockerignore：
```
node_modules
dist
.git
.env*
*.md
.vscode
.idea
```

补充说明：
- 规则：前端 Docker 镜像只需要 nginx + dist 产物
- 多阶段构建是关键，最终镜像不包含 node_modules
- alpine 镜像比标准镜像小 80%
- COPY package.json 在前，利用 Docker 缓存层
- 最终镜像应该只有 nginx + 静态文件，30-50MB