共计 4983 个字符,预计需要花费 13 分钟才能阅读完成。
介绍
背景
对于前后端拆散的前端我的项目,目前罕用的前端部署形式是通过 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