大家好啊，我是测评君，欢迎来到web测评。

有个朋友前几天发消息给我，让我录制一个开源基于Swoole的后台管理系统搭建教程视频，所以抽时间研究了一下搭建部署流程，现在分享给大家。

系统介绍

• 这是一套基于Hyperf框架开发的系统，企业级架构分层，轻松支撑创业公司及个人前期发展使用，使用少量的服务器资源媲美静态语言的性能。
• 前端使用Vue3 + Vite3 + Pinia + Arco，一端适配PC、移动端、平板。企业和个人可以商业使用。

技术架构

• 技术：Vue3 + Vite3 + Pinia + Arco + Swoole + PHP8 + Mysql5.7 + NodeJs + Composer + Redis + RabbitMQ
• 环境（建议使用宝塔面板一键搭建lnmp）：
• 系统：Linux
• Nginx >=1.20
• PHP扩展 fileinfo，redis，Swoole4

后端搭建教程

1. 下载源码，解析三个域名（接口端、后端界面端、消息发送接收端），宝塔添加三个站点，PHP版本选择纯静态，创建一个数据库，PHP扩展安装redis、fileinfo、Swoole4，删除以下PHP禁用函数：

putenv
shell_exec
proc_open
pcntl_ 开头的函数

2. 打开PHP8配置文件，在最尾部一行添加：

swoole.use_shortname = 'Off'

3. 宝塔新建数据库，压缩本地mineadmin目录，上传到宝塔的后台接口目录中解压缩，按照以下命令安装后端：

# 安装依赖
composer install
# 显示安装欢迎语之后，然后按照提示一步步完成安装。一些跟自己的默认值相同的可以按 `回车` 跳过
php bin/hyperf.php mine:install
# 没有任何数据未连接成功等相关报错，遇到以下提示后，按 ctrl+c 关闭服务，重启执行安装命令
# 再输入以下命令进行第二遍安装：建立数据表和填充表初始数据，提示以下语句后，按 回车 执行即可
php bin/hyperf.php mine:install

# 启动后端
# 开发环境可以使用热更新方式来启动，在根目录执行下面的启动命令即可 （生产环境不要用热更新）
php watch -c
# 生产环境启动命令
php bin/hyperf.php start

4. 打开后端接口的域名nginx配置文件，配置以下反向代理规则：

# PHP后端代理，这里的 /prod/ 要跟前端 .env.production 的 VITE_APP_PROXY_PREFIX 值一致
  location /prod/ {
      # 将客户端的 Host 和 IP 信息一并转发到对应节点
      proxy_set_header Host $http_host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      # 将协议架构转发到对应节点，如果使用非https请改为http
      proxy_set_header X-scheme https;

      # 执行代理访问真实服务器
      proxy_pass http://127.0.0.1:9501/;
  }
  # ^~ 不能去掉，/upload/ 中的 upload 可以改成其他名称
location ^~ /upload/ {
    # 将客户端的 Host 和 IP 信息一并转发到对应节点
    proxy_set_header Host $http_host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    # 将协议架构转发到对应节点，如果使用非https请改为http
    proxy_set_header X-scheme https;

    # 执行代理访问真实服务器
    proxy_pass http://127.0.0.1:9501/;
}

5. 打开消息接收端的nginx，配置以下规则：

location / {
    # WebSocket Header
    proxy_http_version 1.1;
    proxy_set_header Upgrade websocket;
    proxy_set_header Connection "Upgrade";

    # 将客户端的 Host 和 IP 信息一并转发到对应节点
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;

    # 客户端与服务端无交互 60s 后自动断开连接，请根据实际业务场景设置
    proxy_read_timeout 60s ;

    # 执行代理访问真实服务器
    proxy_pass http://127.0.0.1:9502/;
  }

前端搭建教程

1. vscode打开mineadminvue目录，npm命令如下：

# 安装依赖
yarn install
# 本地启动
yarn run serve
# 打包后前端输出到 dist 目录，打包后把此目录的文件上传到服务器即可。
yarn build

2. 我们还需要对前端访问图片地址进行设置，打开 src/config/upload.js 文件，修改 LOCAL 的值：

export default {
  storage: {
    // 后面的 upload 要跟 nginx 的代理配置路径一致
    LOCAL: 'http://demo.xxx.com/upload',
    OSS: '',
    COS: '',
    QINIU: ''
  }
}

3. 修改前端根目录下.env.development与.env.production文件下的接口配置信息。
4. 前端代码发布上宝塔后，还需要在nginx配置反向代理规则：

  location / {
      try_files $uri $uri/ /index.html;
      index index.html;
  }
  # PHP后端代理，这里的 /prod/ 要跟前端 .env.production 的 VITE_APP_PROXY_PREFIX 值一致
  location /prod/ {
      # 将客户端的 Host 和 IP 信息一并转发到对应节点
      proxy_set_header Host $http_host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      # 将协议架构转发到对应节点，如果使用非https请改为http
      proxy_set_header X-scheme https;
      # 执行代理访问真实服务器
      proxy_pass http://127.0.0.1:9501/;
  }

5. 常见问题详见官方文档。

系统实测截图

获取方式

//ceping.club/1162.html