部署前后端分离式nginx配置的完整步骤

前言

老生常谈了，这里谈谈我的理解的前后端分离，简单的分离无非是将原来mvc的view层剥离出来，独立一个成为Servlet服务，Servlet之间依靠http连通。这里的view Servlet容器可以是任意一种服务端服务，Tomcat、Apache、Nginx、IIS，都可以。这里以常用的Nginx为例子做简单的介绍。

需求分析

先来一波需求分析。

提示：这里做好写conf.d/*.conf，这样配置可以分离处理。

公共配置

server{ listen 80; # 配置端口 server_name _; # 配置域名 charset utf-8; # 编码 access_log /xxx/log/nginx_access.log main; # 成功日志 error_log /xxx/log/nginx_error.log error; # 错误日志 index index.html; # 查找文件顺序 set $root /xxx/nginx/; # 变量设置，设置公共路径  # 其余location}

请手动去/xxx/log/nginx_access.log和/xxx/log/nginx_error.log下新建对应文件。可能会执行nginx reload第一次执行时会报错。

set的$root路径为绝对路径，access_log和error_log同样都是绝对路径。

单项目配置

目录结构

nginx|----- index.html|----- user.html

location配置

location / {	root $root;}

好了最简单的基于根路径配置就这样好了，这里无非是通过location配置一条路径，然后指向到$root文件夹下的index.html这个文件下。

多项目配置

目录结构

nginx|----- a    |----- index.html|----- b    |----- index.html

多条location配置

location ^~ /a {  alias $root/a;}location ^~ /b {  alias $root/b;}location / {  root $root;}

跟单项目唯一的不同点在于，root和alias的区别，root指的是文件的绝对匹配路径，而alias则是相对匹配。root可以再http、server、location中配置，而alias只能在location中配置。这我还加入的正则^~，当匹配/a或者/b时，不管location的路径是什么，资源的真实路径一定是都是 alias 指定的路径。这样的我就能让/a、/b拥有匹配的到路径之后，拥有跳转固定路径，这在spa式的前端项目非常有用的，因为其实核心文件只有一个index.html文件（资源文件另说）。这样我永远跳转index.html就能保证浏览器手动刷新的时候，不会根据root路径去查找服务器其他路径的资源。然后设置spa的根路径和 /b必须是匹配的。

为什么会有这种需求？前端是轻便的，我们为了达到节约服务器与聚合同类型业务的时候，就会使用到这种机制。就像希望admin.xxxx.com/a => 运营管理台、admin.xxxx.com/b => erp管理台一样。所有admin这个域名下我们只要切出子路径即可。简单轻便。