最簡單的先後端分離部署（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文件夾便可。

這是最懶的實現方式，若是你願意寫幾句腳本的話，可讓整個流程變得更加自動化，在這裏就不作探討了。