项目架构解析
|
75
|
0
|
mall

1713 字
|
11 分钟

项目架构概览

你的项目是一个Spring Boot微服务商城系统：

  • 前端: Vue 3 + Vite + Element Plus
  • 后端: 4个微服务
  • goods_service (8090端口) – 商品服务
  • admin_service (8091端口) – 管理员服务
  • user_service (8092端口) – 用户服务
  • order_service (8093端口) – 订单服务
  • 数据库: MySQL 8.0
  • 缓存: Redis
  • 注册中心: Zookeeper (Dubbo)
  • Java版本: 17

┌────────────────┬────────────────────┬──────────────────────────┬─────────────────────────────┐ │ │ 127.0.0.1 │ 内网 IP（如 172.16.x.x） │ 外网 IP（如 114.55.106.49） │ ├────────────────┼────────────────────┼──────────────────────────┼─────────────────────────────┤ │ 范围 │ 仅本机 │ 同一局域网 │ 全球互联网 │ ├────────────────┼────────────────────┼──────────────────────────┼─────────────────────────────┤ │ 走网卡 │ 不走，内核直接回环 │ 走内网网卡 │ 走公网路由 │ ├────────────────┼────────────────────┼──────────────────────────┼─────────────────────────────┤ │ 速度 │ 最快 │ 快 │ 取决于带宽 │ ├────────────────┼────────────────────┼──────────────────────────┼─────────────────────────────┤ │ 需要防火墙放行 │ 不需要 │ 不需要（内网） │ 需要 │ ├────────────────┼────────────────────┼──────────────────────────┼─────────────────────────────┤ │ 暴露风险 │ 无 │ 只在局域网可见 │ 全网可见 │ └───

用场景

127.0.0.1 — 本机内部通信 数据库连接 jdbc:mysql://127.0.0.1:3306 Java → MySQL（同机） Redis 连接 redis.host: localhost Java → Redis（同机） Nginx 代理 proxy_pass http://127.0.0.1:8090 Nginx → Java（同机） Zookeeper zookeeper://127.0.0.1:2181 Java → ZK（同机） 只有部署在同一台机器上的服务之间才用。

内网 IP — 跨机器、同机房 两台服务器之间 172.16.0.1 → 172.16.0.2 走机房内网交换机 微服务拆分 订单服务 → 商品服务（不同机器） 数据库主从复制 Master → Slave（内网同步） 速度快、不消耗公网带宽、安全，是分布式部署时的首选。

外网 IP — 对外提供服务 用户访问前端 浏览器 → 114.55.106.49:80 第三方 API 回调 支付宝支付结果通知 前端 .env VITE_SERVER_ADDR=http://114.55.106.49 只有需要被外部访问的才暴露外网 IP。

一句话

你的项目目前所有服务都在一台机器，所以数据库 / Redis / ZK / Nginx upstream 全用 127.0.0.1；前端通过 114.55.106.49 访问是因为用户在浏览器端，必须走公网。

宝塔部署完整步骤

一、环境准备

服务器要求

  • 系统: CentOS 7.x 或 Ubuntu 18.04+
  • 内存: 至少4GB (推荐8GB)
  • CPU: 至少2核
  • 硬盘: 至少20GB

二、测试环境转变为生产环境 修改mysql的数据库名称和用户名那个以及密码，特别注意宝塔上的数据库版本要大于测试的版本 修改redis的密码 修改图片存储位置 注意后端/问题 修改zookeeper的网关要使用本地的网关 修改前端头地址为服务器公网ip VITE_SERVER_ADDR=http://114.55.106.49

因为三个 Java 服务（goods_service、order_service、admin_service）之间用 Dubbo RPC 互相调用，Dubbo 需要 Zookeeper 作为注册中心来发现彼此。

Zookeeper 的作用：

  • 各服务启动时向 Zookeeper 注册自己（IP + 端口）
  • 调用方通过 Zookeeper 发现被调用方的地址
  • 服务挂了 Zookeeper 会自动剔除，服务恢复了再加回来

127.0.0.1 是因为 Zookeeper 就和 Java 服务部署在同一台服务器上，本地调用不需要走外网。

修改前端 index.js 将history变为hash模式

import {createRouter, createWebHistory} from 'vue-router'
变为
import {createRouter, createWebHashHistory} from 'vue-router'

history 模式改为 hash 模式的作用是避免页面刷新时前端路由请求被 Nginx 误转发到后端。

具体原理：

