获课：97it.top/17465/

在传统的 Web 应用开发中，部署环节往往是开发者的噩梦。特别是面对 Servlet 6.0 后端与 Vue3 前端这种典型的“动静分离”架构时，新手常常会陷入环境的泥潭：后端需要配置复杂的 JDK 和 Tomcat 版本，前端则受困于 Node.js 依赖和 Nginx 的繁琐配置。只要换一台服务器，或者开发环境与生产环境稍有差异，应用就可能因为各种莫名其妙的报错而无法启动。在我看来，将这套组合打包为 Docker 镜像的实战过程，本质上就是一场从“手动运维”到“标准化交付”的思维革命。

首先，我们要打破“前后端必须打包在一起”的固有思维。在 Docker 的世界里，单一职责原则同样适用。Servlet 6.0 后端和 Vue3 前端应该被构建为两个完全独立的镜像。对于后端而言，核心在于利用 Docker 的多阶段构建。我们不需要在最终的镜像里保留臃肿的 Maven 或 Gradle 构建工具，而是可以在第一阶段使用包含完整 JDK 的镜像进行编译打包，在第二阶段仅使用轻量级的 JRE 甚至 Alpine 版本的镜像来运行打好的 WAR 或 JAR 包。这种做法不仅能让最终的生产镜像体积大幅缩减，还能有效规避生产环境中的安全漏洞。

其次，对于 Vue3 前端，很多初学者容易犯的一个错误是试图在容器里运行 npm run dev。实际上，生产环境下的 Vue3 应用本质上只是一堆静态的 HTML、CSS 和 JavaScript 文件。因此，前端的 Docker 化思路非常清晰：先利用 Node 镜像完成 npm install 和 npm run build，将生成的 dist 目录提取出来，再将其拷贝到一个极简的 Nginx 镜像中。这样，我们的前端镜像就变成了一个纯粹、高性能的静态文件服务器，既轻量又稳定。

在实战中，最考验架构师功力的细节往往在于“路由与网络”的适配。Vue3 项目通常使用 History 模式的路由，如果 Nginx 没有经过特殊配置，用户刷新页面时就会遭遇 404 错误。我们需要在 Nginx 的配置中增加一条简单的重定向规则，将所有找不到文件的请求都回退到 index.html，把路由的解析权交还给 Vue Router。此外，前后端分离带来的跨域问题，也不应再依赖后端去繁琐地配置 CORS，而是可以直接在 Nginx 这一层通过反向代理优雅地解决，让前端的 API 请求看起来就像是同域访问一样自然。

总而言之，将 Servlet 6.0 与 Vue3 应用打包为 Docker 镜像，绝不仅仅是写几个 Dockerfile 那么简单。它要求我们从架构层面重新审视应用的交付形态：通过多阶段构建实现镜像的极致瘦身，通过动静分离实现服务的独立扩展，再通过 Nginx 的反向代理打通前后端的任督二脉。当你不再为环境差异而头疼，能够自信地将打包好的镜像一键部署到任何服务器上时，你就真正掌握了云原生时代应用交付的核心心法。