Node.js + Express + Springboot實現先後端分離架構

架構說明

先後端分離架構，不少團隊都是經過」代理轉發」瀏覽器發日後端的rest請求來解決跨域問題，能夠用nginx或者node.js模塊http-proxy-middleware實現代理。如下是部署架構，在此架構中你把node換成nginx依然成立。

 

Nodejs前端服務器的職責:

1. 做爲靜態文件服務器，當用戶訪問網站的時候，將index.html以及其引入的js、css、fonts以及圖片返回給用戶
2. 負責將客戶端發來的ajax請求轉發給後臺服務器

用nginx部署先後端分離較爲簡單，所在這裏介紹用nodejs做爲先後端分離中間層的部署demo。

1、搭建node服務器

首先假定你已經安裝了 Node.js，接下來爲你的應用建立一個目錄，而後進入此目錄並將其做爲當前工做目錄。

$ mkdir express_sample
$ cd express_sample

經過 npm init 命令爲你的應用建立一個 package.json 文件。

$ npm init

此命令將要求你輸入幾個參數，例如此應用的名稱和版本。 你能夠直接按「回車」鍵接受默認設置便可，下面這個除外：

entry point: (index.js)

鍵入 app.js 或者你所但願的名稱，這是當前應用的入口文件。若是你但願採用默認的 index.js 文件名，只需按「回車」鍵便可。

接下來安裝 Express 並將其保存到依賴列表中：

$ npm install express --save

由於會用到http-proxy-middleware，也把它依賴到列表：

$ npm install http-proxy-middleware --save

此時express_sample的目錄包含：node_modules、package.json兩部分

2、部署前端代碼

建立app.js，內容以下

var express = require('express');
var proxy = require('http-proxy-middleware');//引入代理模塊
var app = express();

app.use(express.static('public'));

/**
 *如下兩步對全部異步請求均代理到http://10.90.3.119:8080,好比瀏覽器發的請求地址爲：
 * http://10.90.3.118:3000/orgs/100,則代理地址爲http:10.90.3.119:8000/orgs/100（注：10.90.3.118爲node部署機器ip）
 */
var apiProxy = proxy('/', { target: 'http://10.90.3.119:8080',changeOrigin: true });http://10.90.3.119:8080
app.use('/', apiProxy);

app.get('/index.htm', function(req,res){
     res.sendFile(__dirname+'/src/index.html');
});

app.listen(3000, () => {   
  console.log('Listening on: http://localhost:3000');
});

在express_sample下建立public文件夾，存放靜態資源（html、cs、js等）。我這裏在public存放用vue開發好、通過打包後的文件：dist、index.html。

啓動

$ node app.js

訪問：http://10.90.3.118:3000，咱們的index.htm、dist文件夾中的靜態資源已經加載成功。

此時express_sample目錄包含：node_modules、package.json、app.js、public。

2、部署後端應用

我後端採用springboot啓微服務，向前端提供rest api。springboot部署微服務demo實在太多，你能夠很容易在http://projects.spring.io/spring-boot/上面找到例子，因此，就不說了。