H5-Dooring私有化部署流程(中文版指南) #151
Description
欢迎了解并使用H5-Dooring 👋
H5-Dooring是一款功能强大，专业可靠的H5可视化页面配置解决方案，致力于提供一套简单方便、专业可靠、无限可能的H5落地页最佳实践。技术栈以react和typescript为主， 后台采用nodejs开发, 正在探索h5-lowcode解决方案。
- 商业授权版, 包含全套源码
- 后续Dooring更新统一此处提交, 如有更新需求可以自提
- 授权企业专享私有仓库
- Dooring系列产品已申请软件著作权, 请遵循商业授权协议使用, 禁止分发和开源, 否则追究其法律责任
项目架构新
H5-Dooring 技术架构包含了核心编辑器端, 管理后台(可替换成自己公司内部的, 或者改造成内部使用的), 服务端(可替换的服务端, 可以替换成自己公司的服务体系), 分别对应的目录如下:
- editor (H5-Dooring编辑器端)
- admin(管理后台端)
- server(服务端,仅用来数据支持和页面渲染等)
环境参数
| 包名 | 版本 | 备注 |
|---|---|---|
| nodejs | 14.15.4 | 建议使用此版本 |
| yarn(推荐) | 1.22.4 | 也可用npm, pnpm等, 但需要保证版本一致 |
浏览器支持
Modern browsers does not support IE browser
 IEdge |
 Firefox |
 Chrome |
 Safari |
|---|
本地运行
editor工程
购买私有化授权的企业可以进入交付的 editor 工程, 执行安装包命令:
yarn
安装完毕之后, 再运行命令:
yarn start
此时在终端控制台会打印访问的ip端口号, 我们在浏览器中打开即可运行.
构建
我们在项目的 package.json 文件中可以看到如下脚本配置:
"scripts": {
"start": "umi dev -- editor",
"start:h5": "umi dev -- h5",
"start:down": "umi dev -- downH5",
"build": "umi build -- editor",
"build:h5": "umi build -- h5",
"build:down": "umi build -- downH5"
}这里给大家介绍一下这几个命令的用途:
- build 用于打包编辑器工程
- build:h5 用于打包H5基座工程, 必需
- build:down 用于打包下载代码的基座工程(主要用于在线下载H5页面代码)
我们执行完build后, 会将打包后的文件统一移动到 server/static 目录下. 部署也只需要部署 server 目录即可.
公共配置
工程化我们采用的是 umi3.0, 所以我们在 .umirc.ts 文件下统一管理编辑器相关的公共配置, 这里我们需要关注一下文件中的 define, 主要用来提供自定义配置:
define: {
START_ENV,
lang,
// 配置h5端访问的域名
h5Domain: 'cn.dooring.vip',
// 设置当前版本号
curVersion: dooringVersion,
// 备案信息
copyright: '鄂ICP备18024675号-3',
// 是否显示更新弹窗
showUpdateModal: true,
// 更新日志
updateList: [
"1. 新增表格组件",
"2. 国际化优化",
"3. 表单详情页支持内部滚动",
"4. 个人图片库性能优化",
"5. 下载代码功能优化"
],
// 网站logo地址
logo: 'http://cdn.dooring.cn/dr/logo.ff7fc6bb.png',
// 入口页面是否展示赞助品牌和版权提示
showAdsAndTip: true,
// 登录时获取登录码的二维码
qrcode: 'http://cdn.dooring.cn/dr%2Fcode1.png',
// 友情链接展示
friendLinks: [
{
name: 'V6',
link: 'http://v6.dooring.cn/beta',
title: '可视化大屏编辑器'
},
{
name: 'Power',
link: '/powernice',
title: '文档编辑器'
}
],
// 默认语言
defaultLocale: 'zh-CN',
langMap: langMap
},admin
同 editor 工程, 这里就不一一介绍了.
server(服务器工程)
同样的, 我们进入该目录, 执行安装命令:
yarn
运行:
yarn start
如果单独启动 editor 或者 admin, 我们无法正常访问到服务器请求, 所以这个时候需要配置本地服务器ip, 同时在 ** server ** 工程中配置editor 或者 admin 工程的ip白名单, 如下:
// editor/.umirc.ts
{
define: {
devServer: 'http://192.xx.xx.xxx:3000'
}
}
// server/src/index.js
// 38 line
const whiteList = [
// 编辑器ip地址
'http://192.168.1.3:8000',
]; 这样我们就能解决服务器本地运行跨域的问题了.
部署上线
我们只需要把 server 目录上传到服务器, 并安装 nodejs, yarn 即可, 如果需要做负载均衡, 我们可以使用 pm2, 使用pm2做复杂均衡:
pm2 start dist/index.js -i max注意事项
1. cdn 问题
目前 H5-Dooring 工程中存在的部分静态资源存放在 Dooring 服务器 cdn 中, 企业在部署上线前需要将 dooring 的 cdn 替换成外部或者企业自身的 cdn 或者静态服务器中.
2. 安装报错问题
在安装过程中可能会遇到node-saas安装失败, 这里可以采用如下方案解决:
npm 安装 node-sass 依赖时，会从 github.com 上下载 .node 文件。由于国内网络环境的问题，这个下载时间可能会很长，甚至导致超时失败。
解决方案一
npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
// 也可以设置系统环境变量的方式。示例
// linux、mac 下
SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ npm install node-sass
// window 下
set SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ && npm install node-sass解决方法二：使用 cnpm
cnpm install node-sass解决方法三：创建.npmrc文件
在项目根目录创建.npmrc文件，复制下面代码到该文件
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
phantomjs_cdnurl=https://npm.taobao.org/mirrors/phantomjs/
electron_mirror=https://npm.taobao.org/mirrors/electron/
registry=https://registry.npm.taobao.org/
//顺序好像会有影响,我一开始不是这个顺序,后来改成这个,能安装成功还必须在主目录的.bashrc下添加:
export SASS_BINARY_SITE="https://npm.taobao.org/mirrors/node-sass"最后
$ sudo npm install --unsafe-perm -g node-sass
这样node-saas报错问题即可解决.