架构说明

前后端分离架构，很多团队都是通过”代理转发”浏览器发往后端的rest请求来解决跨域问题，可以用nginx或者node.js模块http-proxy-middleware实现代理。以下是部署架构，在此架构中你把node换成nginx依然成立。

Nodejs前端服务器的职责:

1. 作为静态文件服务器，当用户访问网站的时候，将index.html以及其引入的js、css、fonts以及图片返回给用户
2. 负责将客户端发来的ajax请求转发给后台服务器

用nginx部署前后端分离较为简单，所在这里介绍用nodejs作为前后端分离中间层的部署demo。

一、搭建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两部分

二、部署前端代码

创建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。

二、部署后端应用

我后端采用springboot启微服务，向前端提供rest api。springboot部署微服务demo实在太多，你可以很容易在http://projects.spring.io/spring-boot/上面找到例子，所以，就不说了。