我已经用create-react-app
创建了一个React应用程序,正如您可能知道的那样,有一个npm run build
命令可以导出build
文件夹中部署所需的所有内容。
它基本上包含一个包含所有必需资源(图像、压缩的JavaScript和css文件以及其他文件)的index.html
文件。
在部署时,我使用Ubuntu16设置了一个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保持该服务器运行:pm2 start server.js
我已经安装了Nginx作为这个配置的代理(请注意Cache-Control,Pragma和Expires报头,我在每个响应中都会发送):
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
文件。
发布于 2018-08-04 06:20:04
如果浏览器不支持缓存头,则通常是注册的服务工作者获取旧资产。
如果您在较旧版本的应用程序中使用了服务工作程序,并且不想再使用它,则必须显式注销它。
import { unregister } from './registerServiceWorker';
unregister();
https://stackoverflow.com/questions/51680370
复制相似问题