如何在nginx中配置缓存静态文件

这篇教程说明你应该怎样配置 nginx、设置 HTTP 头部过期时间，用 Cache-Control 中的 max-age 标记为静态文件（比如图片、 CSS 和 Javascript 文件）设置一个时间，这样用户的浏览器就会缓存这些文件。这样能节省带宽，并且在访问你的网站时会显得更快些（如果用户第二次访问你的网站，将会使用浏览器缓存中的静态文件）。

1、准备事项

我想你需要一个正常工作的 nginx 软件，就像这篇教程里展示的：在Ubuntu 16.04 LTS 上安装 Nginx，PHP 7 和 MySQL 5.7 (LEMP)。

2 配置 nginx

可以参考 expires 指令手册来设置 HTTP 头部过期时间，这个标记可以放在 http {}、server {}、location {} 等语句块或者 location {} 语句块中的条件语句中。一般会在 location 语句块中用 expires 指令控制你的静态文件，就像下面一样：

location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
  expires 365d;
}

在上面的例子中，所有后缀名是 .jpg、 .jpeg、 .png、 .gif、 .ico、 .css 和 .js 的文件会在浏览器访问该文件之后的 365 天后过期。因此你要确保 location {} 语句块仅仅包含能被浏览器缓存的静态文件。

然后重启 nginx 进程：

/etc/init.d/nginx reload

你可以在 expires 指令中使用以下的时间设置：

  • off 让 Expires 和 Cache-Control 头部不能被更改。
  • epoch 将 Expires 头部设置成 1970 年 1 月 1 日 00:00:01。
  • max 设置 Expires 头部为 2037 年 12 月 31 日 23:59:59，设置 Cache-Control 的最大存活时间为 10 年
  • 没有 @ 前缀的时间意味着这是一个与浏览器访问时间有关的过期时间。可以指定一个负值的时间，就会把 Cache-Control 头部设置成 no-cache。例如：expires 10d 或者 expires 14w3d。
  • 有 @ 前缀的时间指定在一天中的某个时间过期，格式是 Hh 或者 Hh:Mm，H 的范围是 0 到 24，M 的范围是 0 到 59，例如：expires @15:34。

你可以用以下的时间单位：

  • ms: 毫秒
  • s: 秒
  • m: 分钟
  • h: 小时
  • d: 天
  • w: 星期
  • M: 月 (30 天)
  • y: 年 (365 天)

例如：1h30m 表示一小时三十分钟，1y6M 表示一年六个月。

注意，要是你用一个在将来很久才会过期的头部，当组件修改时你就要改变组件的文件名。因此给文件指定版本是一个不错的方法。例如，如果你有个 javascript.js 文件 并且你要修改它，你可以在修改的文件名字后面添加一个版本号。这样浏览器就要下载这个文件，如果你没有更改文件名，浏览器将从缓存里面加载（旧的）文件。

除了把基于浏览器访问时间设置 Expires 头部（比如 expires 10d）之外，也可以通过在时间前面的 modified 关键字，将 Expires 头部的基准设为文件修改的时间（请注意这仅仅对存储在硬盘的实际文件有效）。

expires modified 10d;

3 测试

