前言当前大趋势下，前后端解耦已经成为行业趋势。前后端解耦后，前端项目和后端项目可以自行发布，互不影响。这大大提高了工作效率，也为彼此节省了大量的等待时间。每个公司可能有不同的前端项目发布系统。本文仅介绍袋鼠云前端发布系统，希望对大家有所启发。项目地址：https://github.com/ruichengpi...实现原理首先说一下整个前端端的运行流程。一般浏览器请求大致分为两行：资源请求和接口请求。下面用这两行说说整个过程：1.资源请求：这里我们的Nginx服务器和我们前端打包好的资源是放在同一台机器上的。Nginx设置了我们静态资源的目录，浏览器的资源请求都会从这个静态资源目录中获取，我们本地推送到远程机器的前端资源也在这个目录下。2、接口请求：所有来自浏览器的接口请求都会被我们远程机器上的Nginx拦截，然后根据路径规则匹配代理对应的接口服务。准备安装nginx这里以Centos为例：yuminstallnginx这里要注意一点，尽量确保nginx全局命令可用。许多公司都有非全局的nginx命令。如何使用相应的roo。在config.js中做一些设置，后面会讲到。设置相应目录这里我们需要设置三个目录：前端资源存放目录例如：/root/app前端项目nginx配置存放目录例如：/root/nginx前端资源备份目录例如：/root/backupConfigurenginxfiles设置nginx配置文件，一般为/etc/nginx/nginx.conf。当然根据各个公司的不同情况，找到对应的配置文件...http{include/root/nginx/*.conf;}...包括/root/nginx/*.conf；这句话的意思是/root/nginx所有以.conf结尾的文件都会被加载，而/root/nginx就是我们设置的nginx配置文件存放的目录。启动Nginxnginx-c/etc/nginx/nginx.conf//启动nginx，确认之前的配置是否正确。以上命令仅供参考，具体视情况而定。我们访问资源的时候，有些人会遇到nginx抛出403Forbidden。这是因为我们nginx配置文件上面的用户设置的用户权限不够。可以改成root用户解决。支持的函数以下四个函数都支持-c或--config来指定配置文件。如果不指定配置文件，默认使用roo.config.js作为项目根目录下的配置文件。roobackup这个命令用来备份我们的前端资源包，有利于我们做版本管理。当线上出现重大问题时，可以及时接管，进行版本回滚。执行roo备份命令，如果设置了NODE_ENV=production，会在远程机器的backupDirectory中生成一个“production_YYYYMMDD”的前端资源包，如果不设置，则会生成一个“test_YYYYMMDD”的前端资源包，其中YYYYMMDD为年份如果同一天多次上传，只会生成一个包，后续上传会覆盖之前上传的前端资源。以下为必填配置项：roo.config.jsmodule.exports={local:{resourceDirectory:'<本地前端资源所在目录，该目录下的所有内容都会被上传>'},origin:{host:'<远程机器IP>',username:'<远程机器用户名>',password:'<远程机器密码>',backupDirectory:'<远程机器备份前端资源目录>'}}roonginx该命令用于生成对应项目的nginx配置文件，更新在线nginx配置文件。执行完roonginx文件后，会在roo.config.js指定的local.nginxConfigFilePath处生成对应的nginx配置文件，并更新远程机器上roo.config.js指定的origin.nginxConfigFilePath的nginx配置文件，然后执行nginx的reload操作。以下为必填配置项：roo.config.jsmodule.exports={local:{nginxConfigTemplate:''nginxConfigFilePath:''},origin:{host:'',username:'',password:'',nginxConfigFilePath:'<远程机器上项目的nginx配置文件路径，这个文件将beWillbenginxmainfileinclude>'},//nginxConfig中的参数将用于生成本项目的nginx配置文件nginxConfig:{port:'',serverName:'',publicPath:'',//locations会为nginx中的locationlocations:[{path:'',//对应location中的配置项configs:[{key:'proxy_redirect',value:'off'},{key:'proxy_set_header',value:'Host$host'},{key:'proxy_pass',value:'代理路径'},]}]}}默认nginx配置文件模板server{listen{{port}};服务器名称{{服务器名称}}；位置/{root{{publicPath}};try_files$uri/index.html;位置~.*\.(ico|js|css|gif|jpg|jpeg|png|bmp|swf)${}}{{#eachlocations}}location{{this.path}}{{{#eachthis.configs}}{{this.key}}{{this.value}};{{/each}}}{{/each}}}rooport该命令用于查看远程机器的端口占用情况-por--port|会检测端口是否被占用，如果被占用，会显示相关使用状态rooport//会拉取远程机器上所有被占用的端口rooport-p8000//检查8000端口是否被占用，如果被占用，会显示使用状态，下面必须配置Item:roo.config.jsmodule.exports={origin:{host:'<远程机器IP>',username:'<远程机器用户名>',password:'<远程机器密码>'}}roopublishthiscommand将roo.config.js文件中local.resourceDirectory指定的前端资源目录下的资源上传到origin.resourceDirectory目录下。origin.resourceDirectory指定的目录也会对应nginxConfig.publicPath指定的目录。以下为必填配置项：roo.config.jsmodule.exports={local:{resourceDirectory:'<本地前端资源所在目录，将上传该目录下的所有内容>'}origin:{host:'<远程机器IP>',username:'<远程机器用户名>',password:'<远程机器密码>',resourceDirectory:'<远程机器前端资源所在的目录，上传front-endresourceswillbestoredhere>',nginxConfigFilePath:'<远程机器上项目的nginx配置文件的路径，这个文件会被nginx主文件包含>'}}roo.config.js配置参数descriptionmodule.exports={local:{resourceDirectory:'<本地前端资源所在目录，将上传该目录下所有内容>',nginxConfigFilePath:''},origin:{host:'<远端机IP>',username:'<远端机用户名>',password:'<远端机密码>',resourceDirectory:'<远端机有前端资源目录，上传的前端-endresource会存放在这里>',backupDirectory:'<远程机器备份的前端资源目录>'nginxConfigFilePath:'<这个项目的nginx配置文件在远程机器上的路径，这个文件会被nginx包含mainfile>'},//nginxConfig中的参数将用于生成本项目的nginx配置文件nginxConfig:{port:'',serverName:'<服务名>',publicPath:'',//locations会为nginx中locationlocations:[{path:'',//对应location中的配置项configs:[{key:'proxy_redirect',value:'off'},{key:'proxy_set_header',value:'Host$host'},{key:'proxy_pass',value:'proxypath'},]}]}}Prospectroocreate是目前的项目构建工具KangarooCloud采用了Yeoman搭建系统，可以满足KangarooCloud对项目搭建的需求，但是有一个小不足，就是每次更新项目模板都需要重新发布Yeoman脚手架，并且灵活性比较差。后面打算把项目生成工作交给dtux-kangaroo，项目模板全部放在github上。每次生成一个项目，都会重新从github上拉取。模板贡献者只需关注自己的github仓库即可。只是将更新合并到master分支，后续的项目生成都会提到更新。当然在现有的Yeoman脚手架改造中也可以实现同样的功能，但是本着工具精简的原则，将现有的Yeoman脚手架搬迁到dtux-kangaroo进行改造。Roomock目前采用袋鼠云前后端分离的方式，但开发仍然依赖后端，接口数据mock并不完善。未来计划加入roomock解决datamock问题。最初的想法是使用后端swagger来实现接口数据mock。一个基于dtux-kangaroo的前端资源发布平台dtux-kangaroo验证了这个发布系统的可行性，同时也解决了如何与远程机器交互的问题。为前端资源发布平台的建设打下良好的基础。后期计划搭建这个前端资源发布平台，提高前端资源发布效率，减少对运维的依赖。
