🆕 添加https支持, 添加对应api文档

This commit is contained in:
xujiang 2021-01-31 01:25:02 +08:00
parent 07e3383056
commit 3aa8705700
8 changed files with 225 additions and 1 deletions

View File

@ -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,
},
],
},
],
},
};

BIN
doc/img/common/deploy.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 94 KiB

View File

@ -0,0 +1,58 @@
<!--
* @Date: 2021-01-20 23:25:29
* @LastEditors: xuxiaoxi
* @LastEditTime: 2021-01-22 21:48:34
* @FilePath: /github-h5-Dooring/doc/zh/guide/deployDev/deploy.md
-->
**H5-Dooring**后端部分主要使用 `Nodejs` 开发, 为了满足更多定制化需求和服务的可移植性, 特意编写了API接口文档,
方便大家使用不同的后端语言实现服务接入.
## 用户相关
### 登录注册
### 权限控制
### 用户列表
### 删除用户
### 修改用户信息
## H5页面管理
### 获取H5数据
### 保存H5数据
### 修改H5数据
### 删除H5数据
## H5表单数据管理
### 保存表单数据
### 批量导入表单数据
### 删除表单数据
## 模版管理
### 获取模版库
### 保存模版
### 修改模版
### 删除模版
## 文件上传
## 数据统计
### 数据大盘接口
### 页面埋点

View File

@ -0,0 +1,27 @@
<!--
* @Date: 2021-01-20 23:25:29
* @LastEditors: xuxiaoxi
* @LastEditTime: 2021-01-22 21:48:34
* @FilePath: /github-h5-Dooring/doc/zh/guide/deployDev/deploy.md
-->
私有化部署需要获取4个核心项目包, 包括
- H5编辑器(h5_plus)
- H5基座(h5)
- Dooring管理后台(Dooring-Admin)
- 服务端项目(Server)
获取以上四个核心源码工程需要满足商业授权协议, 具体可联系[徐小夕](http://h5.dooring.cn/uploads/WechatIMG3_1758e9753e2.jpeg)
### 部署架构图
<img src="../../../img/common/deploy.png" alt="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`进行容器化部署.

View File

@ -0,0 +1,59 @@
<!--
* @Date: 2021-01-20 23:25:29
* @LastEditors: xuxiaoxi
* @LastEditTime: 2021-01-22 21:48:34
* @FilePath: /github-h5-Dooring/doc/zh/guide/deployDev/deploy.md
-->
目前**H5-Dooring**全面支持https部署, 具体方式方案如下.
### 前端工程
我们需要在前端工程中的`src/pages/document.ejs`中的`head`中添加如下代码:
``` html
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
```
目的是强制将页面中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()
```

View File

@ -0,0 +1,45 @@
<!--
* @Date: 2021-01-20 23:25:29
* @LastEditors: xuxiaoxi
* @LastEditTime: 2021-01-22 21:48:34
* @FilePath: /github-h5-Dooring/doc/zh/guide/deployDev/deploy.md
-->
**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/)中找到我们.

View File

@ -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",

View File

@ -8,6 +8,9 @@
<meta name="description" content="Dooring是一款功能强大开源免费的H5可视化页面配置解决方案致力于提供一套简单方便、专业可靠、无限可能的H5落地页最佳实践。">
<meta name="keywords" content="H5,HTML5,javascript,react,nodejs,前端开发,github,开源">
<meta name="author" content="徐小夕">
<!-- 若需要配置https, 请开启下面的meta配置 -->
<!-- <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> -->
<!-- <meta name="robots" content="noindex, nofollow"> -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="https://cdn.bootcdn.net/ajax/libs/spinkit/2.0.1/spinkit.min.css" rel="stylesheet">