• 售前

  • 售后

热门帖子
入门百科

部署前后端分离式nginx设置的完备步调

[复制链接]
weenahbp46 显示全部楼层 发表于 2021-10-26 13:53:47 |阅读模式 打印 上一主题 下一主题
媒介
老生常谈了,这里谈谈我的理解的前后端分离,简单的分离无非是将原来mvc的view层剥离出来,独立一个成为Servlet服务,Servlet之间依赖http连通。这里的view Servlet容器可以是恣意一种服务端服务,Tomcat、Apache、Nginx、IIS,都可以。这里以常用的Nginx为例子做简单的介绍。

需求分析

先来一波需求分析。
      
  • 单项目
         
    • 单项目指的是一台服务器部署一个前端服务,使www.xxx.com => index.html的单一指向。  
       
  • 多项目
         
    • 多项目指的是一台服务器部署多个前端服务,使www.xxx.com/a => a.html,www.xxx.com/b => b.html等多指向。  
       
  • 请求代理。  
  • cookie domain重写。  
  • cookie path 重写。
提示:这里做好写conf.d/*.conf,这样配置可以分离处理。

公共配置
  1. server{
  2. listen 80; # 配置端口
  3. server_name _; # 配置域名
  4. charset utf-8; # 编码
  5. access_log /xxx/log/nginx_access.log main; # 成功日志
  6. error_log /xxx/log/nginx_error.log error; # 错误日志
  7. index index.html; # 查找文件顺序
  8. set $root /xxx/nginx/; # 变量设置,设置公共路径
  9. # 其余location
  10. }
复制代码
请手动去/xxx/log/nginx_access.log和/xxx/log/nginx_error.log下新建对应文件。大概会实验nginx reload第一次实验时会报错。

set的$root路径为绝对路径,access_log和error_log同样都是绝对路径。
单项目配置

目次布局
  1. nginx
  2. |----- index.html
  3. |----- user.html
复制代码
location配置
  1. location / {
  2.         root $root;
  3. }
复制代码
好了最简单的基于根路径配置就这样好了,这里无非是通过location配置一条路径,然后指向到$root文件夹下的index.html这个文件下。

多项目配置

目次布局
  1. nginx
  2. |----- a
  3.     |----- index.html
  4. |----- b
  5.     |----- index.html
复制代码
多条location配置
  1. location ^~ /a {
  2.   alias $root/a;
  3. }
  4. location ^~ /b {
  5.   alias $root/b;
  6. }
  7. location / {
  8.   root $root;
  9. }
复制代码
跟单项目唯一的差别点在于,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这个域名下我们只要切出子路径即可。简单轻巧。

请求转发
  1. location ^~ /api {
  2.   proxy_pass http://api.xxx.com/;
  3. }
复制代码
这里就特殊简单了,我通过正则匹配/api这个请求,通过proxy_pass属性,将请求定向到http://api.xxx.com。即可

修改cookie domain

有时间处于安全考虑,我们会设置肯定的cookie的domain属性这是对于nginx转发来说就很不友爱了。固然也是有办理本事的,也很简单。
  1. location {
  2.   proxy_cookie_domain <本域的domain> <想修改的domain>;
  3. }
复制代码
修改cookie path

当我们转发回api接口时,有时间api域名拿不到cookie,除了domain还有cookie path的大概性。固然办理方案也很简单
  1. location {
  2.   proxy_cookie_path <本域的路径> <想修改的路径>;
  3. }
复制代码
后续优化

这只是nginx配置最简单的一个例子,还有,开启gzip、缓存设置、合并资源请求的插件、设置50x,40x页面、判定移动端,pc端跳转等配置,nginx还是很强盛的。
总结
以上就是这篇文章的全部内容了,盼望本文的内容对各人的学习大概工作具有肯定的参考学习价值,谢谢各人对草根技术分享的支持。

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作