项目概况 此项目分为三个子项目

目录介绍

  1. 移动端 —> 手机和微信小程序访问
  1. WEBPC管理端 —> PC 管理端
  1. Java Api —> 为移动端和后台提供Api

打包前环境准备

  1. 一个主域名,3个子域名共计4个域名

  2. 主域名用于访问移动端,子域名1用于访问后台,子域名2用于访问Java Api,子域名3用于图片资源访问

  3. 举例4个域名,下文中会用此来代替

​ - 移动端 —> https://www.app.com

​ - PC 后台 —> https://admin.app.com

​ - Java Api —> https://api.app.com

​ - 图片资源 —> https://image.app.com

  1. 在宝塔上新创建4个静态站点

​ - 进入宝塔点击左侧网站,点击右侧添加站点,会弹出窗口,请按下图设置

​ - ftp此处可不创建,如果需要后面可以在ftp模块创建,注意ftp需要开启21端口

​ - 依照上图创建4个站点

​ - 站点里填写的域名是上面解析的4个域名,分别要对应好项目文件夹,图片和API可以根据网站分开也可以指向同一个域名 如果指向同一个建议向 api 靠齐

​ - 设置https证书,宝塔有免费证书可设置,在网站列表

​ [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mlRPopOH-1617680906054)(/Users/stivepeim/Library/Application Support/typora-user-images/image-20210404173736915.png)]

​ - 点击申请后会弹出窗口,有申请流程提醒,申请成功之后如下图操作,

​ - 站点https证书设置完成

  1. Mysql数据库创建

​ - 对应权限根据自己需求选择

  1. ftp创建(可以不设置 只是为了方便部署)

​ - 点击左侧ftp,点击右侧添加,会弹出窗口,请按下图设置

​ - 根目录指当前ftp账号可访问此目录下的所有文件夹以及文件

  1. redis

​ - 在宝塔 软件商店中搜索安装即可,密码设置

  1. 端口放行

​ - 点击左侧安全,点击右侧添加,会弹出窗口,请按下图设置

​ - 图片中每个人可根据自己的实际情况开启端口

​ - 必须开的端口

​ * 21 —> ftp 端口

​ * 22 —> ssh 端口,终端连接服务器使用

​ * 80 —> web 服务访问端口

​ * 443 —> https 访问使用端口,也是微信开放平台要求使用

​ * 3306 —> 数据库Mysql端口

​ * 6379 —> Redis端口

​ * 20000 —> Java Api项目监听端口

Java 项目部署

  1. 如下图所示执行打包后得到 Crmeb.jar

  1. 把Jar包上传到 api.app.com站点

​ -

​ -

  1. 安装https证书 ----> 参考安装流程 打包前准备 第四条

  2. 设置反向代理 目标url为 http://127.0.0.1:20000

  1. 上传crmeb目录下的 start.sh文件api.app.com站点下。和 Jar包在同级目录

​ - /start.sh 文件路径修改

  1. 在 jar包同级目录下打开终端 运行 start.sh (运行命令为 ./start.sh ) 脚本即可启动项目

  2. 默认启动 20000 端口号 此端口号可以在配置文件里配置

​ -

  1. 访问已经启动且部署好的 java 程序域名 确认java 正确运行 swagger 登录口令在对应的环境文件中配置。

部署admin子项目

  1. WEB PC 管理端

​ - 同本地运行类似 确认修改配置环境中的 path 后 执行自己对应环境的命令

npm run build:stage -- 打包测试环境
npm run build:prod -- 打包正产环境
  1. 命令结束后,把对应 dist 文件夹下的所有文件上传到宝塔站点 admin.app.com

  2. 素材文件,同本地运行一样,将资源文件上传到图片服务对应的目录下即可,首次素材加载会失败,登录进去修改文件上传对应的配置即可

部署移动端子项目

  1. 移动端项目通过 Hbuilder X 打包H5,打包成功如下图

​ - 修改项目上级目录对应的 domain.json 中的 path 选中项目后点击发行 --> H5

​ - 注意打包H5 domain中的地址会直接打包进静态界面,所以打包H5之前确定修改 domain.json 中的地址为正确地址

​ -

  1. 点击图中红色区域打开打包后的 H5 文件夹,如果不能点击则需要手动找到对应目录

  2. 打开H5目录

​ -

  1. 把H5目录下的文件上传到 www.app.com目录下即可

至此项目部署完成,可以一一访问确认一遍

移动端访问地址 www.app.com [示例地址,根据自己地址对应更改]

后台访问地址 admin.app.com [示例地址,根据自己地址对应更改]

1. 登录账号 admin
2. 登录密码 123456

详情可了解
http://github.crmeb.net/u/dazongzi

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