从空 Ubuntu 系统到跑起来 Shopro 开源商城
说明：
请使用 linux！
本文档在 Ubuntu20.04 系统上进行部署 【请使用云服务器】；
人生苦短，请用宝塔
前言
本文罗列了安装部署过程中可能会遇到的问题，如果文章中有造成卡顿的地方，欢迎留言，我会第一时间进行修改补充
准备工作，
更换镜像源【如果不是国内云服务器，请更换镜像源】
源地址
https://developer.aliyun.com/mirror/ubuntu
替换方式
备份老的源文件
sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak
编辑源文件，在阿里云找到对应的版本将内容覆盖进去，我的为 20.04
sudo vim /etc/apt/sources.list
deb http://mirrors.aliyun.com/ubuntu/ focal main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ focal main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ focal-security main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ focal-security main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ focal-updates main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ focal-updates main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ focal-proposed main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ focal-proposed main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ focal-backports main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ focal-backports main restricted universe multiverse
安装必要的软件
*、本地环境（因为前端打包要在本地）安装 npm 去 这里
开始第一步 安装宝塔环境
安装宝塔
打开宝塔官方网站，选择安装 linux 版网址，因为系统是 ubuntu 所以使用下面方式
wget -O install.sh http://download.bt.cn/install/install-ubuntu_6.0.sh && sudo bash install.sh
走起
image.png
等待中...... （大约持续 5 分钟，起身扭扭老腰~~）
显示如下即为安装成功啦！
image.png
安装程序运行环境
需要安装的软件列表如下 【请选择极速安装，你懂的】
nginx 1.18
mysql 5.7
php 7.2
redis 5.0
supervisor 1.3
nginx redis supervisor 版本可以有小的浮动
过程漫长(大约持续了 1 个小时，小憩一会......)
开始部署站点
创建站点
image.png
将站点默认的几个文件除了 .user.ini 全部删除（.user.ini 文件本身也删不掉）
注意：
*、如果数据库没有创建成功，请在数据库菜单手动创建数据库，注意字符编码选择 utf8mb4
设置站点
*、解析域名，并指向服务器 ip
*、设置 ssl 证书 请务必配置
*、添加伪静态&跨域，看这里
下载最新的 fastadmin 完整包，并上传到宝塔站点目录，步骤如下
*、直接将 zip 上传到 站点目录
*、解压
*、删除 zip 包
结果如下：
image.png
修改站点运行目录为 public
image.png
开始安装 fastadmin
访问
http://域名/install.php
设置好数据库账号密码， 管理员账号
访问报错：
image.png
说明没有设置伪静态和跨域，请设置站点伪静态并增加跨域代码，看这里
这是后端的
image.png
设置站点为 https 增加 SSL 证书
image.png
重启 nginx！！！
重启 nginx！！！
重启 nginx！！！
安装 shopro 插件
准备
请打开调试模式，随时定位问题【部署完成上线，请关闭调试模式】
image.png
插件管理安装 shopro
image.png
插件文档走一波
// 移除旧版
composer remove overtrue/wechat
.
// 安装新版
composer require "overtrue/wechat:^4.2" -vvv
.
// 更新扩展包
composer update
商城配置走一波【请认真填写配置项，每一项都很重要】
看这里 shopro 商城配置
貌似一切都进行的那么顺利
开始部署前端
安装 HbuilderX
去这里安装 HbuilderX，请下载 App 开发版
将前端代码包下载到本地，解压
image.png
在 HbuilderX 打开
image.png
点击顶部菜单运行 -》 运行到浏览器 -》 chrome 【H5 运行为例】
真不巧，报错了，内容如下：
image.png
此问题是未安装前端依赖包
使用 HbuilderX 终端（或者任意熟悉的终端，需要进入前端代码目录）， 执行 npm install
image.png
执行 npm install ,结果如下即为成功：
image.png
再次运行到浏览器
又报错了：
image.png
根据提示找到对应的插件，进行安装 工具 -》插件安装
image.png
再次运行：
image.png
完美，搓手~~
使用测试账号：13888888888 密码：123456
慢着，别高兴得太早，接口请求全是官方的演示站
修改根目录 env.js 文件，将域名替换为 shopro.test (换为你的域名)
image.png
至此，如果上面伪静态，跨域，SSL 配置没有问题，就能看到正常的商城页面了
分享海报配置【H5】
生成海报前，请先把 后台 -》 商城配置 -》商城信息-》分享设置，配置正确
image.png
image.png
相当的丝滑
image.png
分享海报配置【小程序】
生成海报请先确保小程序发布过至少一版，否则服务端会报 /pages/index/index 页面路径无效 41030invalid page hint: [zEDCRb0gE-Nr333a]
请配置小程序 appid，如下：
image.png
请先在小程序开发工具 -》设置-》安全设置 -》安全 -》 服务端口-》开启
image.png
准备运行小程序
image.png
注意勾选运行时是否压缩代码，否则可能无法正常预览小程序
走起... 【如果 商城配置 -》平台配置-》小程序配置 正确，这里的微信授权就是 ok 的哦】
生成海报依然如此丝滑
image.png
到这里还没有完，当使用手机预览的时候发现海报无法生成，甚至连首页也出不来（开发工具能出来是因为开发工具有个选项 不校验域名合法性 ），这是因为，后端的域名和海报图片地址都需要添加到小程序允许的服务器域名中，具体位置 小程序后台 -》 开发 -》 开发设置 -》 服务器域名
具体要添加的域名包括
api 域名 // 后端 api 接口域名，请部署 `https`
api.7wpp.com // 后台默认的海报背景的域名
wx.qlogo.cn // 微信授权登录的头像地址
shopro-1253949872.image.myqcloud.com // 商城演示商品图片地址
至此海报生成大难题解决
队列 & redis
为了提高系统性能，活动可靠性，系统引入了 队列 和 redis 缓存
下单试试
image.png
此报错为未安装 队列插件，队列 和 redis 配置文档已经很详细了，请移步按照文档进行配置，点这里
配好队列，加上余额，使用余额付款，一切正常的话，就能看到订单支付成功啦！！！
发布到正式
前提已经走过上面开发过程，env appid 等已经正常设置
H5 端
前端请单独部署，不要和后端接口使用一个站点，看这里
宝塔创建 H5 前端站点
image.png
前端的伪静态&跨域
image.png
SSL，请参考上面后端的进行设置 请务必配置
重启 Nginx！！！
开始打包前端
image.png
填写 网站名称标题
image.png
打包成功
image.png
将两个文件上传到宝塔前端站点根目录，如图所示：
image.png
访问前端网址，至此 H5 前端部署完成
发布小程序端
注意不要运行模式下的代码提交小程序审核
点击发行-》小程序-微信
image.png
填写小程序名称，和正式的appid
image.png
然后在微信小程序开发工具点击上传
image.png
最后在微信小程序后台 将刚才上传的版本提交微信审核
至此前端发布流程完成
常见问题
部分用户接口出现 EventDispatcher not found
EventDispatcher not found
这是 php 和 overtrue/wechat 某个版本才会出现的问题，导致 symfony/event-dispatcher 扩展包被移除
解决办法：
手动安装
composer require symfony/event-dispatcher:^4.3 -vvv
新添加订单，支付页提示订单不存在
请检查队列配置文件 application/extra/queue.php 的 connector 配置是否是 redis【推荐】 或者 database，如果不是（Sync），请移步这里
拼团开团支付成功，跳转我的拼团不显示
因为支付成功之后采用异步队列进行执行，可能会存在短暂延迟
*、首先稍微等待一下，60秒之内，刷新我的拼团页面，看是否能显示出来
*、如果长时间还是未出来，确定队列监听是否正常，配置在这里
微信公众号登录提示 redirect_uri 域名与后台配置不一致
image.png
请在微信公众号后台 开发-》接口权限-》网页服务-》网页授权 设置网页授权回调域名为后台 api 的域名，别忘了配置 ip 白名单
权限不足 Permission denied
Permission denied
*、首先检查 supervisor 守护进程执行用户是否是和 php-fpm 执行用户一直，宝塔是 www，如果不一致请修改为 www
image.png
*、修改整个后端目录所属用户为 www
image.png
短信验证码无法发送
*、请安装阿里云短信插件
*、在阿里云申请短信模板
*、在现有默认模板基础再增加 mobilelogin 的短信模板
配置示例：
image.png
个人中心等级图标不显示
image.png
请参考这里
部分接口请求报错
cURL error 60: SSL certificate problem: unable to get local issuer certificate (see https://curl.haxx.se/libcurl/c/libcurl-errors.html)
说明：该错误出现原因大致有两种：第一在本地部署的测试环境；第二未配置域名SSL 证书
解决：
请在线上部署环境， 并且配置好证书即可
如果能折腾，并且一定要在本地部署开发环境，解决办法如下
下载 cacert.pem 证书
https://curl.haxx.se/ca/cacert.pem
编辑当前系统php 配置文件 php.ini
[curl]
; A default value for the CURLOPT_CAINFO option. This is required to be an
; absolute path.
curl.cainfo = 刚才下载的 cacert 的放置的绝对地址/cacert.pem
重启 php-fpm，重启 nginx
常见问题持续更新中
...
