构建与部署

本文介绍 mdp-vben 三个应用的构建、产物压缩、nginx 配置，以及项目内置的 Jenkins / Docker 两种部署方式。

1. 构建

在项目根目录执行：

# 构建全部应用
pnpm build

# 单独构建（推荐，速度快）
pnpm build:workbench     # → apps/web-workbench/dist
pnpm build:console       # → apps/web-console/dist
pnpm build:open          # → apps/web-open/dist

构建前请确认对应应用 .env.production 中的关键变量：

变量	说明
`VITE_GLOB_API_URL`	后端接口地址（生产一般用相对路径 `/api`，由 nginx 转发）
`VITE_GLOB_MODE`	后端架构模式：`boot`（单体）/ `cloud`（微服务）
`VITE_ROUTER_HISTORY`	路由模式，默认 `hash`；改 `history` 需 nginx 配合，还需要修改后端单点登录的配置。
`VITE_BASE`	部署路径前缀（部署到非根目录时改为 `/xxx/`，首尾都要带 `/`）
`VITE_APP_STORE_SECURE_KEY`	store 持久化加密密钥，部署前务必替换为随机值

构建体积分析：

pnpm build:analyze     # 构建后自动打开体积分布报告

本地预览产物：

pnpm preview           # 或进入 dist 目录用 live-server 预览

2. 产物压缩

在 .env.production 中配置 VITE_COMPRESS：

VITE_COMPRESS=gzip            # 仅 gzip
VITE_COMPRESS=brotli          # 仅 brotli（nginx 需安装对应模块）
VITE_COMPRESS=gzip,brotli     # 两者同时开启

3. nginx 配置

3.1 静态资源代理

根据你配置的VITE_ROUTER_HISTORY参数，使用不同的配置。

hsah

server {
        listen       80;
        server_name  workbench.mddata.top;
        underscores_in_headers on;
  
				location / {
                root /data_mdp/webapp/web-workbench/;
                index index.html;
        }
}

server {
        listen       80;
        server_name  console.mddata.top;
        underscores_in_headers on;
  
				location / {
                root /data_mdp/webapp/web-console/;
                index index.html;
        }
}

server {
        listen       80;
        server_name  open.mddata.top;
        underscores_in_headers on;
  
				location / {
                root /data_mdp/webapp/web-open/;
                index index.html;
        }
}

history

server {
  listen 80;
  server_name console.mddata.top;        # 域名修改为：console.mddata.top/open.mddata.top/workbench.mddata.top

  location / {
    root /data_mdp/webapp/web-console;    # 地址修改为：web-console / web-open / web-workbench
    index index.html;
    # history 模式必需；hash 模式可省略
    try_files $uri $uri/ /index.html;

    # html 不缓存，避免发版后浏览器拿旧页面
    if ($request_filename ~* .*\.(?:htm|html)$) {
      add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
    }
  }
}

3.2 接口反向代理（解决跨域）

三个应用各自部署在独立域名/端口下，接口统一通过 /api 前缀转发到后端：

根据后台服务使用单体版还是微服版，采用不同的配置

boot

# 转发到 boot-server（默认 23455）
location ~ /api/([A-Za-z0-9]+)/(.*)$ {
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://127.0.0.1:23455/$2?$args;
}

cloud

# 转发到内部网关 inner-gateway-server（默认 23450）
location /api {
  proxy_pass http://127.0.0.1:23450/api;
  proxy_http_version 1.1;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection  "upgrade";
  proxy_set_header   Host $host:$server_port;
  proxy_redirect off;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  proxy_connect_timeout 60;
  proxy_read_timeout 600;
  proxy_send_timeout 600;
}

4. Jenkins 流水线部署（项目内置）

scripts/deploy/Jenkinsfile 是三个应用共用的流水线，流程：

需要在 Jenkins 上配置的参数：

参数	说明
`APP`	部署模块：`workbench` / `console` / `open`
`SERVER_SSH_HOST`	目标服务器（Publish over SSH 配置名）
`IS_INSTALL`	是否重新安装依赖（true 会删除 lock 文件重装）
`BUILD_BRANCHES`	拉取的分支

还需要按注释修改流水线里的两个路径：WORKSPACE_HOME（服务器存放目录，需提前创建并授 755 权限）与 PNPM_HOME（Jenkins 机器上 pnpm 的绝对路径）。

提示

Jenkinsfile 只负责把静态文件放到服务器目录，浏览器可访问还需配合上文的 nginx 配置。

5. 修改后端配置

yml 配置


sa-token:
  sso-client:
    # 【二选一】后端部署为单体版: boot-server
    server-url: http://workbench.mddata.top/api/workbench
    # 【二选一】后端部署为微服务版: inner-gateway-server
    server-url: http://workbench.mddata.top

		# 【二选一】前端项目使用 histroy 模式
    authUrl: 'http://workbench.mddata.top/auth/login'
		# 【二选一】前端项目使用 hash 模式
    authUrl: 'http://workbench.mddata.top/#/auth/login'

修改应用表(mdo_app)配置

home_url、sso_auth_login_url、sso_allow_url 这3个参数分别修改为自己的域名，域名后面的地址请勿修改。
sso_allow_url可以配置多个，建议使用 , 追加到后面。

id	app_key	home_url	sso_auth_login_url	sso_allow_url
1	web-workbench	http://workbench.mddata.top/		前端为hash模式：http://workbench.mddata.top/#/auth/login 前端为history模式：http://workbench.mddata.top/auth/login
2	web-console	http://console.mddata.top/	前端为hash模式：http://console.mddata.top/#/auth/login 前端为history模式：http://console.mddata.top/auth/login	前端为hash模式：http://console.mddata.top/#/auth/login 前端为history模式：http://console.mddata.top/auth/login
3	web-open	http://open.mddata.top/	前端为hash模式：http://open.mddata.top/#/auth/login 前端为history模式：http://open.mddata.top/auth/login	前端为hash模式：http://open.mddata.top/#/auth/login 前端为history模式：http://open.mddata.top/auth/login