JavaScript容器化_Docker镜像多阶段构建-js教程-PHP中文网

JavaScript容器化_Docker镜像多阶段构建

夜晨

发布： 2025-11-20 17:52:02

原创

121人浏览过

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

javascript容器化_docker镜像多阶段构建

在现代 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><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>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/772">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175679972834149.png" alt="BetterYeah AI">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/772">BetterYeah AI</a>
                            <p>基于企业知识库构建、训练AI Agent的智能体应用开发平台，赋能客服、营销、销售场景 -BetterYeah</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="BetterYeah AI">
                                <span>110</span>
                            </div>
                        </div>
                        <a href="/ai/772" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="BetterYeah AI">
                        </a>
                    </div>
                <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 和构建后的静态文件，体积小且启动快。