JLC Docs
PIG
AI
PIG
AI

宝塔部署前端

部署前必读

请严格按照本文档步骤进行部署，避免因配置错误导致的网络问题。完整执行所有步骤后方可正常访问。

宝塔面板简介

宝塔面板是一款安全高效的服务器运维可视化管理工具。

使用前：需手工输入 Linux 命令安装各类软件，操作繁琐且易出错，学习成本高。

使用后：2 分钟完成面板安装，通过图形界面一键管理服务器，替代复杂命令行操作。

一、安装宝塔面板

1.1 执行安装脚本

本文档以 CentOS 7 和宝塔面板 v7.9 为例演示。

# 安装 wget 并执行宝塔安装脚本
yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh ed8484bec
安装完成

安装完成后，命令行会显示宝塔面板的访问地址、用户名和密码，请妥善保存。

宝塔安装完成界面

1.2 安装 Nginx 服务

登录宝塔面板后，在软件商店中搜索并安装 Nginx。

宝塔面板安装 Nginx

1.3 创建网站站点

在宝塔面板的网站管理中，点击"添加站点"按钮，填写域名或 IP 地址。

宝塔面板添加站点

1.4 配置 Nginx 反向代理

点击站点设置，选择"配置文件"，将以下配置粘贴到编辑器中。

编辑站点配置文件 
# 隐藏 Nginx 版本号，提升安全性
server_tokens off;
# 允许上传的最大文件大小
client_max_body_size 64m;

server {
  listen 80;
  server_name localhost;

  # Gzip 压缩配置
  gzip on;
  gzip_static on;
  gzip_min_length 1k;
  gzip_comp_level 4;
  gzip_proxied any;
  gzip_types text/plain text/xml text/css;
  gzip_vary on;
  gzip_disable "MSIE [1-6]\.(?!.*SV1)";

  # 前端静态资源目录（构建后的 dist 目录内容）
  root /www/wwwroot/你的站点目录/;

  # 后端 API 反向代理
  location ^~/api/ {
    # 修改为实际后端服务地址，单体版默认 9999 端口
    proxy_pass http://127.0.0.1:9999/;
    proxy_connect_timeout 60s;
    proxy_read_timeout 120s;
    proxy_send_timeout 120s;
    proxy_set_header from "";
    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 http;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $http_host;

    # 关闭缓冲，支持 SSE 流式传输（AI 对话必需）
    proxy_buffering off;
    proxy_cache off;
    chunked_transfer_encoding off;

    # 屏蔽敏感路径，防止接口文档泄露
    location ~ ^/api/(actuator|swagger-ui|v3/api-docs|swagger-resources|webjars|doc.html|druid) {
      return 403;
    }
  }
}
配置修改

必须修改以下两项配置：

  • root 路径：改为宝塔站点的实际目录
  • proxy_pass 地址：改为后端服务的实际地址（单体版默认端口 9999）
Nginx 配置示例截图

二、构建并部署前端

2.1 修改环境配置

架构选择

构建前端前，必须根据后端架构类型修改环境配置，否则会导致接口调用失败。

编辑 pigx-ui/.env 文件：

# 单体版本设置为 false，微服务版本设置为 true
VITE_IS_MICRO=false

2.2 执行构建命令

在项目根目录执行以下命令：

# 进入前端项目目录
cd pigx-ui

# 安装依赖（使用淘宝镜像加速）
npm install --registry=https://registry.npmmirror.com

# 构建生产环境代码
npm run build
构建产物

构建成功后，会在项目根目录生成 dist 目录，其中包含所有前端静态资源文件。

2.3 上传构建产物

将 dist 目录下的所有文件（不包括 dist 文件夹本身）上传至宝塔站点根目录。

上传前端构建产物到站点目录
上传注意

确保 index.html 文件位于站点根目录，而不是 dist/index.html。

三、访问系统

访问地址：http://宝塔服务器IP:80

默认账号：admin

默认密码：123456

部署成功

如果能够正常访问登录页面，说明前端部署成功。输入账号密码后即可进入系统。

四、常见问题

Q1: 访问页面显示空白或 404

原因分析：静态资源路径配置错误或文件未正确上传。

解决方案：

  1. 检查 Nginx 配置中的 root 路径是否正确指向站点目录
  2. 确认站点根目录包含 index.html 文件
  3. 检查文件上传权限，确保 Nginx 有读取权限

Q2: 登录时提示网络错误或接口超时

原因分析：后端服务未启动或反向代理配置错误。

解决方案：

  1. 确认后端服务已正常启动（单体版检查 9999 端口）
  2. 检查 Nginx 配置中的 proxy_pass 地址是否正确
  3. 确认服务器防火墙已放行后端端口
  4. 使用 curl 命令测试后端接口连通性
# 测试后端服务是否可访问
curl http://127.0.0.1:9999/actuator/health

Q3: AI 对话流式输出不工作

原因分析：Nginx 缓冲配置导致 SSE（Server-Sent Events）流式数据被阻塞。

解决方案：

确保 Nginx 配置中的 location ^~/api/ 块包含以下三行配置：

proxy_buffering off;       # 关闭代理缓冲
proxy_cache off;           # 关闭代理缓存
chunked_transfer_encoding off;  # 关闭分块传输编码

Q4: 静态资源加载缓慢

原因分析：未启用 Gzip 压缩或 CDN 加速。

解决方案：

  1. 确认 Nginx 配置中已启用 gzip on 和 gzip_static on
  2. 考虑使用 CDN 加速静态资源访问
  3. 调整 gzip_comp_level 压缩级别（建议 4-6）
本页目录