前端项目Docker多阶段构建核心是分离打包与运行：第一阶段用node:lts-alpine安装依赖并执行npm run build生成dist；第二阶段用nginx:alpine仅复制dist到/usr/share/nginx/html，剔除源码、node_modules及构建工具，镜像体积控制在20–30MB。
前端项目用 Docker 多阶段构建，核心就一件事：把打包和运行彻底分开。构建阶段用 Node 镜像装依赖、跑 npm run build；运行阶段只用轻量 Nginx 镜像，只放编译好的 dist 文件——不带源码、不带 node_modules、不带任何构建工具。
明确两个阶段分工
第一阶段（构建）负责“干活”：安装依赖、执行构建命令、产出静态文件。第二阶段（运行）只负责“交付”：把构建好的 HTML/JS/CSS 丢进 Nginx，监听 80 端口对外服务。两者完全隔离，互不干扰。
- 构建阶段推荐用
node:lts-alpine，体积小、启动快，够用就行 - 运行阶段统一用
nginx:alpine，官方精简版，基础镜像通常不到 15MB - 阶段命名用
AS关键字，比如FROM node:lts-alpine AS builder，后续复制才好引用
关键指令怎么写
COPY --from=builder 是多阶段构建的“桥梁”。它不复制整个构建环境，只取你需要的那一部分——通常是 /app/dist 或 /app/public 这类输出目录。
- 构建阶段里，
WORKDIR /app后COPY . .再RUN npm install && npm run build - 运行阶段里，
COPY --from=builder /app/dist /usr/share/nginx/html就完事 - 别漏掉
.dockerignore：至少排除node_modules、.git、src、dev-server相关文件，避免误传
环境变量和配置灵活处理
前端项目常要配 API 地址、部署路径等，这些不能硬编码进打包产物。常见做法是让 Nginx 在启动时注入环境变量到 HTML 或 JS 中。
立即学习“前端免费学习笔记（深入）”；
- 在
nginx.conf里启用sub_filter或用envsubst替换占位符（如%%API_BASE%%） - 或改用 shell 启动脚本：先替换模板文件，再
exec nginx -g "daemon off;" - 避免把敏感配置写死在 Dockerfile 或镜像里，运行时通过
-e参数传入更安全
构建和验证一步到位
本地测试时，直接 docker build -t my-fe-app . 就能完成全部流程。成功后运行容器：docker run -p 8080:80 my-fe-app，访问 localhost:8080 即可验证是否生效。
- 检查镜像大小：
docker images | grep my-fe-app，理想情况应控制在 20–30MB 左右 - 进容器看文件：
docker run --rm -it my-fe-app ls -la /usr/share/nginx/html，确认只有静态资源，没有package.json或src目录 - 构建失败常见原因：
npm run build脚本名写错、dist路径和实际输出不一致、COPY --from源路径写错
