开发环境和生产环境下的前后端分离

前后端分离不仅是开发过程的分离，而且也是部署上的分离。前端项目部署到web服务器，不能部署到应用服务器(tomcat,jetty)。

下面以一个实际项目为例说明开发环境和生产环境下如何实现前后端分离。

源码：

• https://github.com/ijunjie/myblogui.git
• https://github.com/ijunjie/myblogserver.git

myblog由部分构成：

• 纯前端项目myblogui，采用vue编写
• 纯后端项目myblogserver，采用spring boot，只提供rest api
• 数据库mysql

开发环境下

使用vue脚手架配置代理：

index.js

dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api/**': {
        target: 'http://172.27.10.128:8081',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/'
        }
      }
    }
    //...
}

以/api开头的全部转发到http://172.27.10.128:8081. 后端提供的API实际不是/api开头的，js代码也不会每个请求都写/api. 这个/api使用axios统一添加的。

后端无法解析/api，因此所有/api统一重写为/：

 pathRewrite: {
    '^/api': '/'
  }

axiois设置base即可

import axios from 'axios'

let base = 'api';
export const postRequest = (url, params) => {
  return axios({
    method: 'post',
    url: `${base}${url}`,
    data: params,
    transformRequest: [function (data) {
      // Do whatever you want to transform the data
      let ret = ''
      for (let it in data) {
        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
      }
      return ret
    }],
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  });
}

或者

import Axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, Axios)
Axios.defaults.baseURL = 'api'

生产环境下

在开发环境下，通过pathRewrite去掉了/api前缀，在生产环境下也是一样的道理，通过nginx配置实现。

在nginx配置文件server中加入：

location /api {
        rewrite ^.+api/?(.*)$ /$1 break;
        include uwsgi_params;
        proxy_pass http://172.27.10.128:8081/;
    }

其中rewrite表示将/api全部重写为/；
proxy_pass表示转发到的后端地址。如果使用k8s部署，可以直接写Service名，比如proxy_pass http://myblogserver:8080/; myblogserver是Service名称。