前端工程师必备的 Docker 生产化部署与体积调优秘籍

导读: 如何将一个 Next.js 全栈项目从 1GB+ 胖镜像通过多阶段构建精简到 150MB,并配合 Nginx 反向代理与 HTTPS 一键交付。

为什么前端也要掌握 Docker?

在现代云原生架构下,容器化交付不仅让前后端环境 100% 保持一致,更是自动化 CI/CD 与高可用部署的基石。

多阶段构建核心思路

  1. 依赖安装阶段 (deps):缓存 node_modules。
  2. 源码构建阶段 (builder):生成 standalone 独立运行产物。
  3. 极简运行环境 (runner):基于 node:alpine,仅复制 standalone 与 static 文件,丢弃一切冗余编译依赖。
FROM node:20-alpine AS runner
WORKDIR /app
COPY --from=builder /app/.next/standalone ./
COPY --from=builder /app/.next/static ./.next/static
EXPOSE 3000
CMD ["node", "server.js"]

这种方案生成的镜像体积极为小巧,启动速度仅需数秒!