多阶段构建通过分离构建与运行环境，减小镜像体积并提升安全性。1. 构建阶段使用完整依赖编译源码；2. 运行阶段仅复制产物和必要文件；3. 前端项目可结合Nginx托管静态资源；4. 使用Alpine镜像、合理缓存和.dockerignore优化构建。最终实现高效、安全、轻量的部署镜像。

在现代 JavaScript 应用开发中，使用 Docker 进行容器化部署已成为标准实践。为了提升镜像构建效率、减小最终镜像体积并增强安全性，多阶段构建（Multi-stage Build）是推荐的方式。尤其对于前端或 Node.js 后端项目，这种方式能有效分离构建环境和运行环境。

为什么需要多阶段构建

JavaScript 项目通常包含以下流程：

• 安装依赖（npm install 或 yarn）
• 编译源码（如使用 Webpack、Babel、TypeScript）
• 生成静态资源或可执行服务

如果将所有步骤放在一个镜像中，会导致最终镜像包含大量不必要的内容，比如开发依赖、构建工具、源码等，这不仅增加镜像体积，也带来安全风险。

多阶段构建通过多个 FROM 指令划分不同阶段，前一阶段用于编译，后一阶段只复制所需产物，从而实现“瘦镜像”部署。

Node.js 应用的多阶段构建示例

# 阶段一：构建阶段
FROM node:18-alpine AS builder
WORKDIR /app
复制 package 文件
COPY package*.json ./
RUN npm ci --only=production=false
构建应用（例如 Next.js、React 或 NestJS）
COPY . .
RUN npm run build
阶段二：运行阶段
FROM node:18-alpine AS runner
WORKDIR /app
只复制运行时依赖和构建产物
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./package.json
COPY --from=builder /app/dist ./dist
使用非 root 用户提高安全性
USER node
启动应用
EXPOSE 3000
CMD ["node", "dist/main.js"]

说明：

• builder 阶段使用完整依赖进行构建
• runner 阶段基于更轻量的基础镜像，仅复制运行所需文件
• 使用 npm ci 提高依赖安装一致性
• 通过 COPY --from=builder 跨阶段复制文件

前端静态站点的多阶段构建（React/Vue）

对于构建为静态文件的前端项目，常结合 Nginx 托管：

# 阶段一：构建前端资源
FROM node:18-alpine AS build-stage
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build
阶段二：使用 Nginx 提供静态服务
FROM nginx:alpine AS production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
可选：覆盖默认 Nginx 配置
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

这样最终镜像只包含 Nginx 和构建后的静态文件，体积小且启动快。

优化建议与最佳实践

• 使用 Alpine 镜像减少基础层大小
• 合理利用 Docker 缓存：先复制 package.json 再复制源码
• 避免在最终镜像中包含敏感文件（.env、.git）
• 为不同环境（dev/staging/prod）定制构建参数
• 使用 .dockerignore 排除无关文件

基本上就这些。多阶段构建让 JavaScript 项目的容器化更高效、安全、可控。不复杂但容易忽略细节。掌握它，你的镜像会更干净。