)
1. 項目背景與核心需求這個技術(shù)棧組合VueSSMTomcatNginx是當前中小型Web項目的主流選擇之一。我在最近的一個企業(yè)內(nèi)部管理系統(tǒng)項目中實際采用了這套架構(gòu)整體運行穩(wěn)定且性能表現(xiàn)良好。這種前后端分離的部署方式既能發(fā)揮Vue的現(xiàn)代化前端優(yōu)勢又能利用SSM框架成熟的后端生態(tài)。核心要解決三個問題前后端代碼的獨立開發(fā)與聯(lián)合調(diào)試生產(chǎn)環(huán)境的高效部署方案靜態(tài)資源與API請求的合理分流2. 環(huán)境準備與工具選型2.1 開發(fā)環(huán)境配置前端開發(fā)環(huán)境Node.js 16.xLTS版本更穩(wěn)定Vue CLI 5.x腳手架工具Webpack 5打包工具后端開發(fā)環(huán)境JDK 1.8兼容性最佳Maven 3.6依賴管理IntelliJ IDEA開發(fā)工具2.2 生產(chǎn)環(huán)境組件Tomcat 9.x應(yīng)用服務(wù)器Nginx 1.18Web服務(wù)器/反向代理MySQL 5.7數(shù)據(jù)庫注意各組件版本需保持兼容特別是JDK與Tomcat的版本對應(yīng)關(guān)系3. 項目結(jié)構(gòu)設(shè)計與構(gòu)建3.1 前端Vue項目配置關(guān)鍵配置項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關(guān)鍵依賴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 前端構(gòu)建與部署生產(chǎn)環(huán)境構(gòu)建npm run build輸出目錄結(jié)構(gòu)/dist ├── static │ ├── js │ ├── css │ └── img └── index.html4.2 后端打包與部署使用Maven打包mvn clean package生成war包部署到Tomcatcp target/ssm-demo.war $TOMCAT_HOME/webapps/4.3 Nginx配置優(yōu)化關(guān)鍵配置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. 聯(lián)調(diào)與問題排查5.1 跨域問題解決方案開發(fā)環(huán)境使用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 靜態(tài)資源404問題常見原因及解決Vue路由history模式需要Nginx特殊配置靜態(tài)資源路徑配置錯誤文件權(quán)限問題5.3 性能優(yōu)化建議前端啟用Gzip壓縮配置合理的緩存策略使用CDN加速靜態(tài)資源后端啟用Tomcat連接池配置Nginx負載均衡優(yōu)化MyBatis SQL查詢6. 安全配置要點6.1 Tomcat安全加固刪除默認示例應(yīng)用修改shutdown端口和命令配置訪問日志6.2 Nginx安全配置隱藏版本信息server_tokens off;限制HTTP方法if ($request_method !~ ^(GET|HEAD|POST)$ ) { return 444; }配置SSL證書推薦使用Lets Encrypt7. 監(jiān)控與維護7.1 基礎(chǔ)監(jiān)控方案Tomcat監(jiān)控啟用JMX監(jiān)控配置訪問日志使用JDK自帶的jvisualvm工具Nginx監(jiān)控啟用stub_status模塊配置訪問日志使用ngxtop實時監(jiān)控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流水線配置前端構(gòu)建階段后端打包階段部署階段Git鉤子配置pre-commit代碼檢查post-receive自動部署這套技術(shù)棧在實際項目中表現(xiàn)穩(wěn)定特別是在中小型團隊協(xié)作開發(fā)時優(yōu)勢明顯。根據(jù)我的經(jīng)驗關(guān)鍵是要做好環(huán)境版本管理建議使用Docker統(tǒng)一開發(fā)、測試、生產(chǎn)環(huán)境。 Vue+SSM+Tomcat+Nginx全棧項目部署實戰(zhàn)
1. 項目背景與核心需求這個技術(shù)棧組合VueSSMTomcatNginx是當前中小型Web項目的主流選擇之一。我在最近的一個企業(yè)內(nèi)部管理系統(tǒng)項目中實際采用了這套架構(gòu)整體運行穩(wěn)定且性能表現(xiàn)良好。這種前后端分離的部署方式既能發(fā)揮Vue的現(xiàn)代化前端優(yōu)勢又能利用SSM框架成熟的后端生態(tài)。核心要解決三個問題前后端代碼的獨立開發(fā)與聯(lián)合調(diào)試生產(chǎn)環(huán)境的高效部署方案靜態(tài)資源與API請求的合理分流2. 環(huán)境準備與工具選型2.1 開發(fā)環(huán)境配置前端開發(fā)環(huán)境Node.js 16.xLTS版本更穩(wěn)定Vue CLI 5.x腳手架工具Webpack 5打包工具后端開發(fā)環(huán)境JDK 1.8兼容性最佳Maven 3.6依賴管理IntelliJ IDEA開發(fā)工具2.2 生產(chǎn)環(huán)境組件Tomcat 9.x應(yīng)用服務(wù)器Nginx 1.18Web服務(wù)器/反向代理MySQL 5.7數(shù)據(jù)庫注意各組件版本需保持兼容特別是JDK與Tomcat的版本對應(yīng)關(guān)系3. 項目結(jié)構(gòu)設(shè)計與構(gòu)建3.1 前端Vue項目配置關(guān)鍵配置項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關(guān)鍵依賴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 前端構(gòu)建與部署生產(chǎn)環(huán)境構(gòu)建npm run build輸出目錄結(jié)構(gòu)/dist ├── static │ ├── js │ ├── css │ └── img └── index.html4.2 后端打包與部署使用Maven打包mvn clean package生成war包部署到Tomcatcp target/ssm-demo.war $TOMCAT_HOME/webapps/4.3 Nginx配置優(yōu)化關(guān)鍵配置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. 聯(lián)調(diào)與問題排查5.1 跨域問題解決方案開發(fā)環(huán)境使用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 靜態(tài)資源404問題常見原因及解決Vue路由history模式需要Nginx特殊配置靜態(tài)資源路徑配置錯誤文件權(quán)限問題5.3 性能優(yōu)化建議前端啟用Gzip壓縮配置合理的緩存策略使用CDN加速靜態(tài)資源后端啟用Tomcat連接池配置Nginx負載均衡優(yōu)化MyBatis SQL查詢6. 安全配置要點6.1 Tomcat安全加固刪除默認示例應(yīng)用修改shutdown端口和命令配置訪問日志6.2 Nginx安全配置隱藏版本信息server_tokens off;限制HTTP方法if ($request_method !~ ^(GET|HEAD|POST)$ ) { return 444; }配置SSL證書推薦使用Lets Encrypt7. 監(jiān)控與維護7.1 基礎(chǔ)監(jiān)控方案Tomcat監(jiān)控啟用JMX監(jiān)控配置訪問日志使用JDK自帶的jvisualvm工具Nginx監(jiān)控啟用stub_status模塊配置訪問日志使用ngxtop實時監(jiān)控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流水線配置前端構(gòu)建階段后端打包階段部署階段Git鉤子配置pre-commit代碼檢查post-receive自動部署這套技術(shù)棧在實際項目中表現(xiàn)穩(wěn)定特別是在中小型團隊協(xié)作開發(fā)時優(yōu)勢明顯。根據(jù)我的經(jīng)驗關(guān)鍵是要做好環(huán)境版本管理建議使用Docker統(tǒng)一開發(fā)、測試、生產(chǎn)環(huán)境。