Files
mokeegateway/memory/session-20260612-2.md
2026-07-16 00:10:03 +08:00

2.9 KiB
Raw Permalink Blame History

name, description, metadata
name description metadata
session-20260612-2 2026-06-12 第2次会话 — VPN网络带宽诊断、Nginx代理丢失gzip修复、共享静态资源域名解决双域重复加载
type date sessionNumber startTime
session 2026-06-12 2 2026-06-12T19:30:00+08:00

2026-06-12 第2次会话

会话摘要

用户反馈 Vue 前端通过 VPN 访问非常慢JS/CSS 加载要 1 分钟)。诊断发现根因是 Nginx 代理层10.20.1.160)丢失了 gzip 压缩,导致 1MB+ 的文件通过 VPN 窄带宽原样传输。用户自行修复。

关键操作

VPN 网络诊断 — 前端加载慢

  • 问题现象: 通过域名 web.gw.zgitm.com 访问前端JS/CSS 加载要 40 秒~1 分钟
  • 网络拓扑: 用户电脑(10.20.1.5) → 公网VPN → 阿里云VPN(10.20.1.1) → Nginx代理(10.20.1.160) → 前端服务(10.20.1.170:5001)
  • 域名解析: web.gw.zgitm.comlogin.user.zgitm.com 均解析到 10.20.1.160
  • 实测数据:
路径 el.js (1.08MB) 耗时 gzip
内网 10.1.1.170:5001 19ms
VPN直连 10.20.1.170:5001 3-10秒
Nginx代理 web.gw.zgitm.com 20-40秒 丢失
  • 根因: 10.20.1.170 上的 Nginx 返回 gzip 压缩内容,但 10.20.1.160 Nginx 代理时丢失了 gzip 压缩,导致 1MB+ 文件通过窄带宽 VPN 原样传输
  • Ping延迟: 5-15ms正常不是延迟问题是带宽+压缩问题
  • 修复方案: 在 10.20.1.160 Nginx 配置中添加 proxy_set_header Accept-Encoding "gzip" 和/或开启本地 gzip — 用户自行修复

重要信息

  • VPN 网关: 10.20.1.1(阿里云)
  • VPN 子网: 10.20.1.x
  • 前端服务: 10.20.1.170:5001内网 10.1.1.170:5001
  • Nginx 代理: 10.20.1.160
  • DNS 服务器: 10.20.1.150
  • 公网 IP: zgitm.com → 8.133.197.85
  • 生产前端域名: web.gw.zgitm.com, login.user.zgitm.com
  • Nginx 版本: 160 上是 1.14.1170 上是 1.30.2

共享静态资源域名 — 解决 login/web 双域名重复加载

  • 问题: login.user.zgitm.com 登录后跳转 web.gw.zgitm.com同一份 JS/CSS 被两个域名各自下载一次
  • 方案: Vite 构建设置 base 为统一静态域名HTML 中资源 URL 用绝对路径
  • 第一版: http://web.wg.static.zgitm.com:5001/ — 遇到 Mixed Content 问题HTTPS 页面加载 HTTP 资源被浏览器拦截)
  • 最终版: https://web.gw.zgitm.com/ — 复用已有 HTTPS 域名,零额外配置
  • 改动文件:
    • vite.config.ts — 引入 loadEnvbuild 时 base 读取 VITE_STATIC_URLdev 回退 '/'
    • .env.production — 新增 VITE_STATIC_URL=https://web.gw.zgitm.com/
  • 效果: login 域名首次下载资源后,跳转到 web 域名时浏览器缓存直接命中0 网络请求

待处理

  • 重新 npm run build + 部署后验证效果
  • 如果后续还慢,考虑 Vite 拆包 Element Plus 按需加载
  • 考虑 160 Nginx 升级 gzip 压缩级别