┌──────────────────────────────┬───────────────────────────────────────────────────────────────┬────────────────────────────────────────────────────────────┐ │ │ history 模式 │ hash 模式 │ ├──────────────────────────────┼───────────────────────────────────────────────────────────────┼────────────────────────────────────────────────────────────┤ │ URL 示例 │ http://114.55.106.49/user/index │ http://114.55.106.49/#/user/index │ ├──────────────────────────────┼───────────────────────────────────────────────────────────────┼────────────────────────────────────────────────────────────┤ │ 浏览器刷新时发到服务器的请求 │ /user/index │ /（# 后面的不发送） │ ├──────────────────────────────┼───────────────────────────────────────────────────────────────┼────────────────────────────────────────────────────────────┤ │ Nginx 匹配 │ /user 命中 location /user 规则 → 转发到后端 8092 → 报令牌无效 │ 命中 location / → 返回 index.html → Vue Router 接管渲染 ✅ │ └──────────────────────────────┴───────────────────────────────────────────────────────────────┴────────────────────────────────────────────────────────────┘

一句话： hash 模式下，# 后面的路径根本不会发给服务器，所以 Nginx 不会误判，所有页面路由都由前端自己处理，和 Nginx 配置解耦，刷新不报错

三种解决方案，按推荐程度排序： 方案一：路径分离（推荐） 前后端用不同的 URL 前缀，比如 /manage/ 给前端页面，/admin/ 给后端 API。干净优雅，URL 好看，但需要改前端路由和跳转逻辑。适合新项目或能改路径的场景。 方案二：hash 模式 Vue Router 改用 createWebHashHistory，URL 变成 /#/admin/login。# 之后的内容浏览器不发给服务器，所以刷新时请求永远是 /，Nginx 不会误转发。改一行代码，零配置，最省事。缺点是 URL 多了个 #。

方案三：Nginx try_files 不改前端代码，在 Nginx 中配置 try_files 让 Nginx 先检查前端目录是否有对应文件，找不到才转发后端。灵活但依赖 Nginx 配置，每个 location 都要写，容易遗漏。—

四、安装Zookeeper

1.先要安装docker ,宝塔上的Zookeeper插件不能够使用 2.在docer界面下载zookeeper,配置好镜像 网络名选择baota_net 自动调配网络 3.打包前端和后端 前端指令 npm install 之后 npm run build 后端指令 mvn clean package -DskipTests 跳过单元测试 4.vue前端直接部署php项目，php版本纯净态，配置好数据库 5.反向代理直接在前端项目中配置类如

server
{
    listen 80;
    server_name 114.55.106.51 114.55.106.49;
    index index.php index.html index.htm default.php default.htm default.html;
    root /www/wwwroot/mall.dxkua.cn;

    include /www/server/panel/vhost/nginx/well-known/114.55.106.49.conf;
    include /www/server/panel/vhost/nginx/extension/114.55.106.49/*.conf;

    error_page 404 /404.html;

    #==================== 接口代理开始 ====================
     location ^~ /admin {
        proxy_pass http://127.0.0.1:8091;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
    location /category {
        proxy_pass http://127.0.0.1:8090;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
    location /goods {
        proxy_pass http://127.0.0.1:8090;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
    location /user {
        proxy_pass http://127.0.0.1:8092;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
    location /collect {
        proxy_pass http://127.0.0.1:8092;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
    location /cart {
        proxy_pass http://127.0.0.1:8093;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
    #==================== 接口代理结束 ====================

    # 前端dist子目录访问
    location / {
        root /www/wwwroot/mall.dxkua.cn/mall/dist;
        index index.html;
        try_files $uri $uri/ /index.html;
    }

    location ~ ^/(\.user.ini|\.htaccess|\.git|\.env|\.svn|\.project|LICENSE|README.md)
    {
        return 404;
    }
    location ~ \.well-known{
        allow all;
    }
    if ( $uri ~ "^/\.well-known/.*\.(php|jsp|py|js|css|lua|ts|go|zip|tar\.gz|rar|7z|sql|bak)$" ) {
        return 403;
    }

    access_log  /www/wwwlogs/114.55.106.49.log;
    error_log  /www/wwwlogs/114.55.106.49.error.log;
}

6.后端部署java项目 选择好对应的jar包和开放端口以及jdk版本

💡 性能优化建议

  1. JVM调优：根据服务器内存调整 -Xms 和 -Xmx
  2. MySQL优化：配置 innodb_buffer_pool_size
  3. Redis优化：设置 maxmemory
  4. 开启Gzip：Nginx配置gzip压缩

🔒 安全建议

  1. 修改SSH端口
  2. 配置SSL证书（宝塔可申请免费证书）
  3. 定期备份数据库和代码
  4. 设置防火墙规则
  5. 修改所有默认密码

部署完成后，你的商城系统就可以通过浏览器访问了！有任何问题可以随时问我。

上一篇
下一篇