首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在React应用程序部署后,浏览器忽略缓存头并查找旧的CSS和JavaScript文件

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

Stack Overflow用户
提问于 2018-08-04 05:37:18
回答 1查看 472关注 0票数 1

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

它基本上包含一个包含所有必需资源(图像、压缩的JavaScript和css文件以及其他文件)的index.html文件。

在部署时,我使用Ubuntu16设置了一个DigitalOcean droplet,为了设置服务器来处理请求,我在其中安装了Express.js,它看起来是这样的:

代码语言:javascript
复制
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保持该服务器运行:pm2 start server.js

我已经安装了Nginx作为这个配置的代理(请注意Cache-Control,Pragma和Expires报头,我在每个响应中都会发送):

代码语言:javascript
复制
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文件。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-08-04 06:20:04

如果浏览器不支持缓存头,则通常是注册的服务工作者获取旧资产。

如果您在较旧版本的应用程序中使用了服务工作程序,并且不想再使用它,则必须显式注销它。

代码语言:javascript
复制
import { unregister } from './registerServiceWorker';

unregister();
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51680370

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档