nginx 部署前端资源的最佳方案

虚幻大学 xuhss 350℃ 0评论

? 优质资源分享 ?

学习路线指引(点击解锁) 知识定位 人群定位
? Python实战微信订餐小程序 ? 进阶级 本课程是python flask+微信小程序的完美结合,从项目搭建到腾讯云部署上线,打造一个全栈订餐系统。
?Python量化交易实战? 入门级 手把手带你打造一个易扩展、更安全、效率更高的量化交易系统

前言

最近刚来一个运维小伙伴,做线上环境的部署的时候,前端更新资源后,总是需要清缓存才能看到个更新后的结果。客户那边也反馈更新了功能,看不到。

方案

前端小伙伴应该都知道浏览器的缓存策略,协商缓存和强缓存,如有不清楚的地方,可以看看这篇文章[聊聊浏览器缓存] (https://juejin.cn/post/7055224159642583047)。

现在比较流行的是单页应用。了解了浏览器的缓存之后,在常见的web开发中我们应该怎么设置呢。现在大多数的应用是通过webpack打包的,打包生成的资源名称会带上hash值。下面是打包后的文件

16b518e3082641e9a12a9367bb93b09f - nginx 部署前端资源的最佳方案

我们可以遵循之下规则

  • index.html入口文件不加强制缓存,设置成协商缓存
  • js 资源在线上环境可以设置成强缓存。

因为我们每次打包之后,入口文件会有变化,所以协商缓存会失效,会重新从服务器获取新的资源。而对应的js资源有hash的变化,所以有变化,会从服务器中获取。

nginx配置

nginx 非根目录部署(root要换成alias)。

要设置html,htm类型的文件走协商缓存,其它js文件走强缓存,我们可以这样配置。

  #设置某个类型的文件走协商缓存
  if ($request\_filename ~* .*\.(?:htm|html)$) {
    add_header Cache-Control 'no-cache';
  }

整体配置

location /page/appAnalyze {
   try_files $uri $uri/ /index.html last;
   alias /usr/*******/dist;
   index    index.html index.htm;
   #设置某个文件不缓存读取本地,永远走200,拿到最新的
    if ($request\_filename ~* .*\.(?:htm|html)$) {
        add_header Access-Control-Allow-Credentials false;
        add_header Access-Control-Allow-Origin $http\_origin;
        # header上添加协商缓存
        add_header Cache-Control 'no-cache';
        # 表示请求头的字段 动态获取
        add_header Access-Control-Allow-Headers
        $http\_access\_control\_request\_headers;
 }

结束语

小伙伴可以看看你们的项目缓存是不是这样部署的呢,如果不是,可以加上这些配置。你的网站性能也会提升一点点哈。

如果你觉得该文章不错,不妨

1、点赞,让更多的人也能看到这篇内容

2、关注我,让我们成为长期关系

3、关注公众号「前端有话说」,里面已有多篇原创文章,和开发工具,欢迎各位的关注,第一时间阅读我的文章

转载请注明:xuhss » nginx 部署前端资源的最佳方案

喜欢 (0)

您必须 登录 才能发表评论!