浏览器忽略缓存 headers 并在 React 应用程序部署后寻找旧的 CSS 和 JavaScript 文件

Question

我已经使用 create-react-app 创建了一个 React 应用程序，您可能知道有一个 npm run build 命令可以导出部署到 build 文件夹中的所有内容。

它基本上包含一个 index.html 文件，其中包含所有必需的资产（图像、压缩 JavaScript 和 css 文件以及其他一些）

部署时，我设置了一个带有 Ubuntu 16 的 DigitalOcean Droplet，我在其中安装了 Express.js，以便设置一个服务器来处理请求，它看起来像这样：

const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname, 'build')));

app.get('/*', function (req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(process.env.PORT || 8080);

我通过以下命令使用 pm2 保留该服务器运行ning：pm2 start server.js

我已经安装 Nginx 作为此配置的代理（请注意 Cache-Control、Pragma 和 Expires headers 我在每个回复中发送）：

upstream react_dev {
  server 127.0.0.1:8080;
  keepalive 64;
}

server {
  server_name                 dev.24mm.co;
  charset                     utf-8;

  proxy_set_header            Host             $host;
  proxy_set_header            X-Real-IP        $remote_addr;
  proxy_set_header            X-Forwarded-For  $proxy_add_x_forwarded_for;

  client_max_body_size        40m;
  client_body_buffer_size     128k;

  proxy_connect_timeout       90;
  proxy_send_timeout          90;
  proxy_read_timeout          90;

  proxy_buffer_size           4k;
  proxy_buffers               4 32k;
  proxy_busy_buffers_size     64k;
  proxy_temp_file_write_size  64k;

  location / {
    proxy_set_header          X-Prerender-Token     [my-prerender.io-token];
    proxy_set_header          X-Forwarded-For       $proxy_add_x_forwarded_for;
    proxy_set_header          Host                  $http_host;
    proxy_set_header          X-NginX-Proxy         true;
    proxy_http_version        1.1;
    proxy_set_header          Upgrade               $http_upgrade;
    proxy_set_header          Connection            "upgrade";
    proxy_max_temp_file_size  0;
    proxy_redirect            off;
    proxy_read_timeout        240s;

    set $prerender 0;
    if ($http_user_agent ~* "baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator") {
      set $prerender 1;
    }
    if ($args ~ "_escaped_fragment_") {
      set $prerender 1;
    }
    if ($http_user_agent ~ "Prerender") {
      set $prerender 0;
    }
    if ($uri ~* "\.(js|css|xml|less|png|jpg|jpeg|gif|pdf|doc|txt|ico|rss|zip|mp3|rar|exe|wmv|doc|avi|ppt|mpg|mpeg|tif|wav|mov|psd|ai|xls|mp4|m4a|swf|dat|dmg|iso|flv|m4v|torrent|ttf|woff|svg|eot)") {
      set $prerender 0;
    }

    #resolve using Google's DNS server to force DNS resolution and prevent caching of IPs
    resolver 8.8.8.8;

    if ($prerender = 1) {
      #setting prerender as a variable forces DNS resolution since nginx caches IPs and doesnt play well with load balancing
      set $prerender "service.prerender.io";
      rewrite .* /$scheme://$host$request_uri? break;
      proxy_pass http://$prerender;
    }
    #if (!-f $request_filename) {
    if ($prerender = 0) {
      add_header    Cache-Control   "no-cache, no-store, must-revalidate";
      add_header    Pragma          "no-cache";
      add_header    Expires         0;
      proxy_pass    http://react_dev;
      break;
    }
  }

  gzip on;
  gzip_disable "msie6";
  gzip_vary on;
  gzip_proxied any;
  gzip_comp_level 6;
  gzip_buffers 16 8k;
  gzip_http_version 1.1;
  gzip_min_length 256;
  gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

  listen 443 ssl; # managed by Certbot
  ssl_certificate /etc/letsencrypt/live/dev.24mm.co/fullchain.pem; # managed by Certbot
  ssl_certificate_key /etc/letsencrypt/live/dev.24mm.co/privkey.pem; # managed by Certbot
  include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
  ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}

server {
  if ($host = dev.24mm.co) {
    return 301 https://$host$request_uri;
  } # managed by Certbot

  listen 80 default_server;
  server_name dev.24mm.co;
  return 404; # managed by Certbot
}

无论我做什么，每次部署我的项目时（即我运行 npm run build）浏览器都在寻找旧的 JavaScript 和 CSS 文件，因为它有主 index.html 文档的缓存版本。这当然会导致非常糟糕的用户体验，因为所有用户在每次部署后都会看到一个空白页面。

我想知道如何告诉浏览器永远不要缓存 index.html 文件。

Answer 1

如果浏览器不支持缓存 headers，通常是已注册的 Service Worker 获取了旧资产。

如果您在较旧版本的应用中使用过 Service Worker 并且不想再使用它，则必须明确注销它。

import { unregister } from './registerServiceWorker';

unregister();

浏览器忽略缓存 headers 并在 React 应用程序部署后寻找旧的 CSS 和 JavaScript 文件

Browser ignoring cache headers and looking for old CSS and JavaScript files after React application deployment

nginx

express

reactjs

pm2

create-react-app