关于前端:RenderServer-前端部署接口测试及文档

介绍

背景

对于前后端拆散的前端我的项目，目前罕用的前端部署形式是通过Nginx设置动态资源目录，再配置反向代理来转发API申请到后端服务，这种形式是比拟通用简略，对于前端开发同学来说只须要理解一些Nginx的常识，晓得怎么上传打包好的动态资源到正确目录。

但对于一些我的项目来说往往还须要中间层来解决一些货色，比方前端对于后端提供API接口不称心，对返回须要一些简略加工或者一些跳转逻辑解决，而后端往往违心不配合，或者咱们想在前端入口文件中动静注入一些配置项的时候，仅仅应用Nginx无奈满足需要（当然Nginx的lua脚本扩大能够帮实现，但这个能力要求过高）。

所以为了解决这个问题，并扩大更多对前端我的项目开发有用的性能，这里分享Render-Server，它是一个可用于前端我的项目部署（入口模板渲染及接口转发)、后端API文档治理及接口测试于一身的Nodejs的BFF（ Backend For Frontend）服务。配合插件应用能够实现接口数据mock，文件上传，用户会话，auth2.0认证等性能。

Github: https://github.com/rebareba/r...

性能

Render-Server 次要性能蕴含：

一键部署 npm run deploy
反对集群部署配置
是一个文件服务
是一个动态资源服务
在线可视化部署前端我的项目
配置热更新
在线Postman及接口文档
反对前端路由渲染，反对模板
接口代理及门路替换
Web平安反对 Ajax申请验证，Referer 校验
反对插件开发和在线配置可实现：前端模板参数注入、申请头注入、IP白名单、接口mock、会话、第三方登陆等等

应用

为了演示render-server的性能，大抵走一下如何装置及部署一个前端我的项目，咱们这里须要准一台测试机器外面装置好nodejs (v8.9+)和pm2。这里测试机器ip为192.168.1.9

装置

下载Release版本render-server_1.0.0.tgz，上传到测试机器的/opt/workspace目录下

$curl -LJO https://github.com/rebareba/render-server/releases/download/1.0.0/render-server_1.0.0.tgz$scp render-server_1.0.0.tgz root@192.168.1.9:/opt/workspace root@192.168.1.9's password: render-server_1.0.0.tgz

进入服务192.168.1.9 解压render-server_1.0.0.tgz 到render-server目录比进入目录执行 npm run deploy部署

$ssh root@192.168.1.9                                       root@192.168.1.9's password: [root@localhost ~]# cd /opt/workspace/[root@localhost workspace]# ll-rw-r--r--.  1 root root        649 1月  13 17:04 render-server_1.0.0.tgz[root@localhost workspace]# tar -zxf render-server_1.0.0.tgz [root@localhost workspace]# cd render-server[root@localhost render-server]# npm run deploy> render-server@1.0.0 deploy /opt/workspace/render-server> node ./bin/deploy.js配置文件列表： render-server.json动态文件列表： public  render-serverdata/render-server/data文件列表： render-server.json动态文件/data/render-server/static列表： public  render-serverpm2 启动服务部署实现[root@localhost render-server]# pm2 ls┌────────────────────────┬────┬─────────┬───────┬─────────┬─────────┬────────┬─────┬────────────┬──────┬──────────┐│ App name               │ id │ mode    │ pid   │ status  │ restart │ uptime │ cpu │ mem        │ user │ watching │├────────────────────────┼────┼─────────┼───────┼─────────┼─────────┼────────┼─────┼────────────┼──────┼──────────┤│ render-server          │ 29 │ cluster │ 15435 │ online  │ 0       │ 3s     │ 0%  │ 57.0 MB    │ root │ disabled │└────────────────────────┴────┴─────────┴───────┴─────────┴─────────┴────────┴─────┴────────────┴──────┴──────────┘ Use `pm2 show <id|name>` to get more details about an app

到这里就部署胜利了，会创立/data/render-server去寄存动态资源和相干配置。

关上浏览器拜访http://192.168.1.9:8888/render-server ，默认登陆账号是admin，明码是123456

登陆

登陆后能够看到一个默认的前端我的项目配置，这个配置是render-server以后治理平台前端配置项。

部署前端

git前端我的项目拉取

前端我的项目咱们应用React-Starter，咱们拉取代码并打包部署

