Skip to main content

二级目录部署

本文介绍卷王问卷系统如何配置二级目录部署，适用于需要在域名下的子路径部署系统的场景。

应用场景​

二级目录部署适用于以下场景：

  • 共享域名资源，在同一域名下部署多个应用
  • 企业内部统一门户，需要在子路径下访问问卷系统
  • 反向代理环境，通过路径区分不同的后端服务
  • CDN 或负载均衡器配置，需要基于路径进行路由

前端代码修改​

获取二级目录版本​

二级目录版本分支已单独推送到源码仓库，可通过以下方式获取：

1698819400965

配置二级目录路径​

默认的二级目录名称是 /survey。如需改为其他名称，需要修改客户端项目中的 .umirc.ts 配置文件：

1698819616306

配置说明：

export default defineConfig({
  // 其他配置...
  publicPath: '/survey/', // 静态资源的公共路径
  base: '/survey/', // 应用的基础路径
  // 其他配置...
});

重要提示：

  • publicPath 和 base 必须保持一致
  • 路径必须以 / 开头和结尾
  • 修改后需要重新构建前端项目

Nginx 配置​

基础配置​

正式部署的 nginx 配置文件如下，重点参见下面配置文件中的关键配置点：

server
{
        listen 80;
        index index.html;

        # 静态文件配置
        location  ^~ /survey {
          alias  /usr/local/html; # ① 修改此处路径为前端构建文件的绝对路径
          index index.html;
          try_files $uri $uri/ /survey/index.html; # ② 二级目录名称，需与前端配置保持一致
        }

        # 验证码接口代理
        location /survey/captcha {
          # 修改端口为实际后端服务端口
          proxy_pass http://localhost:1991/captcha;
          set_real_ip_from 0.0.0.0/0;
          real_ip_header  X-Forwarded-For;
          real_ip_recursive on;
          proxy_set_header Host      $host;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          client_max_body_size 30m;
          proxy_http_version 1.1;
          proxy_set_header Connection close;
          proxy_set_header Upgrade $http_upgrade;
          proxy_set_header Connection "Upgrade";
          proxy_send_timeout 1800;
          proxy_read_timeout 1800;
          proxy_connect_timeout 1800;

        }
        # 后端 API 接口代理
        location /survey/admin-api {
          # 修改端口为实际后端服务端口
          proxy_pass http://localhost:1991/admin-api;
          set_real_ip_from 0.0.0.0/0;
          real_ip_header  X-Forwarded-For;
          real_ip_recursive on;
          proxy_set_header Host      $host;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          client_max_body_size 30m;
          proxy_http_version 1.1;
          proxy_set_header Connection close;
          proxy_set_header Upgrade $http_upgrade;
          proxy_set_header Connection "Upgrade";
          proxy_send_timeout 1800;
          proxy_read_timeout 1800;
          proxy_connect_timeout 1800;
        }
}

配置说明​

关键配置点解析：

  1. 静态文件路径 (alias): 指向前端构建后的 dist 目录绝对路径
  2. 二级目录名称: 所有 /survey 路径需与前端配置中的 base 保持一致
  3. 后端服务端口: 根据实际后端部署情况修改端口号
  4. try_files: 确保前端路由正常工作，避免 404 错误

常见场景​

1. 内外网独立访问​

使用场景：分离内外网访问，只允许外网访问答卷页面，管理页面仅限内网访问。当外网和内网使用不同的 nginx 时，可配置代理转发。

参考文档

2. 总行-分行架构部署​

使用场景：总行提供统一域名访问，但问卷系统实际部署在分行服务器上。总行域名通过代理转发到分行服务器。

架构说明：

  • 总行域名：a.com/survey
  • 分行服务器：b.com:58001
  • 前端项目配置：根目录部署（非二级目录）

总行 Nginx 配置​

总行服务器上的 nginx 配置，负责将请求转发到分行：

server {
    listen 8081;
    server_name a.com;

    # 将 /survey/ 路径的所有请求转发到分行服务器
    location /survey/ {
        proxy_pass http://b.com:58001/;  # 注意：转发时去掉 /survey 前缀
        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;
    }
}

分行 Nginx 配置​

分行服务器上的 nginx 配置，直接提供服务：

server {
    listen 58001;
    server_name a.com;  # 使用总行域名

    root /root/dist;    # 前端构建文件路径
    index index.html;

    # 根路径访问
    location = / {
        try_files /index.html =404;
    }

    # 前端路由处理
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 验证码接口代理
    location /captcha {
        proxy_pass http://localhost:48080/captcha;
        set_real_ip_from 0.0.0.0/0;
        real_ip_header X-Forwarded-For;
        real_ip_recursive on;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        client_max_body_size 30m;
        proxy_http_version 1.1;
        proxy_set_header Connection close;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_send_timeout 1800;
        proxy_read_timeout 1800;
        proxy_connect_timeout 1800;
    }

    # 后端 API 接口代理
    location /admin-api {
        proxy_pass http://localhost:48080/admin-api;
        set_real_ip_from 0.0.0.0/0;
        real_ip_header X-Forwarded-For;
        real_ip_recursive on;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        client_max_body_size 30m;
        proxy_http_version 1.1;
        proxy_set_header Connection close;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_send_timeout 1800;
        proxy_read_timeout 1800;
        proxy_connect_timeout 1800;
    }
}

前端配置说明​

对于这种架构，前端项目的 .umirc.ts 配置应该使用根路径：

export default defineConfig({
  // 其他配置...
  publicPath: '/', // 根路径部署
  base: '/', // 根路径访问
  // 其他配置...
});

关键配置点​

  1. 总行代理转发：

    • location /survey/ 匹配带 /survey/ 前缀的请求
    • proxy_pass http://b.com:58001/ 转发时自动去掉 /survey 前缀

  2. 分行服务配置：

    • 监听端口 58001 对应总行转发的目标端口
    • server_name 使用总行域名，确保 Host 头正确
    • 前端项目按根路径部署，无需二级目录配置

  3. 访问路径示例：

    • 用户访问：https://a.com/survey/
    • 总行转发：http://b.com:58001/
    • 分行响应：返回前端首页

注意事项：

  • 确保分行服务器的防火墙允许总行服务器访问 58001 端口
  • 网络连通性测试：总行服务器能正常访问 b.com:58001
  • 日志监控：建议在两端都启用访问日志，便于问题排查

通过以上完善的配置和说明，您可以顺利完成卷王问卷系统的二级目录部署。