hugh 的个人博客

纯前端项目多节点部署遇到的文件缓存问题

1、问题场景

(1)应用是纯前端应用, 使用nginx作为服务器提供对外访问

(2)支持history api,使用url形式访问

(3)线上应用,有两个以上的节点

(4)为保证文件实时更新,文件都采用md5指纹组成的文件名

2、问题原因

(1)为支持url形式访问,配置了nginx,使访问不到的路由都到了index.html

location / {
    root   /usr/xxx/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }

(2)多节点部署策略问题。 目前采用的间隔指定时间(如20s)进行节点部署。 当第一台机器部署之后20s之后部署第二台。

(3)交替部署期间,访问了应用

3、问题现象

当访问了一台未开始部署的机器时, 发现有些js文件由于内容变化,导致当前机器未能找到文件,

同时触发nginx的try_fils配置,导致输出内容为index.html的内容。

此时浏览器端认为这是一个合理正确的请求,并对这个资源进行了缓存 

只要不是强制刷新,之后的缓存时间内,改文件将都是错误的内容。 从而导致了问题!

4、解决方式

对静态文件配置一个单独的处理,当找不到时,输出50x的错误

 location ~.*\.(js|css|gif|jpg|jpeg|png)$ {
    root /usr/xxx/nginx/html;
    try_files $uri $uri/ 503;
  }

5、缺点

在间隔时间内 仍然有几s时间服务中断


标题:纯前端项目多节点部署遇到的文件缓存问题
作者:hugh0524
地址:https://blog.uproject.cn/articles/2018/06/08/1528388377320.html