diff --git a/doc/.vuepress/config.js b/doc/.vuepress/config.js index 0dc9433..e9fd765 100755 --- a/doc/.vuepress/config.js +++ b/doc/.vuepress/config.js @@ -112,6 +112,38 @@ module.exports = { }, ], }, + { + title: '私有化部署和二次开发', + collapsable: false, + sidebarDepth: 1, + type: 'group', + children: [ + { + title: '私有化部署', + path: '/zh/guide/deployDev/deploy', + collapsable: false, + sidebarDepth: 1, + }, + { + title: '支持https', + path: '/zh/guide/deployDev/https', + collapsable: false, + sidebarDepth: 1, + }, + { + title: '接入第三方oss', + path: '/zh/guide/deployDev/oss', + collapsable: false, + sidebarDepth: 1, + }, + { + title: 'API接口文档', + path: '/zh/guide/deployDev/api', + collapsable: false, + sidebarDepth: 1, + }, + ], + }, ], }, }; diff --git a/doc/img/common/deploy.png b/doc/img/common/deploy.png new file mode 100644 index 0000000..deca669 Binary files /dev/null and b/doc/img/common/deploy.png differ diff --git a/doc/zh/guide/deployDev/api.md b/doc/zh/guide/deployDev/api.md new file mode 100644 index 0000000..9b40f4e --- /dev/null +++ b/doc/zh/guide/deployDev/api.md @@ -0,0 +1,58 @@ + + +**H5-Dooring**后端部分主要使用 `Nodejs` 开发, 为了满足更多定制化需求和服务的可移植性, 特意编写了API接口文档, +方便大家使用不同的后端语言实现服务接入. + +## 用户相关 + +### 登录注册 + +### 权限控制 + +### 用户列表 + +### 删除用户 + +### 修改用户信息 + + +## H5页面管理 + +### 获取H5数据 + +### 保存H5数据 + +### 修改H5数据 + +### 删除H5数据 + +## H5表单数据管理 + +### 保存表单数据 + +### 批量导入表单数据 + +### 删除表单数据 + +## 模版管理 + +### 获取模版库 + +### 保存模版 + +### 修改模版 + +### 删除模版 + +## 文件上传 + +## 数据统计 + +### 数据大盘接口 + +### 页面埋点 \ No newline at end of file diff --git a/doc/zh/guide/deployDev/deploy.md b/doc/zh/guide/deployDev/deploy.md new file mode 100644 index 0000000..d768233 --- /dev/null +++ b/doc/zh/guide/deployDev/deploy.md @@ -0,0 +1,27 @@ + + +私有化部署需要获取4个核心项目包, 包括 +- H5编辑器(h5_plus) +- H5基座(h5) +- Dooring管理后台(Dooring-Admin) +- 服务端项目(Server) + +获取以上四个核心源码工程需要满足商业授权协议, 具体可联系[徐小夕](http://h5.dooring.cn/uploads/WechatIMG3_1758e9753e2.jpeg) + +### 部署架构图 + +H5-dooring部署 + +部署流程如下: + +1. 下载4个源码工程, 安装依赖(npm install 或 yarn) +2. 打包3个前端工程至`server`的static目录下 +3. 在`server`下本地运行 `yarn start` 或 `npm start` 启动服务端进行本地测试 +4. 打包服务端代码, `yarn build` 生成 `dist` 目录, 建议使用 `pm2` 做`nodejs`服务的负载均衡, 运行 `pm2 start dist/index.js`启动生产环境代码 + +也可以将以上步骤集成到gitlab等CI, CD服务中, 进行自动化打包发布, 或者采用`docker`进行容器化部署. diff --git a/doc/zh/guide/deployDev/https.md b/doc/zh/guide/deployDev/https.md new file mode 100644 index 0000000..c0c3467 --- /dev/null +++ b/doc/zh/guide/deployDev/https.md @@ -0,0 +1,59 @@ + + +目前**H5-Dooring**全面支持https部署, 具体方式方案如下. + +### 前端工程 + +我们需要在前端工程中的`src/pages/document.ejs`中的`head`中添加如下代码: + +``` html + +``` + +目的是强制将页面中HTTP请求转换为HTTPS. + +### 服务器工程 + +#### 1. 申请SSL证书 + +#### 2. 生成 server.csr+server.key + +#### 3. 通过证书链生成.pem文件 + +#### 在`server`中的`src/index.js`按如下方式修改 + +``` js +// 忽略部分无影响代码 +import https from 'https'; + +// 你的ssl存放路径, 建议直接放在server目录下 +const filePath = path.join(__dirname, '../ssl') + +// 启动逻辑 +async function start() { + // https配置 + const httpsOptions = { + key: fs.readFileSync(path.join(filePath, '3536084__doctopia.com.cn.key')), //ssl文件路径 + cert: fs.readFileSync(path.join(filePath, '3536084__doctopia.com.cn.pem')) //ssl文件路径 + }; + + // https服务 + const server = https.createServer(httpsOptions, app.callback()); + + const io = require('socket.io')(server); + + // 忽略其他无影响代码 + + // https默认443, 这里我们可以走公共配置 + server.listen(443, () => { + console.log(`服务器地址:${config.staticPath}`) + }); +} + +start() +``` \ No newline at end of file diff --git a/doc/zh/guide/deployDev/oss.md b/doc/zh/guide/deployDev/oss.md new file mode 100644 index 0000000..1e9e284 --- /dev/null +++ b/doc/zh/guide/deployDev/oss.md @@ -0,0 +1,45 @@ + + +**H5-Dooring**全面支持第三方对象存储服务, 我们以七牛云对象存储为例. + +### 前端上传文件到oss +首先我们需要在第三方对象储存服务中配置对应的服务和域名. 其次安装对应的sdk, 如七牛云sdk: + +``` js +import * as qiniu from 'qiniu-js'; +``` + +其次我们修改`h5_plus`工程的`Upload`组件, 详细地址为`src/core/FormComponents/Upload`. + +修改内容如下: + +``` js +const fileName = file.name +const suffix = '自定义文件后缀' +const putExtra = { + fname: fileName, + params: {} +} +const uid = +new Date() + uuid(16, 8) + suffix +// 使用七牛云上传api, 前提是提前在前端拿到对应的ticket, 可以通过请求的方式获取 +const observe = qiniu.upload(file, uid, this.state.qnToken.ticket, putExtra, {}) +observe.subscribe(() => {}, null, (res) => { + // 拼接路径 + const url = `${this.state.qnToken.domain}/${res.key}`; + // 存库 + const fileList = [{ uid, name: fileName, status: 'done', url }]; + this.setState({ + curImgUrl: url, + fileList + }) + this.props.onChange && this.props.onChange(fileList) +}) +``` + +其他oss服务类似, 如果不清楚如何配置, 可以在[H5-Dooring官网](http://h5.dooring.cn/)中找到我们. + diff --git a/package.json b/package.json index 7390e74..c9d475d 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "author": { "name": "徐小夕", "email": "xujiang156@qq.com", - "url": "http://io.nainor.com/h5_visible" + "url": "http://h5.dooring.cn/h5_visible" }, "keywords": [ "h5 editor", diff --git a/src/pages/document.ejs b/src/pages/document.ejs index 2473b41..ef5db85 100644 --- a/src/pages/document.ejs +++ b/src/pages/document.ejs @@ -8,6 +8,9 @@ + + +