H5-Dooring私有化部署流程(中文版指南)

[MrXujiang]

欢迎了解并使用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报错问题即可解决.