乐趣区

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

jiezi

介绍

背景

​ 对于前后端拆散的前端我的项目，目前罕用的前端部署形式是通过 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-server
data/render-server/data 文件列表：render-server.json
动态文件 /data/render-server/static 列表：public  render-server
pm2 启动服务
部署实现
[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 -a
out
├── 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

退出移动版