要测试你的配置是否有效，可以用火狐浏览器的开发者工具中的网络分析功能，然后用火狐访问一个静态文件（比如一张图片）。在输出的头部信息里，应该能看到 Expires 头部和有 max-age 标记的 Cache-Control 头部（max-age 标记包含了一个以秒为单位的值，比如 31536000 就是指今后的一年）

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解阿里云LINUX服务器配置HTTPS(NGINX)

    详解阿里云LINUX服务器配置HTTPS(NGINX)

    背景说明 服务器为阿里云 ECS,操作系统为 CentOS 6.5. 部署配置说明 第一步,安装nginx 之所以要先安装 nginx,是因为下面配置域名解析的时候可以直接在浏览器看到效果,当然了,先配置域名,然后 ping 一下也是可以的 下载Nginx源码包,解压源码包,进入解压后的目录,编译配置,命令如下: ./configure --prefix=/usr/local/nginx --with-http_ssl_module 以上命令将nginx安装到usr/local/nginx目录下

  • Mac下Nginx安装环境配置详解

    环境信息: Mac OS X 10.11.1 Homebrew  0.9.5 正文 一.安装 Nginx 1.终端执行: brew search nginx brew install nginx 当前版本 1.6.2 安装完以后,可以在终端输出的信息里看到一些配置路径: /usr/local/etc/nginx/nginx.conf (配置文件路径) /usr/local/var/www (服务器默认路径) /usr/local/Cellar/nginx/1.6.2  (貌似是安装路径) 二.访

  • Nginx配置详解(推荐)

    Nginx配置详解(推荐)

    序言 Nginx是lgor Sysoev为俄罗斯访问量第二的rambler.ru站点设计开发的.从2004年发布至今,凭借开源的力量,已经接近成熟与完善. Nginx功能丰富,可作为HTTP服务器,也可作为反向代理服务器,邮件服务器.支持FastCGI.SSL.Virtual Host.URL Rewrite.Gzip等功能.并且支持很多第三方的模块扩展. Nginx的稳定性.功能集.示例配置文件和低系统资源的消耗让他后来居上,在全球活跃的网站中有12.18%的使用比率,大约为2220万个网站.

  • Nginx反向代理一个80端口下配置多个微信项目详解

    Nginx反向代理一个80端口下配置多个微信项目详解

    Nginx反向代理一个80端口下配置多个微信项目详解 我们要接入微信公众号平台开发,需要填写服务器配置,然后依据接口文档才能实现业务逻辑.但是微信公众号接口只支持80接口(80端口).我们因业务需求需要在一个公众号域名下面,发布两个需要微信授权的项目,怎么办? 我们可以用nginx服务器做反向代理来解决这个问题.nginx服务器对外80端口,然后根据URL参数不同,对内访问不同的项目. nginx配置如下: 打开/usr/local/nginx/conf/nginx.conf worker_pr

  • Centos7下编译安装配置Nginx+PHP+MySql环境

    序言 这次玩次狠得.除了编译器使用yum安装,其他全部手动编译.哼~ 看似就Nginx.PHP.MySql三个东东,但是它们太尼玛依赖别人了. 没办法,想用它们就得老老实实给它们提供想要的东西. 首先的一些模块依赖一些lib库, 如果你是懒人,就顺着下面的命令分别输入就行了.然后直接看配置篇.(不过这样安装的可不是最新版本的哟) ----------------安装Nginx+PHP+MySql ---------------------- 1.1 安装或更新gcc gcc-c++ 因为我安装的

  • 详解Nginx配置多站点需要踩的坑

    从Windows下的Apache转移到Linux下的Nginx,发现有很多坑需要踩. 以下就做个简单的记录,方便后来者爬坑. 配置Nginx,一般会遇到以下几个坑: 配置nginx支持pathinfo模式 - 优化URL,隐藏index.php - 同一服务器配置多站点 配置pathinfo模式 在server(也就是你的站点,一个server对应一个站点)中输入以下内容: location ~ ^(.+\.php)(.*)$ { root html/[站点目录]; #配置站点目录路径 fast

  • centos7系统下nginx安装并配置开机自启动操作

    准备工作 我的centos7系统是最小化安装的, 缺很多库, 首先安装必须的运行库 yum install wget gcc gcc-c++ pcre-devel zlib-devel ##创建工作目录并进入工作目录 mkdir -p /z/nginx && cd /z/nginx ##获取nginx最新的安装包 wget http://nginx.org/download/nginx-1.11.10.tar.gz ##解压缩 tar zxvf nginx-1.11.10.tar.gz #

  • 如何在nginx中配置缓存静态文件

    如何在nginx中配置缓存静态文件

    这篇教程说明你应该怎样配置 nginx.设置 HTTP 头部过期时间,用 Cache-Control 中的 max-age 标记为静态文件(比如图片. CSS 和 Javascript 文件)设置一个时间,这样用户的浏览器就会缓存这些文件.这样能节省带宽,并且在访问你的网站时会显得更快些(如果用户第二次访问你的网站,将会使用浏览器缓存中的静态文件). 1.准备事项 我想你需要一个正常工作的 nginx 软件,就像这篇教程里展示的:在Ubuntu 16.04 LTS 上安装 Nginx,PHP 7

  • nginx中配置使用proxy protocol协议的全过程

    目录 简介 proxy protocol在nginx中应用 在nginx中配置使用proxy protocol 在nginx中启用proxy protocol 使用Real‑IP modules 请求转发 日志记录 总结 简介 我们已经介绍了haproxy提出的proxy protocol协议,通过proxy protocol协议,服务器端可以获得客户端的真实IP地址和端口,从而可以进行一些非常有意义的操作. 为什么获得客户端的真实IP地址会非常有意义呢? 考虑一个藏在proxy背后的数据库,如

  • 详解Django模版中加载静态文件配置方法

    1.settings.INSTALLED_APPS下添加:django.contrib.staticfiles 2.settings.py下添加:STATIC_URL = '/static/' 3. (1)在APP下新建文件夹static,然后在这个static文件夹下创建一个当前APP的名字的文件夹,再把静态文件放到这个文件夹下:(类似于Templates配置) 在模板中这样调用: {% load static %} <img src="{% static 'front/logo.jpg

  • 禁止IIS缓存静态文件的方法(png,js,html等)

    禁止IIS缓存静态文件的方法(png,js,html等)

    禁止IIS缓存静态文件(png,js,html等)背景:IIS为了提高性能,默认情况下会对静态文件js,html,gif,png等做内部缓存,这个缓存是在服务器iis进程的内存中的.IIS这么做在很大程度上可以提高静态文件的访问性能,在正常情况下只要静态文件更新了IIS也会更新缓存.但是如果更新的静态文件很多就有可能出现缓存不更新的情况. 弯路:我遇到这样一个场景,服务器循环更新上万张股票行情图片,IIS也会对图片进行缓存,由于更新的频率很高,文件很多,就出现了IIS缓存文件超过几十分钟都无法更

  • ASP.NET Core中预压缩静态文件的方法步骤

    前言 Web应用程序的优化是非常重要,因为使用更少的CPU,占用更少的带宽可以减少项目的费用. 在ASP.NET Core中我们可以很容易的启用响应压缩,但是针对预压缩文件,就需要做一些额外的功能了. 这篇博客文章展示了如何在ASP.NET Core中预压缩静态文件. 下面话不多说了,来一起看看详细的介绍吧 为什么需要预压缩文件? 虽然在从服务器请求文件时, 我们可以动态压缩文件,但这意味这Web服务器需要做更多的额外工作. 其实只有在新的应用程序部署时才会更改要压缩的文件. 越好的压缩效果需要

  • Flask缓存静态文件的具体方法

    大家好,今天才发现很多学习Flask的小伙伴都有这么一个问题,清理缓存好麻烦啊,今天就教大家怎么解决. 大家在使用Flask静态文件的时候,每次更新,发现CSS或是Js或者其他的文件不会更新. 这是因为浏览器的缓存问题. 普遍大家是这几步解决办法. ·清理浏览器缓存: ·设置浏览器不缓存: ·也有以下这么写的: @app.context_processor def override_url_for():     return dict(url_for=dated_url_for) def dat

  • SpringBoot中配置Web静态资源路径的方法

    介绍: 本文章主要针对web项目中的两个问题进行详细解析介绍:1- 页面跳转404,即controller转发无法跳转页面问题:2- 静态资源文件路径问题. 项目工具: Intelij Idea, JDK1.8, SpringBoot 2.1.3 正文: 准备工作:通过Idea创建一个SpringBoot-web项目,此过程不做赘述,创建完成后项目结构如下图: 1- 创建一个controller代码如下: package com.example.webpractice.controller; i

  • 如何在pycharm中配置pyqt5设计GUI操作教程

    如何在pycharm中配置pyqt5设计GUI操作教程

    目录 PyQt5简介 为什么选择PyQt5 在Pycharm中配置PyQt5 一.标题安装PyQt5模块 1.点击设置 2.安装pyqt5,pyqt5-tools,pyqt5designer 3.默认从官网上下载模块 二.配置PyQt5设计器(Qt Designer)及转换工具 1.Qt Designer 2.PyUIC 3.qrcTOpy PyQt5简介 1.什么是GUI:Graphical User Interface,图形用户界面,用于人机交互. 2.怎么设计GUI:Qt 3.什么是Qt:

  • Maven入门教程之如何在idea中配置Maven

    Maven入门教程之如何在idea中配置Maven

    目录 一.下载Maven 二.配置环境变量 三.配置本地仓库 四.配置镜像 五.配置统一的JDK 六.创建Maven项目 七.Maven项目变为Web项目 总结 一.下载Maven Maven官网:http://maven.apache.org/download.cgi 或者其他下载渠道 建议在D盘或者其他盘新建目录(D:/maven)用于存放Maven 二.配置环境变量 此电脑右键→属性→环境变量→添加环境变量→编辑系统变量中的path添加maven的bin路径,具体如下: 如果配置成功,打开

  • 一文详解如何在IDEA中配置Node.js

    目录 一.下载Node.js 二.安装Node.js 三.配置Node.js 四.测试Node.js 总结 一.下载Node.js 官网下载链接:Node.js  或者点击这里下载 点击下图红色标注区域,即可下载msi文件 二.安装Node.js 打开msi文件 一路点击“Next”(建议自定义文件安装路径) 安装完成 三.配置Node.js 打开IDEA 如下图,进入设置 在语言和框架中找到Node.js 选择节点解释器(在安装的Node.js里找到相应的node.exe) 此时IDEA会自动

随机推荐