多阶段构建通过分离构建与运行环境，减小镜像体积并提升安全性。1. 构建阶段使用完整依赖编译源码；2. 运行阶段仅复制产物和必要文件；3. 前端项目可结合Nginx托管静态资源；4. 使用Alpine镜像、合理缓存和.dockerignore优化构建。最终实现高效、安全、轻量的部署镜像。
在现代 JavaScript 应用开发中，使用 Docker 进行容器化部署已成为标准实践。为了提升镜像构建效率、减小最终镜像体积并增强安全性，多阶段构建（Multi-stage Build）是推荐的方式。尤其对于前端或 Node.js 后端项目，这种方式能有效分离构建环境和运行环境。
为什么需要多阶段构建
JavaScript 项目通常包含以下流程：
- 安装依赖（npm install 或 yarn）
- 编译源码（如使用 Webpack、Babel、TypeScript）
- 生成静态资源或可执行服务
如果将所有步骤放在一个镜像中，会导致最终镜像包含大量不必要的内容，比如开发依赖、构建工具、源码等，这不仅增加镜像体积，也带来安全风险。
多阶段构建通过多个 FROM 指令划分不同阶段，前一阶段用于编译，后一阶段只复制所需产物，从而实现“瘦镜像”部署。
立即学习“Java免费学习笔记（深入）”；
Node.js 应用的多阶段构建示例
# 阶段一：构建阶段
FROM node:18-alpine AS builder
<p>WORKDIR /app</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill10984" title="git提交前检查"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20d3191a227.jpg" alt="git提交前检查" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill10984" title="git提交前检查">git提交前检查</a>
<p>在代码提交 git 前，通过 git diff 对比修改内容，逐文件审查变更点，检测潜在 BUG、隐含风险与可优化项，输出结构化审查报告。当用户表达提交前检查、提交检查、commit 前检查、pre-commit review、提前审查代码、检查一下改动、看看能不能提交等意图时使用此技能。注意：此技能与「代码评审」不同——代码评审在开发完成后结合需求文档与概要设计进行完整度审查，提交前检查是轻量级的基于 git diff 的代码质量把关。</p>
</div>
<a href="/xiazai/skill10984" title="git提交前检查" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div><h1>复制 package 文件</h1><p>COPY package*.json ./
RUN npm ci --only=production=false</p><h1>构建应用（例如 Next.js、React 或 NestJS）</h1><p>COPY . .
RUN npm run build</p><h1>阶段二：运行阶段</h1><p>FROM node:18-alpine AS runner</p><p>WORKDIR /app</p><h1>只复制运行时依赖和构建产物</h1><p>COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./package.json
COPY --from=builder /app/dist ./dist</p><h1>使用非 root 用户提高安全性</h1><p>USER node</p><h1>启动应用</h1><p>EXPOSE 3000
CMD ["node", "dist/main.js"]</p>说明：
- builder 阶段使用完整依赖进行构建
- runner 阶段基于更轻量的基础镜像，仅复制运行所需文件
- 使用 npm ci 提高依赖安装一致性
- 通过 COPY --from=builder 跨阶段复制文件
前端静态站点的多阶段构建（React/Vue）
对于构建为静态文件的前端项目，常结合 Nginx 托管：
# 阶段一：构建前端资源 FROM node:18-alpine AS build-stage <p>WORKDIR /app COPY package*.json ./ RUN npm ci COPY . . RUN npm run build</p><h1>阶段二：使用 Nginx 提供静态服务</h1><p>FROM nginx:alpine AS production-stage</p><p>COPY --from=build-stage /app/dist /usr/share/nginx/html</p><h1>可选：覆盖默认 Nginx 配置</h1><p>COPY nginx.conf /etc/nginx/nginx.conf</p><p>EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]</p>
这样最终镜像只包含 Nginx 和构建后的静态文件，体积小且启动快。
优化建议与最佳实践
- 使用 Alpine 镜像减少基础层大小
- 合理利用 Docker 缓存：先复制 package.json 再复制源码
- 避免在最终镜像中包含敏感文件（.env、.git）
- 为不同环境（dev/staging/prod）定制构建参数
- 使用 .dockerignore 排除无关文件
基本上就这些。多阶段构建让 JavaScript 项目的容器化更高效、安全、可控。不复杂但容易忽略细节。掌握它，你的镜像会更干净。
