基于webpack前后端分离的部署总结

随着互联网应用的越来越复杂,在团队中,开发一个Web项目早已脱离以前那种使用模板渲染的开发方案。为了提高开发效率,团队更应该使用前后端分离的技术,前端负责展示和交互逻辑,后端负责业务和数据接口。
之前的博客文章中也有一篇Koa2 + React + Eslint + Webpack热加载部署方案, 这篇博客这是基础部署方案。
这里也基于webpack的前后端分离部署做一个总结。

为什么要选择Koa2作为中间层

使用koa2编写web应用,通过组合不同的异步中间件,可以免除重复繁琐的回调函数嵌套,并极大地提升错误处理的效率。koa2不在内核方法中绑定任何中间件,它仅仅提供了一个轻量优雅的函数库,使得编写 Web 应用变得得心应手。
特别是Koa2中典型的洋葱异步中间件模型,简直就像是为前后端分离诞生的轻量级框架

部署前后端分离需要解决的问题

部署前后端分离方案不一定就要使用Koa2作为中间层转发,同样使用Express框架作为中间层。
不管你使用哪一种框架作为中间层来作为部署方案,都需要面临解决的问题是:

  1. 前端开发本地开发环境下该如何突破域的限制和服务端接口进行通信?
  2. 一条命令,能否同时完成webpack和node sever两个进程的启动?
  3. 开发环境下的前端资源路径应该如何配置?
  4. mock数据应该怎么进行模拟?
  5. 打包构建后的文件能否直接预览效果?

为了解决上面的问题,我们一步步去打造这样的前后端分离方案

开始部署前后端分离方案

借助Koa2的Proxy的实现跨域转发

前后端分离开发中,本地前端开发调用接口就会出现跨域的问题,一般有几种方案:

  1. 直接启动服务端项目,然后也启动前端项目,服务端的项目资源url指向远程前端服务的静态资源地址。这样是很不方便,服务端自己要启动,前端自己也要启动,就需要有两套环境,还需要使用nginx进行资源地址的代理转发,很不方便
  2. 在服务端的返回接口中添加“Access-Control-Allow-Origin”配置,设置同源策略实现跨域。但是不是所有的浏览器都支持这个配置同源策略方法。
  3. 前端项目中使用Node.js搭建http服务器,判断访问接口URL时进行转发。采用服务对服务的模式,也能够解决跨域的问题。

这里开始我们使用第3种解决跨域的方案,借用Koa2的Proxy实现跨域转发.
新建一个Koa-Demo项目,进入该项目,执行如下命令.

nvm use 7
npm install koa --save

新建一个server文件夹作为本地koa2 http服务器项目,用来存放本地服务器的各种逻辑。
在server文件夹中新建一个koa2服务器入口文件main.js
main.js中的代码如下:

const Koa = require('koa');
const proxy = require('koa-proxy');
const app = new Koa();
app.use(async (ctx, next) => {
console.log(ctx.path);
})
// 代理转发
app.use(proxy({
host: 'http://nekomiao.me',
jar: true //携带cookie,
}));
const port = 5000
app.listen(port)
console.log(`node service listening on port ${port}...`)

未完待续!!!