美文网首页
从空 Ubuntu 系统到跑起来 Shopro 开源商城

从空 Ubuntu 系统到跑起来 Shopro 开源商城

作者: smallnews | 来源:发表于2020-06-08 18:32 被阅读0次

    说明:
    请使用 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
    

    常见问题持续更新中

    ...

    相关文章

      网友评论

          本文标题:从空 Ubuntu 系统到跑起来 Shopro 开源商城

          本文链接:https://www.haomeiwen.com/subject/xzfbzhtx.html