多阶段构建通过分离构建与运行环境，减小镜像体积并提升安全性。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="/ai/1713" title="Q.AI视频生成工具"><img
src="https://img.php.cn/upload/ai_manual/000/000/000/175680315554756.png" alt="Q.AI视频生成工具" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/1713" title="Q.AI视频生成工具">Q.AI视频生成工具</a>
<p>支持一分钟生成专业级短视频，多种生成方式，AI视频脚本，在线云编辑，画面自由替换，热门配音媲美真人音色，更多强大功能尽在QAI</p>
</div>
<a href="/ai/1713" title="Q.AI视频生成工具" 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 项目的容器化更高效、安全、可控。不复杂但容易忽略细节。掌握它，你的镜像会更干净。