$git clone https://github.com/rebareba/react-starter.git  $cd react-starter➜  react-starter git:(main) npm i  ➜  react-starter git:(main)  npm start  Project is running at http://127.0.0.1:9999/

关上浏览器本地开发页面

打包

执行npm run build 打包进去的前端代码在dist目录下

➜  react-starter git:(main) npm run build➜  react-starter git:(main) tree dist -L 3 -a                  dist├── public│   ├── antd│   │   └── 3.23.6│   └── react│       └── 16.13.1├── react-starter│   ├── 1.0.0│   │   ├── 1.css│   │   ├── 2.a65cd3857d2b1c9af769.chunk.js│   │   ├── index.5b1083b293274731c7eb.js│   │   ├── index.css│   │   ├── index.html│   │   ├── vendor.757bd9434578e97b2c84.chunk.js│   │   ├── vendor.757bd9434578e97b2c84.chunk.js.LICENSE.txt│   │   └── vendor.757bd9434578e97b2c84.chunk.js.map│   └── index.html└── react-starter_1.0.0_public.tgz

React-Start打包的指定的publicPath是react-starter/1.0.0。 react-starter/index.html是入口文件

部署

在Render-Server治理界面上咱们上传两个目录的动态文件dist/public和dist/react-starter

新建前端我的项目配置保留

{  "key": "react-starter",  "account": "admin",  "name": "前端脚手架",  "description": "形容",  "pageIndex": "/react-starter",  "viewRender": [    {      "paths": [        "/react-starter/(.*)",        "/react-starter"      ],      "hosts": [],      "plugins": [],      "defaultData": {        "partials": {}      },      "viewType": "path",      "viewPath": "react-starter/index.html",      "viewData": ""    }  ],  "apiProxy": [],  "staticPrefix": []}

能够看到这里的动态资源的目录就是咱们之前上传的目录。

到这里咱们曾经胜利通过Render-Server部署了一个前端我的项目，后续版本迭代都能够通过打包上传动态材料来部署。

总结

这个流程是最简略的部署前端动态资源，这里的拜访门路要和前端代码指定的前端对立路由前缀统一。还有其余配置项的配置性能没有介绍，不如接口代理配置。多域名雷同门路如何配置，插件如何配置。都能够在阐明下查阅。

接口测试及文档

前端和后端开发通过接口文档来进行约定，文档分享的媒介能够是：具体的word或md文件、通过语雀或者其余在线零碎文档、通过代码正文生产文档（swagger）、swagger服务集成接口测试等。

为了升高复杂性，在Render-Server中集成了接口在线测试性能，自身接口测试的配置也是接口文档的一种形式。在多人开发的状况下，测试用例可能复用也能放慢我的项目的开发。

在Render-Server中咱们配置了一个个前端的我的项目，个别一个前端我的项目对应一份后端接口文档。所以咱们在我的项目配置下减少了接口入口

配置阐明

新建测试接口

点击新建按钮，进入接口配置页面：设置相干

保留后能够进行接口测试：

保留测试用例

全局配置

二次开发

后端Render-Server

Github:https://github.com/rebareba/r...

我的项目是基于koa开发，外面曾经集成前端动态资源

➜  render-server git:(main) node app.js[2021-01-13 18:44:34:989] - [info] - [18038]: ============= env: dev =============[2021-01-13 18:44:35:000] - [info] - [18038]: Server listening on port: 8888

拜访本地的http://127.0.0.1:8888/render-server

打包 make build 能够查看makefile文件

➜  render-server git:(main) ✗ make build  Clean files...Copy files.......➜  render-server git:(main) tree out -L 2 -aout├── render-server│   ├── PLUGIN.md│   ├── README.md│   ├── api-test│   ├── app.js│   ├── bin│   ├── common│   ├── config│   ├── controller│   ├── data│   ├── middleware│   ├── node_modules│   ├── package-lock.json│   ├── package.json│   ├── plugin│   ├── pm2.json│   ├── service│   └── static└── render-server_1.0.0.tgz

前端Render-Server-Front

前端我的项目是基于TS写的，因为是之前写的还没有复合Reat-Starter的一些标准。

Github: https://github.com/rebareba/r...

➜  render-server-front git:(main) ✗ npm start    ℹ ｢wds｣: Project is running at http://localhost:3333/

开发 npm start
打包 npm run build

更多能够参考React-Starter