从空 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

这是 phpovertrue/wechat 某个版本才会出现的问题,导致 symfony/event-dispatcher 扩展包被移除

解决办法:

手动安装

composer require symfony/event-dispatcher:^4.3 -vvv

新添加订单,支付页提示订单不存在

请检查队列配置文件 application/extra/queue.phpconnector 配置是否是 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

常见问题持续更新中

...

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,313评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,369评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,916评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,333评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,425评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,481评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,491评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,268评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,719评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,004评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,179评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,832评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,510评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,153评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,402评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,045评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,071评论 2 352