前后端分离项目 负载均衡

var app = express();
app.use(express.static(“./public”))//这段程序的作用是将我们的前端项目设置成静态资源这样我们在浏览器中就可以直接通过http://127.0.0.1:xxxx/xxx(所在页面的目录层级)访问我们的页面,做到边开发边调试.

app.use("/login",proxyMiddleWare(proxyOption))//这里要注意"/login" 是匹配的路由,它会将匹配的路由进行转发，没匹配到的就不会转发。
app.listen(8080);

5，运server.js 在server.js所在的目录打开dos窗口 run server.js.   
 就这么简单，一个简单的前后端分离的可以跨域的前端开发环境就搭建起来了我们只需要将我们的项目建在public文件夹中就行了。然后proxyPath配置成我们要访问的真实后端服务地址就行了。   
 现在流行的前端框架vue其实他的webpack配置文件/build/dev-server.js已经实现了请求代理：

require(‘./check-versions’)()
var config = require(‘…/config’)
 if (!process.env.NODE_ENV) {
 process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
 }var opn = require(‘opn’)
 var path = require(‘path’)
 var express = require(‘express’)
 var webpack = require(‘webpack’)
 var proxyMiddleware = require(‘http-proxy-middleware’)
 var webpackConfig = require(‘./webpack.dev.conf’)// default port where dev server listens for incoming traffic
 var port = process.env.PORT || config.dev.port
 // automatically open browser, if not set will be false
 var autoOpenBrowser = !!config.dev.autoOpenBrowser
 // Define HTTP proxies to your custom API backend
 // https:///chimurai/http-proxy-middleware
 var proxyTable = config.dev.proxyTablevar app = express()
 var compiler = webpack(webpackConfig)var devMiddleware = require(‘webpack-dev-middleware’)(compiler, {
 publicPath: webpackConfig.output.publicPath,
 quiet: true
 })var hotMiddleware = require(‘webpack-hot-middleware’)(compiler, {
 log: () => {}
 })
 // force page reload when html-webpack-plugin template changes
 compiler.plugin(‘compilation’, function (compilation) {
 compilation.plugin(‘html-webpack-plugin-after-emit’, function (data, cb) {
 hotMiddleware.publish({ action: ‘reload’ })
 cb()
 })
 })// proxy api requests
 Object.keys(proxyTable).forEach(function (context) {
 var options = proxyTable[context]
 if (typeof options === ‘string’) {
 options = { target: options }
 }
 app.use(proxyMiddleware(options.filter || context, options)) //代理请求
 })// handle fallback for HTML5 history API
 app.use(require(‘connect-history-api-fallback’)())// serve webpack bundle output
 app.use(devMiddleware)// enable hot-reload and state-preserving
 // compilation error display
 app.use(hotMiddleware)// serve pure static assets
 var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
 app.use(staticPath, express.static(‘./static’))//这是静态资源var uri = ‘http://localhost:’ + port
devMiddleware.waitUntilValid(function () {
 console.log('> Listening at ’ + uri + ‘\n’)
 })module.exports = app.listen(port, function (err) {
 if (err) {
 console.log(err)
 return
 }// when env is testing, don’t need open it
 if (autoOpenBrowser && process.env.NODE_ENV !== ‘testing’) {
 opn(uri)
 }
 })