1、准备域名 至少 2个 域名
```
1个域名用于 api接口 例如 api.baidu.com
1个域名用于客服端访问 例如 baidu.com
```
2、服务器环境 采用宝塔 LNMP环境
| 软件 | 版本 |
| --- | --- |
| php | 7.4 |
| mysql | 5.7 |
| nginx | 1.21.4 |
> nginx版本视情况而定,新的就行
3、目录结构
![](https://img.kancloud.cn/33/32/3332929cb2fd835d4e1dcbccbed3c0c5_810x292.png)
api 是整个系统的接口和总管理后台的代码
socket 是通信服务端
web 是商户端的vue源码
## **API接口搭建**
(1)搭建服务端 ,前提我们有域名 例如 `api.xxx.com`
![](https://img.kancloud.cn/7f/e2/7fe2c0e63db55d8f854dcc635e0c298b_2351x1530.png)
>[danger] 第4步选择 源码的 放过去的api目录,入下
![](https://img.kancloud.cn/80/0a/800ae3cd5e2ed377c0fb9a8dd1131e92_1238x552.png)
(2)然后选择运行目录
![](https://img.kancloud.cn/09/2d/092dd283e32b38fba9221969324e2c89_1307x640.png)
选择 api 下的 public 目录
(3)设置伪静态
![](https://img.kancloud.cn/a6/75/a675f7b1097fd9a6ccb23d9ca98a2196_1370x1184.png)
下拉选择 thinkphp 保存即可
(4)设置ssl
![](https://img.kancloud.cn/28/cd/28cd37a99f588bb887c9aa29d702168d_1334x1248.png)
签名并开启强制 https
(5)新建数据库
![](https://img.kancloud.cn/75/5e/755e62d31a82ac5c07f5ed2c2ab7f67e_2416x1335.png)
链接数据,并导入 api 下的 qiayun.sql
(6) 配置系统 api下的config/database.php 配置刚才新建的数据库和密码
![](https://img.kancloud.cn/6b/a9/6ba912cb6732419f07eae0f9277f28e9_1530x1427.png)
(7)配置系统信息 api/config/qiayun.php
![](https://img.kancloud.cn/ff/e9/ffe9a7caacbd8c074b4b435e92a7e6c7_1322x1283.png)
| 位置 | 说明 |
| --- | --- |
| 1 | 配置ssl,则写 wss:// 否则写 ws:// |
| 2 | 配置您的api域名+端口 例如本例子是 api.zxc1122.xyz:2020 |
| 3 | 配置api接口的完成域名 |
| 4 | 你有多少个前端的访问域名 配置多少个 域名 + '/#/webchat/' |
## **编译商户端**
源码包 web下的目录 是 客服的商户端vue源码
![](https://img.kancloud.cn/62/59/6259646943dfba1860c849a6c2e27a73_794x596.png)
保证你的电脑安装了 node 环境,进入源码目录,执行
```
npm i
```
并修改 src/config/index.js
![](https://img.kancloud.cn/4d/54/4d5480336b192611317b8b2b010b3119_931x446.png)
配置刚才配置好的 api 路由地址 执行
```
npm run build
```
编译出的源码在 web/dist
![](https://img.kancloud.cn/eb/76/eb760a9b0a2051a49c414143da4554b2_458x418.png)
准备好的域名,新建一个 纯静态站点,将dist下的源码 全部上传
![](https://img.kancloud.cn/08/ec/08ec8f35dd5db11d04c7397475e2e899_1411x1142.png)
## 启动 websocket 服务端
宝塔安全放开 2020 端口![](https://img.kancloud.cn/36/d4/36d45f0556b9f25d9028dd843d15de9a_1483x903.png)
同时确保服务器安全组也放开了 2020端口
(1)上传 源码中socket 源码到服务器,确定好 cli 模式的php版本
![](https://img.kancloud.cn/cd/64/cd6432cd4fa03902614437a84a7272a9_2507x1267.png)
(2)并到已安装的php里面找到对应的版本,设置![](https://img.kancloud.cn/f0/48/f048db7b93786b6aa86de9befb7d1b1a_2397x1446.png)
找到disable_functions 在前面加个 `;` 注释掉,并保存
(3)找到socet源码的包下的config文件
![](https://img.kancloud.cn/e3/81/e381d7b7c55004ea799687e36162c66f_1783x1270.png)
配置数据库信息,配置ssl证书信息
>[danger] 证书的位置就是找到 api接口的网站,打开nginx的配置文件
> ![](https://img.kancloud.cn/46/8a/468af6ab6d2b5d9f23b5dc0b87d6e140_3753x1537.png)
(4)打开命令行输入
```
php start.php start -d
```
![](https://img.kancloud.cn/d0/58/d058873071ef4d79e30e70c9d601e834_2457x1577.png)
>[danger] 注意执行目录要在 socket 下
## 默认地址和账号
总后台:api配置的域名/admin 账号 admin 密码 admin
在总后台创建商户就可以进入商户了
## 编译H5端
![](https://img.kancloud.cn/16/b3/16b375c1db185082aa1951101a727eb3_1649x984.png)
用hbuildx 打开 h5-app ,然后打开config 下的 app.js
| 配置 | 地址 |
| --- | --- |
| BASE_URL | 访问的接口地址 比如 api.zxc1122.xyz |
| WEBSOCKET | websocket连接地址 如果采用了cdn,注意地址 |
选择 >> 发行 >> 网站-PC WEB 或手机H5 这个选项
![](https://img.kancloud.cn/28/8c/288c52bc7b33b3dfde80d61802c45c8f_3024x4032.png)
打包完成后,会在有个 h5 目录
![](https://img.kancloud.cn/64/fd/64fdbea1c21ba44d3967700f1328df4e_704x1096.png)
然后把这个 h5目录复制到 api程序的 public 目录下
![](https://img.kancloud.cn/81/c7/81c779929bf8dc2aded9385c649b216b_677x1112.png)