1 问题

最近使用宝塔面板的NodeJS项目部署nextjs项目,通过nginx反向代理本地的nextjs项目启动端口实现外网访问,第一次部署正常访问是没有问题的。之后迭代项目版本,将新代码覆盖旧代码以及重新启动项目多次之后访问的依然是旧页面,排查了是否是浏览器缓存(换成无痕模式)、重新覆盖了多次代码、重新启动多次项目之后问题依然存在。

2 解决方案

通过搜索发现是由于nginx反向代理缓存的问题,宝塔面板中nginx设置反向代理相关的缓存和性能参数的配置文件在:/www/server/nginx/conf/proxy.conf 这个配置文件,
该文件的内容为:

proxy_temp_path /www/server/nginx/proxy_temp_dir;
proxy_cache_path /www/server/nginx/proxy_cache_dir levels=1:2 keys_zone=cache_one:20m inactive=1d max_size=5g;
client_body_buffer_size 512k;
proxy_connect_timeout 60;
proxy_read_timeout 60;
proxy_send_timeout 60;
proxy_buffer_size 32k;
proxy_buffers 4 64k;
proxy_busy_buffers_size 128k;
proxy_temp_file_write_size 128k;
proxy_next_upstream error timeout invalid_header http_500 http_503 http_404;
proxy_cache cache_one;

与上述问题相关的参数为:

  • proxy_cache_path:设置了Nginx的缓存路径、层级结构、缓存区域大小(keys_zone=cache_one:20m,即缓存名为cache_one,占用内存20MB)以及缓存策略。其中
    • inactive=1d 表示缓存项在1天内未被访问则会被标记为过期。

如果要让nextjs的更新被及时访问,最简单的方式就是将上述配置文件中的inactive=1d修改为inactive=1s,即将1天内未被访问则会被标记为过期修改为1秒内未被访问则会被标记为过期。保存配置文件退出,并在宝塔面板中重启nginx即可。如果还没有起作用,重新覆盖nextjs项目代码,并重新build和运行项目即可。

参考链接