部署前后端分离式nginx配置的完整步骤
前言
老生常谈了，这里谈谈我的理解的前后端分离，简单的分离无非是将原来mvc的view层剥离出来，独立一个成为Servlet服务，Servlet之间依靠http连通。这里的viewServlet容器可以是任意一种服务端服务，Tomcat、Apache、Nginx、IIS，都可以。这里以常用的Nginx为例子做简单的介绍。
需求分析
先来一波需求分析。
- 单项目
- 单项目指的是一台服务器部署一个前端服务，使www.xxx.com=>index.html的单一指向。
- 多项目
- 多项目指的是一台服务器部署多个前端服务，使www.xxx.com/a=>a.html,www.xxx.com/b=>b.html等多指向。
- 请求代理。
- cookiedomain重写。
- cookiepath重写。
提示：这里做好写conf.d/*.conf，这样配置可以分离处理。
公共配置
server{
listen80;#配置端口
server_name_;#配置域名
charsetutf-8;#编码
access_log/xxx/log/nginx_access.logmain;#成功日志
error_log/xxx/log/nginx_error.logerror;#错误日志
indexindex.html;#查找文件顺序
set$root/xxx/nginx/;#变量设置，设置公共路径
#其余location
}
请手动去/xxx/log/nginx_access.log和/xxx/log/nginx_error.log下新建对应文件。可能会执行nginxreload第一次执行时会报错。
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这个域名下我们只要切出子路径即可。简单轻便。
请求转发
location^~/api{
proxy_passhttp://api.xxx.com/;
}
这里就特别简单了，我通过正则匹配/api这个请求，通过proxy_pass属性，将请求定向到http://api.xxx.com。即可
修改cookiedomain
有时候处于安全考虑，我们会设置一定的cookie的domain属性这是对于nginx转发来说就很不友好了。当然也是有解决手段的，也很简单。
location{
proxy_cookie_domain<本域的domain><想修改的domain>;
}
修改cookiepath
当我们转发回api接口时，有时候api域名拿不到cookie，除了domain还有cookiepath的可能性。当然解决方案也很简单
location{
proxy_cookie_path<本域的路径><想修改的路径>;
}
后续优化
这只是nginx配置最简单的一个例子，还有，开启gzip、缓存设置、合并资源请求的插件、设置50x，40x页面、判断移动端，pc端跳转等配置，nginx还是很强大的。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对毛票票的支持。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。