1. 项目背景与核心需求这个技术栈组合VueSSMTomcatNginx是当前中小型Web项目的主流选择之一。我在最近的一个企业内部管理系统项目中实际采用了这套架构整体运行稳定且性能表现良好。这种前后端分离的部署方式既能发挥Vue的现代化前端优势又能利用SSM框架成熟的后端生态。核心要解决三个问题前后端代码的独立开发与联合调试生产环境的高效部署方案静态资源与API请求的合理分流2. 环境准备与工具选型2.1 开发环境配置前端开发环境Node.js 16.xLTS版本更稳定Vue CLI 5.x脚手架工具Webpack 5打包工具后端开发环境JDK 1.8兼容性最佳Maven 3.6依赖管理IntelliJ IDEA开发工具2.2 生产环境组件Tomcat 9.x应用服务器Nginx 1.18Web服务器/反向代理MySQL 5.7数据库注意各组件版本需保持兼容特别是JDK与Tomcat的版本对应关系3. 项目结构设计与构建3.1 前端Vue项目配置关键配置项vue.config.jsmodule.exports { publicPath: process.env.NODE_ENV production ? /webapp : /, outputDir: dist, assetsDir: static, devServer: { proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } } }3.2 后端SSM项目配置pom.xml关键依赖dependency groupIdorg.springframework/groupId artifactIdspring-webmvc/artifactId version5.3.18/version /dependency dependency groupIdorg.mybatis/groupId artifactIdmybatis-spring/artifactId version2.0.7/version /dependencyweb.xml配置示例servlet servlet-namespringmvc/servlet-name servlet-classorg.springframework.web.servlet.DispatcherServlet/servlet-class init-param param-namecontextConfigLocation/param-name param-valueclasspath:spring/spring-mvc.xml/param-value /init-param load-on-startup1/load-on-startup /servlet4. 部署流程详解4.1 前端构建与部署生产环境构建npm run build输出目录结构/dist ├── static │ ├── js │ ├── css │ └── img └── index.html4.2 后端打包与部署使用Maven打包mvn clean package生成war包部署到Tomcatcp target/ssm-demo.war $TOMCAT_HOME/webapps/4.3 Nginx配置优化关键配置nginx.confserver { listen 80; server_name yourdomain.com; location / { root /path/to/vue/dist; index index.html; try_files $uri $uri/ /index.html; } location /api { proxy_pass http://localhost:8080/ssm-demo; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } location /static { alias /path/to/vue/dist/static; expires 30d; } }5. 联调与问题排查5.1 跨域问题解决方案开发环境使用vue-cli的proxyTable配置添加CORS过滤器WebFilter(/*) public class CorsFilter implements Filter { Override public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException { HttpServletResponse response (HttpServletResponse) res; response.setHeader(Access-Control-Allow-Origin, *); response.setHeader(Access-Control-Allow-Methods, POST, GET, OPTIONS, DELETE); response.setHeader(Access-Control-Max-Age, 3600); response.setHeader(Access-Control-Allow-Headers, x-requested-with); chain.doFilter(req, res); } }5.2 静态资源404问题常见原因及解决Vue路由history模式需要Nginx特殊配置静态资源路径配置错误文件权限问题5.3 性能优化建议前端启用Gzip压缩配置合理的缓存策略使用CDN加速静态资源后端启用Tomcat连接池配置Nginx负载均衡优化MyBatis SQL查询6. 安全配置要点6.1 Tomcat安全加固删除默认示例应用修改shutdown端口和命令配置访问日志6.2 Nginx安全配置隐藏版本信息server_tokens off;限制HTTP方法if ($request_method !~ ^(GET|HEAD|POST)$ ) { return 444; }配置SSL证书推荐使用Lets Encrypt7. 监控与维护7.1 基础监控方案Tomcat监控启用JMX监控配置访问日志使用JDK自带的jvisualvm工具Nginx监控启用stub_status模块配置访问日志使用ngxtop实时监控7.2 日志管理建议日志分割方案Tomcat使用cronologNginx使用logrotate日志分析工具ELK StackGoAccess轻量级方案8. 扩展与进阶8.1 容器化部署方案Docker化改造前端容器基于nginx镜像后端容器基于tomcat镜像docker-compose示例version: 3 services: frontend: image: nginx:alpine ports: - 80:80 volumes: - ./vue-dist:/usr/share/nginx/html backend: image: tomcat:9-jre8 ports: - 8080:8080 volumes: - ./ssm-demo.war:/usr/local/tomcat/webapps/ROOT.war8.2 CI/CD集成Jenkins流水线配置前端构建阶段后端打包阶段部署阶段Git钩子配置pre-commit代码检查post-receive自动部署这套技术栈在实际项目中表现稳定特别是在中小型团队协作开发时优势明显。根据我的经验关键是要做好环境版本管理建议使用Docker统一开发、测试、生产环境。
