介绍背景针对前后端分离的前端项目，目前常见的前端部署方式是通过Nginx设置静态资源目录，以及然后配置反向代理将API请求转发给后端服务。这种方法比较通用和简单。对于前端开发的同学来说，只需要了解一些Nginx的知识，知道如何将打包后的静态资源上传到正确的目录即可。但是对于一些项目来说，往往需要中间层来处理一些事情。比如前端对后端提供的API接口不满意，需要对返回进行一些简单的处理或者一些跳转逻辑处理，而后端往往不愿意配合，或者我们当想要在前端入口文件中动态注入一些配置项，仅仅使用Nginx是无法满足需求的（当然Nginx的lua脚本扩展可以帮助实现，但是这个能力要求太高了）。所以为了解决这个问题，为前端项目开发扩展更多有用的功能，这里分享Render-Server，可以用于前端项目部署（入口模板渲染和接口转发），后端API文档管理和接口测试多合一NodejsBFF（后端前端）服务。通过插件的使用，可以实现接口数据mock、文件上传、用户session、auth2.0认证等功能。Github:https://github.com/rebareba/r...功能Render-Server主要功能包括：一键部署npmrundeploy支持集群部署配置是文件服务是静态资源服务在线可视化部署前端-结束项目配置热更新在线Postman和接口文档支持前端路由渲染，支持模板接口代理和路径替换Web安全支持Ajax请求验证，Referer验证支持插件开发和在线配置可以实现：前端模板参数注入、请求头注入、IP白名单、Interfacemock、session、第三方登录等。为了演示render-server的功能，我们来看看如何安装部署一个前端项目。我们需要在测试机上安装nodejs（v8.9+）和pm2。这里测试机ip为192.168.1.9，安装下载Release版本render-server_1.0.0.tgz，上传到测试机/opt/workspace目录下$curl-LJOhttps://github.com/rebareba/render-server/releases/download/1.0.0/render-server_1.0.0.tgz$scprender-server_1.0.0.tgzroot@192.168.1.9:/opt/workspaceroot@192.168.1.9的密码：render-server_1.0.0.tgz进入Service192.168.1.9解压render-server_1.0.0.tgz到render-server目录，然后进入该目录执行npmrundeploydeployment$sshroot@192.168.1.9root@192.168.1.9的密码:[root@localhost~]#cd/opt/workspace/[root@localhostworkspace]#ll-rw-r--r--.1rootroot649January1317:04render-server_1.0.0.tgz[root@localhostworkspace]#tar-zxfrender-server_1.0.0.tgz[root@localhostworkspace]#cdrender-server[root@localhostrender-server]#npmrundeploy>render-server@1.0.0deploy/opt/workspace/render-server>node./bin/deploy.js配置文件列表：render-server.json静态文件列表：publicrender-serverdata/render-server/data文件列表：render-server.jsonstaticfile/data/render-server/staticlist:publicrender-serverpm2startservicedeploymentcompleted[root@localhostrender-server]#pm2ls┌──────────────────────────────┬────────────────────┬────────────────────┬──────────────────┬──────┬──────────────┬────────┬──────────────────────────────────────────────┐│应用名称│id│mode│pid│status│重启│uptime│cpu│mem│user│watching└├────────────────────────────────────────┼──────┼──────────────────┼────────────────────────────┼──────┼────────┼────────┼──────────┼────────┼──────────┤│渲染服务器│29│集群│15435│在线│0│3s│0%│57.0MB│root│禁用└└──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┴────────┴──────────┴────────────┴──────────┴──────────────────────────────────────────────────────────────────────────────────────────────┴──────┴────────────────────────┘使用`pm2show`获取应用程序的更多详细信息一旦到这里，部署就成功了，并且/data会创建/render-server存放静态资源及相关配置打开浏览器访问http://192.168.1.9:8888/render-server，默认登录账号为admin，密码为123456登录后，你可以看到一个默认的前端项目配置，这个配置是render-server当前管理平台的前端配置项。部署前端git前端项目拉取前端项目我们使用React-Starter，我们拉取代码打包部署$gitclonehttps://github.com/rebareba/react-starter.git$cdreact-starter?react-startergit:(main)npmi?react-startergit:(main)npmstart项目运行在http://127.0.0.1:9999/打开浏览器本地开发页面打包执行npmrunbuild打包后的前端代码在dist目录下Next?react-startergit:(main)npmrunbuild?react-startergit:(main)treedist-L3-adist├──public│├──antd││└──3.23.6│└──反应│└──16.13.1├──react-starter│├──1.0.0│├──1.css│├──2。.757bd9434578e97b2c84.chunk.js.LICENSE.txt││└──vendor.757bd9434578e97b2c84.chunk.js.map│└──index.html└──react-starter_1.0.0_public.tgz指定的publicPath被React-Start打包是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":"路径","viewPath":"react-starter/index.html","viewData":""}],"apiProxy":[],"staticPrefix":[]}可以看到这里静态资源的目录就是我们之前上传的目录。至此我们已经通过Render-Server成功部署了一个前端项目，后续的版本迭代可以通过打包上传静态数据的方式进行部署。综上所述，这个过程是最简单的前端静态资源部署方式。这里的访问路径必须和前端代码指定的前端统一路由前缀一致。还有其他配置项的配置功能没有介绍，不如接口代理配置。如何为多个域名配置相同的路径以及如何配置插件。可以在说明下找到。通过接口文档约定接口测试和文档前后端开发，文档共享的介质可以是：具体的word或者md文件，通过语雀或者其他在线系统文档，通过代码注释制作文档（swagger），swaggerservice集成了接口测试等，为了降低复杂度，在Render-Server中集成了接口在线测试功能，接口测试本身的配置也是接口文档化的一种方式。在多人开发的情况下，测试用例可以复用，也可以加快项目开发速度。在Render-Server中，我们一个一个配置前端项目。一般一个前端项目对应一个后端接口文档。所以我们在项目配置下添加接口入口配置说明新建测试接口点击新建按钮进入接口配置页面：设置好相关设置后，即可进行接口测试：保存测试用例全局配置二次开发后端Render-ServerGithub:https://github.com/rebareba/r...项目基于koa开发，集成了前端静态资源?render-servergit:(main)nodeapp.js[2021-01-1318:44:34:989]-[信息]-[18038]:=============env:dev==============[2021-01-1318:44:35:000]-[info]-[18038]:服务器监听端口：8888访问本地http://127.0.0.1:8888/render-server打包makebuild和查看makefile?render-servergit:(main)?makebuildCleanfiles...Copyfiles.......?render-servergit:(main)treeout-L2-aout├──渲染服务器│├──PLUGIN.md│├──README.md│├──api-test│├──app.js│├──bin│├──common│├──配置│├──控制器│├──数据│├──中间件│├──node_modules│├──package-lock.json│├──package.json│├──插件│├──pm2.json│├──服务│└──static└──render-server_1.0.0.tgzfrontendRender-Server-Front前端项目是基于TS写的，因为之前写的，没有结合Reat-Starter的一些规范。Github:https://github.com/rebareba/r...?render-server-frontgit:(main)?npmstart?「wds」:项目运行在http://localhost:3333/developmentnpmstart打包npmrunbuild更多信息请参考React-Starter
