独立部署

XYGo Admin 2026-04-01 37 次阅读

租户前端独立部署的优势、Nginx 配置与域名规划

独立部署

租户前端作为独立的 SPA 应用部署，拥有独立域名和构建流程。这是本项目多租户方案的核心优势之一。

独立部署的优势

1. 域名级隔离

每个租户（或整个租户端）使用独立域名，如 tenant.example.com，与平台端 admin.example.com 完全分离。用户感知上是两套独立系统，品牌感更强。

2. 独立发布

租户端前端可以独立于平台端进行构建和发布。平台端更新不影响租户端，反之亦然。这大幅降低了发布风险和回滚复杂度。

3. 按需定制

租户端可以有独立的主题色、Logo 配置
可以裁剪不需要的功能模块
构建产物更小，加载更快

4. 安全边界

租户端代码不包含平台级管理功能
接口命名空间隔离（/tenant/* vs /admin/*）
Cookie 和 localStorage 按域名天然隔离

5. 运维灵活

可以为高流量租户配置独立的 CDN 加速
前端静态资源和后端 API 可以分布在不同服务器
方便做灰度发布和 A/B 测试

构建

bash 复制代码

cd web-tenant
pnpm install
pnpm build

产物输出到 dist/ 目录。生产环境中 VITE_BASE_URL = /（独立域名部署），开发环境为 /tenant/。

Nginx 配置示例

nginx 复制代码

server {
    listen 80;
    server_name tenant.example.com;

    # 前端静态文件
    location / {
        root /var/www/tenant/dist;
        index index.html;
        try_files $uri $uri/ /index.html;
    }

    # 租户后台 API
    location /tenant/ {
        proxy_pass http://127.0.0.1:8000;
        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_set_header X-Forwarded-Proto $scheme;
    }

    # 站点公开接口
    location /site/ {
        proxy_pass http://127.0.0.1:8000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }

    # 附件访问
    location /attachment/ {
        proxy_pass http://127.0.0.1:8000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }

    # 验证码
    location /captcha/ {
        proxy_pass http://127.0.0.1:8000;
    }

    # 系统接口
    location /system/ {
        proxy_pass http://127.0.0.1:8000;
    }

    # WebSocket
    location /tenant-socket/ {
        proxy_pass http://127.0.0.1:8000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_read_timeout 86400;
    }

    # Gzip
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml;
    gzip_min_length 1024;
}

关键注意事项

所有 API 路径都必须反向代理到后端：/tenant/、/site/、/attachment/、/captcha/、/system/ 缺一不可。遗漏任何一个都会导致对应功能 404。
附件路径：图片和文件的 URL 形如 /attachment/xxx，必须代理到后端，否则页面中图片将无法显示。
WebSocket 路径：租户端 WebSocket 使用 /tenant-socket/ 路径（与平台端 /socket/ 区分），需要配置 HTTP 升级。
Hash 路由：项目使用 Hash 模式（URL 带 #），因此前端路由不依赖 Nginx 的 try_files，但配置 try_files 作为兜底仍是好实践。

域名规划建议

场景	域名方案
简单部署	`admin.example.com`（平台）+ `tenant.example.com`（租户）
多租户定制	`tenant-a.example.com`、`tenant-b.example.com`（配合 TenantResolve 域名匹配）
子路径方案	`example.com/admin/`（平台）+ `example.com/tenant/`（租户，通过 Nginx location 分流）