nginx动静分离中的雷，你踩过吗？

今天见到了另外一种动静分离的配置方式：这样的方式不太推荐。

今天老板又从客户那里带来了告急问题~说主页访问不了

经过nginx的排查，发现连静态页面都无法访问。经过仔细的排查、测试，终于真相大白。

带雷的配法

该服务中的nginx是这样配置的，我们把它称为配法一：

server {
    listen       80;
    server_name  xxxxx.cn www.xxxxx.cn;
    
    location / {
        proxy_pass http://localhost:8080;
        proxy_set_header  Host  $host;
        proxy_set_header  X-Real-IP  $remote_addr;
        proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for;
        
        #以下三句话是对websocket的支持.转换1.1协议为websocket
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";

        root   html;
        index  index.html index.htm;
    }   
    
    
    location /index {
        root   /usr/local/webdata/html/home;
        index index.html;
    }   
}

配法一的缺陷：

• 当动态服务出现问题的时候，静态页面也无法访问。

原理是这样的：

sequenceDiagram
浏览器->>域名:我想访问域名A
域名->>nginx: 我要访问/，给我转发
nginx->>后端服务: nginx根据/找到了后端服务，后端服务会默认重定向到/index
后端服务->>nginx: 重定向到/index
nginx->>浏览器: 匹配/index下的静态资源返回

【解释】/的优先级比较高，后端服务通过重定向的/index才会转到nginx上配置的/index。当/对应的后端服务挂掉的时候，/index下的静态资源也就无法访问了。

安全的配置方法

server {
        listen       80;
        server_name  localhost;


        location / {
            root   /data/work/html/angular-admin;
            try_files $uri $uri/ /index.html;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        location /api-file {
            proxy_pass http://192.168.30.22:9200/api-file;
            proxy_set_header  Host  $host;
            proxy_set_header  X-Real-IP  $remote_addr;
            proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for;
        }
}

sequenceDiagram
浏览器->>域名: 直接找/下面的静态资源
浏览器->>接口: 直接找/api-file下面的动态数据

这样的情形下，当动态服务挂掉的时候，也不会影响静态资源的访问。更利于开发人员定位问题。

总结

使用nginx进行动静分离时，建议把静态资源配置到域名根目录下，否则，动态服务挂掉也会影响静态资源访问，且对性能产生一定的影响。

转载请注明出处。