最简单的先后端分离部署（Koa2）

先后端分离开发应该已是不少公司的标配了，然而，在前端工程化的体系下，开发环境代码和生产环境代码每每是平级的，再也不是整个文件夹往服务器上一扔就了事，这让每次的部署过程至关繁琐。

以下是常见的项目目录：

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
    ├── package.json
    ├── src/     // 开发环境代码
    ├── node_modules/
    └── static/

随后，咱们在终端打开web目录，执行这样的语句：

npm init -y
npm i koa koa-static http-proxy-middleware -S

第一个koa是基于NodeJS的服务器框架，koa-static是基于Koa的插件，咱们须要用它创建静态资源服务器，最后一个http-proxy-middleware是用于作代理的插件。有了这三个东西，咱们就能够搭建出最简单的前端服务器了。

第二步：配置

时候web文件夹下会多出一个package.json和一个node_modules，咱们不用管这两个，而是在web/下创建一个js文件，好比叫server.js吧！

// server.js

const Koa = require('koa')
const path = require('path')
const proxy = require('http-proxy-middleware')
const static = require('koa-static')
const fs = require('fs')

const app = new Koa()

const url = 'http://www.foo.com'    // 后端服务器地址

app.use(async (ctx, next) => {
    if(ctx.url.startsWith('/api')) {    // 以api开头的异步请求接口都会被转发
        ctx.respond = false
        return proxy({
            target: url, // 服务器地址
            changeOrigin: true,
            secure: false,
            pathRewrite: {
                '^/api' : '/webapp/api'
            }
            /* ^^^
            上面这个pathRewrite字段不是必须的，
            你的开发环境和生产环境接口路径不一致的话，才须要加这个。
            */
        })(ctx.req, ctx.res, next)
    }
    // ...这里省略N个接口
    return next()
})

// 指定静态资源文件夹
app.use(static(path.join(__dirname, './app/dist')))

// 指定首页
app.use(async (ctx) => {
    ctx.body = fs.readFile('./app/dist/index.html')
})

// 监听
app.listen(3000, () => {
    console.log('Listening 3000...')
});

这时候项目的层级关系就成了这样：

web
├── server.js
├── node_modules/
├── package.json
└── app    // 这是完整的前端工程
    ├── README.md
    ├── build/
    ├── dist/    // 生产环境代码
    ├── config/
    ├── index.html
    ├── package.json
    ├── src/     // 开发环境代码
    ├── node_modules/
    └── static/

第三步：运行

如今能够在服务器上跑了，运行命令：

node server.js

运行起来后，直接关掉终端便可，切不可Ctrl + C退出，不然服务又会停掉。以为这种方式太粗暴的话，也有其余办法能够运行得更优雅一些，因为本文只阐述最简单的实现方式，所以再也不赘述。

能够在后端服务器上随便找个目录搭建前端服务器，代理url写成http://localhost:8000之类的，也能够另外找个服务器，但要记得不要将app/下的node_modules/一并扔上服务器，前端服务器上只须要如下几样东西就够了。

web
├── server.js
├── node_modules/
├── package.json
└── app    
    └── dist/

此后，只要接口没有变更，几乎不须要再改server.js文件，之后每次部署只须要在本地构建好，一个scp命令扔上去替换app/dist文件夹便可。

这是最懒的实现方式，若是你愿意写几句脚本的话，可让整个流程变得更加自动化，在这里就不作探讨了。