007.如何部署前后端分离式nginx配置

妖狐艹你老母 2022-04-27 22:24 202阅读 0赞

老生常谈了，这里谈谈我的理解的前后端分离，简单的分离无非是将原来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，这样配置可以分离处理。

## 公共配置 ##

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这个域名下我们只要切出子路径即可。简单轻便。

## 请求转发 ##

location ^~ /api {
        proxy_pass http://api.xxx.com/;
    }
    复制代码

这里就特别简单了，我通过正则匹配`/api`这个请求，通过proxy\_pass属性，将请求定向到`http://api.xxx.com`。即可

## 修改cookie domain ##

有时候处于安全考虑，我们会设置一定的cookie的domain属性这是对于nginx转发来说就很不友好了。当然也是有解决手段的，也很简单。

location {
        proxy_cookie_domain <本域的domain> <想修改的domain>;
    }
    复制代码

## 修改cookie path ##

当我们转发回api接口时，有时候api域名拿不到cookie，除了domain还有cookie path的可能性。当然解决方案也很简单

location {
        proxy_cookie_path  <本域的路径> <想修改的路径>;
    }
    复制代码

## 后续优化 ##

这只是nginx配置最简单的一个例子，还有，开启gzip、缓存设置、合并资源请求的插件、设置50x，40x页面、判断移动端，pc端跳转等配置，nginx还是很强大的。