大家好啊，我是测评君，欢迎来到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
后端搭建教程
- 下载源码，解析三个域名（接口端、后端界面端、消息发送接收端），宝塔添加三个站点，PHP版本选择纯静态，创建一个数据库，PHP扩展安装redis、fileinfo、Swoole4，删除以下PHP禁用函数：
putenv
shell_exec
proc_open
pcntl_ 开头的函数- 打开PHP8配置文件，在最尾部一行添加：
swoole.use_shortname = 'Off'- 宝塔新建数据库，压缩本地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- 打开后端接口的域名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/;
}- 打开消息接收端的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/;
}前端搭建教程
- vscode打开mineadminvue目录，npm命令如下：
# 安装依赖
yarn install
# 本地启动
yarn run serve
# 打包后前端输出到 dist 目录，打包后把此目录的文件上传到服务器即可。
yarn build- 我们还需要对前端访问图片地址进行设置，打开 src/config/upload.js 文件，修改 LOCAL 的值：
export default {
storage: {
// 后面的 upload 要跟 nginx 的代理配置路径一致
LOCAL: 'http://demo.xxx.com/upload',
OSS: '',
COS: '',
QINIU: ''
}
}- 修改前端根目录下.env.development与.env.production文件下的接口配置信息。
- 前端代码发布上宝塔后，还需要在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/;
}- 常见问题详见官方文档。
系统实测截图
获取方式
//ceping.club/1162.html