企业官网建设流程全解析

1. 项目背景与核心需求

这个技术栈组合（Vue+SSM+Tomcat+Nginx）是当前中小型Web项目的主流选择之一。我在最近的一个企业内部管理系统项目中实际采用了这套架构，整体运行稳定且性能表现良好。这种前后端分离的部署方式，既能发挥Vue的现代化前端优势，又能利用SSM框架成熟的后端生态。

核心要解决三个问题：

1. 前后端代码的独立开发与联合调试
2. 生产环境的高效部署方案
3. 静态资源与API请求的合理分流

2. 环境准备与工具选型

2.1 开发环境配置

前端开发环境：

• Node.js 16.x（LTS版本更稳定）
• Vue CLI 5.x（脚手架工具）
• Webpack 5（打包工具）

后端开发环境：

• JDK 1.8（兼容性最佳）
• Maven 3.6+（依赖管理）
• IntelliJ IDEA（开发工具）

2.2 生产环境组件

• Tomcat 9.x（应用服务器）
• Nginx 1.18+（Web服务器/反向代理）
• MySQL 5.7（数据库）

注意：各组件版本需保持兼容，特别是JDK与Tomcat的版本对应关系

3. 项目结构设计与构建

3.1 前端Vue项目配置

关键配置项（vue.config.js）：

module.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> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> <version>5.3.18</version> </dependency> <dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis-spring</artifactId> <version>2.0.7</version> </dependency>

web.xml配置示例：

<servlet> <servlet-name>springmvc</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <init-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:spring/spring-mvc.xml</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet>

4. 部署流程详解

4.1 前端构建与部署

1. 生产环境构建：

npm run build

2. 输出目录结构：

/dist ├── static │ ├── js │ ├── css │ └── img └── index.html

4.2 后端打包与部署

1. 使用Maven打包：

mvn clean package

2. 生成war包部署到Tomcat：

cp target/ssm-demo.war $TOMCAT_HOME/webapps/

4.3 Nginx配置优化

关键配置（nginx.conf）：

server { 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问题

常见原因及解决：

1. Vue路由history模式需要Nginx特殊配置
2. 静态资源路径配置错误
3. 文件权限问题

5.3 性能优化建议

1. 前端：

• 启用Gzip压缩
• 配置合理的缓存策略
• 使用CDN加速静态资源

2. 后端：

• 启用Tomcat连接池
• 配置Nginx负载均衡
• 优化MyBatis SQL查询

6. 安全配置要点

6.1 Tomcat安全加固

1. 删除默认示例应用
2. 修改shutdown端口和命令
3. 配置访问日志

6.2 Nginx安全配置

1. 隐藏版本信息：

server_tokens off;

2. 限制HTTP方法：

if ($request_method !~ ^(GET|HEAD|POST)$ ) { return 444; }

3. 配置SSL证书（推荐使用Let's Encrypt）

7. 监控与维护

7.1 基础监控方案

1. Tomcat监控：

• 启用JMX监控
• 配置访问日志
• 使用JDK自带的jvisualvm工具

2. Nginx监控：

• 启用stub_status模块
• 配置访问日志
• 使用ngxtop实时监控

7.2 日志管理建议

1. 日志分割方案：

• Tomcat使用cronolog
• Nginx使用logrotate

2. 日志分析工具：

• ELK Stack
• GoAccess（轻量级方案）

8. 扩展与进阶

8.1 容器化部署方案

1. Docker化改造：

• 前端容器：基于nginx镜像
• 后端容器：基于tomcat镜像

2. 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.war

8.2 CI/CD集成

1. Jenkins流水线配置：

• 前端构建阶段
• 后端打包阶段
• 部署阶段

2. Git钩子配置：

• pre-commit代码检查
• post-receive自动部署

这套技术栈在实际项目中表现稳定，特别是在中小型团队协作开发时优势明显。根据我的经验，关键是要做好环境版本管理，建议使用Docker统一开发、测试、生产环境。