前后端分离开发应该已经是很多公司的标配了。但是，在前端工程体系下，开发环境代码和生产环境代码往往处于同一层级。不再是直接把整个文件夹丢在服务器上，每次部署过程都相当繁琐。以下是常用的工程目录：Project└──javaSrc└──app└──src└──main└──web//这是我们的前端世界├──src//开发环境└──dist//如果生产环境能够实现分离部署，整个项目的层级关系可以变成这样：Project└──javaSrc└──web前后端级别，同时，少敲几次cd命令可以减少键盘丢失。当然，目录层次和单独部署没有必然关系，组合在一起也无法实现单独部署。但是，尽量把层级关系分清楚，这样无论做什么都能少一些顾忌。由于前端工程基于NodeJS，所以选择NodeJs进行前后端分离部署是合理的。事实上，如果你只需要实现静态资源和代理，使用nginx是最好的选择。使用NodeJS是为了以后在服务端进一步实现自动化构建或者服务端渲染。第一步：安装环境在前端项目的外层新建一个文件夹，比如命名为web，然后在里面构建我们的前端项目。web└──app//这是完整的前端工程├──README.md├──build/├──dist///生产环境代码├──config/├──index.html├──包裹。json├──src///开发环境代码├──node_modules/└──static/然后，我们在终端打开web目录，执行这样一条语句：npminit-ynpmikoakoa-statichttp-proxy-middleware-S第一个koa是一个基于NodeJS的服务器框架，koa-static是一个基于Koa的插件，我们需要用它来搭建一个静态资源服务器，最后一个http-proxy-middleware是一个插件-用于代理。有了这三样东西，我们就可以搭建最简单的前端服务器了。第二步：在配置的时候，web文件夹下会有一个package.json和一个node_modules。我们不管这两个，而是在web/下创建一个js文件，比如server.js！//server.jsconstKoa=require('koa')constpath=require('path')constproxy=require('http-proxy-middleware')conststatic=require('koa-static')constfs=require('fs')constapp=newKoa()consturl='http://www.foo.com'//后端服务器地址app.use(async(ctx,next)=>{if(ctx.url.startsWith('/api')){//以api开头的异步请求接口将被转发ctx.respond=falsereturnproxy({target:url,//服务器地址changeOrigin:true,secure:false,pathRewrite:{'^/api':'/webapp/api'}/*^^^上面的pathRewrite字段不是必须的，只有当你的开发环境和生产环境的接口路径不一致的时候才需要加上这个。*/})(ctx.req,ctx.res,next)}//...这里省略N个接口returnnext()})//指定静态资源文件夹app.use(static(path.join(__dirname,'./app/dist')))//指定首页app.use(async(ctx)=>{ctx.body=fs.readFile('./app/dist/index.html')})//Listeningapp.listen(3000,()=>{console.log('Listening3000...')});这时候项目的层级关系就变成了这样：web├──server.js├──node_modules/├──package.json└──app//这就是完整的前端项目├──README.md├──build/├──dist///生产环境代码├──config/├──index.html├──package.json├──src///开发环境代码├──node_modules/└──static/第三步：运行现在可以在服务器上运行了，运行命令：nodeserver.jsisrunning，直接关闭终端即可，不要按Ctrl+C退出，否则服务又会停止。如果你觉得这个方法太粗糙，还有其他更优雅的运行方式。由于本文只介绍最简单的实现方法，这里不再赘述。可以在后端服务器上找一个目录搭建前端服务器。代理url写成http://localhost:8000之类的，也可以找别的服务器，但是切记不要把app/下的node_modules/服务器一起扔了，前端服务器只需要下面的东西。web├──server.js├──node_modules/├──package.json└──app└──dist/之后只要界面不变，server.js几乎不用改文件，以后每次部署只需要在本地Build，抛出一个scp命令替换app/dist文件夹即可。这是最懒惰的实现。如果你愿意写几个脚本，可以让整个过程更加自动化，这里不做讨论。
