Nginx静态资源配置

基本配置原则

  1. 明确资源目录:为不同类型的静态资源指定不同的路径,这样可以避免路径冲突,并且便于管理。
  2. 正确设置文件权限:确保 Nginx 具有读取静态资源的权限。
  3. 缓存优化:为静态资源设置缓存头(如 expires),提高性能。
  4. 目录结构清晰:保持清晰、合理的目录结构,避免将所有资源放在同一目录下。

示例配置:

server {listen 80;server_name www.example.com;  # 域名# 设置网站的根目录root /usr/local/nginx/html;  # 网站根目录index index.html index.htm;# 配置静态资源路径# 配置 CSS 目录location /css/ {root /usr/local/nginx/html;  # 静态资源根目录# 缓存静态资源 1 周expires 7d;add_header Cache-Control "public";}# 配置 JS 目录location /js/ {root /usr/local/nginx/html;  # 静态资源根目录# 缓存静态资源 1 周expires 7d;add_header Cache-Control "public";}# 配置图片目录location /images/ {root /usr/local/nginx/html;  # 静态资源根目录# 缓存图片 1 月expires 30d;add_header Cache-Control "public";}# 配置其他文件类型的静态资源(如视频、音频等)location /media/ {root /usr/local/nginx/html;  # 静态资源根目录# 设置缓存时间expires 30d;add_header Cache-Control "public";}# 为静态文件配置错误页面error_page 404 /404.html;location = /404.html {root /usr/local/nginx/html;  # 设置404错误页面的目录}}

配置解析:

  1. root /usr/local/nginx/html;
    • root 指令指定了网站的根目录,静态资源将会相对于此目录来寻找。比如 location /css/ 配置意味着当访问 http://your-site/css/style.css 时,Nginx 会从 /usr/local/nginx/html/css/style.css 文件路径提供资源。
  2. expiresCache-Control
    • expires 7d; 设置资源的过期时间(在客户端缓存中存储)。例如,cssjs 文件缓存时间为 7 天,imagesmedia 目录的文件缓存时间更长,设置为 30 天。
    • add_header Cache-Control "public"; 使得这些资源可以被缓存。
  3. location /css/location /js/location /images/ 等:
    • 每个资源目录都单独配置了 location,Nginx 根据请求的路径 /css//js/ 来匹配相应的目录。
    • 这些资源将直接从 Nginx 的根目录下提供,无需代理到后端应用。
  4. error_page
    • error_page 404 /404.html; 用于配置自定义的错误页面。当文件未找到时,Nginx 将显示自定义的 404.html 页面。
  5. location = /404.html
    • 配置 404 错误页面的位置,Nginx 会提供一个静态的 404.html 页面。

其他注意事项:

  1. 文件权限
    • 确保 Nginx 用户(通常是 nginxwww-data)对静态资源目录具有 读取权限
  2. 避免缓存冲突
    • 通过合理设置缓存头(如 Cache-Control)来避免客户端缓存过期的资源。对于不经常更新的资源(如图片、字体),可以设置较长的缓存时间;对于经常更新的资源(如 CSS 和 JS),可以设置较短的缓存时间。
  3. 路径避免冲突
    • 确保静态资源的路径(如 /css/, /js/)和动态路径(如应用请求路径)没有冲突,避免路径匹配错误。

总结:

  1. 通过 location 配置不同静态资源的目录,可以提高配置的可维护性和清晰度。
  2. 使用 expiresCache-Control 来设置缓存策略,提高性能。
  3. 确保静态资源文件的权限和路径正确,避免出现无法访问的情况。
  4. 定期检查日志文件,确保静态资源配置生效。

这种配置方式不仅能够有效提高网站的访问速度,还能减轻服务器的压力,因为浏览器可以缓存静态资源,减少每次访问时对服务器的请求。

Tips

500页面参考

在这里插入图片描述

404页面参考

在这里插入图片描述

静态资源集合仓库:https://gitee.com/lin_yi1/html-resources.git

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/63000.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Influxdb 基础操作

InfluxDB是一个由InfluxData开发的开源时序数据库,专为高性能地查询与存储时序数据而设计。以下是对InfluxDB基础操作的介绍: 一、数据库操作 创建数据库 使用CREATE DATABASE语句可以创建一个新的数据库。例如,创建一个名为example_db的数…

bert-base-uncased模型的tokenizer.json和vocab.txt的区别和联系

说在前面 突然发现这两个文件是由区别的,之前傻傻的把两个文件都下载到模型里面了,transformers工具包使用bert加载分词器时并不是都需要这两个文件的,而是工具加载器类型类具体决定的。 vocab.txt 的作用 词汇表文件,通常是一…

华为NPU服务器昇腾Ascend 910B2部署通义千问Qwen2.5——基于mindie镜像一路试错版(三)

文章目录 前言纯模型推理启动服务后面干什么?这可咋整啊?愁死了!总结前言 这是咱这个系列的第三个文章了。 毕竟,这是我好几天摸索出的经验,能帮助各位在几个小时内领会,我觉得也算是我的功劳一件了。 所以,一是希望大家耐心看下去,耐心操作下去;而是恳请各位多多关…

linux静态链接和动态链接

静态链接的特点 程序独立性高 静态链接是在程序编译时,将所有需要的目标文件以及它们所依赖的库文件中的代码和数据链接成一个可执行文件。一旦链接完成,这个可执行文件就包含了运行所需的全部内容,不依赖外部的库文件。例如,一个…

Android学习8 -- NDK2--练习2(Opencv)

以下是一个简单的安卓项目示例,通过NDK调用OpenCV来处理图像(例如,将彩色图像转换为灰度图像)。 开发环境 安装 Android Studio(支持NDK开发)。配置NDK和CMake(通过Android Studio的SDK Manage…

Pixtral Large开源:Mistral AI的1240亿参数多模态模型超越GPT-4o等竞争对手

Pixtral Large是什么 Pixtral Large是由法国人工智能初创公司Mistral AI开发的超大多模态模型,拥有1240亿参数,2024年11月18日正式对外发布。它基于Mistral Large 2开发而成,具备1230亿参数的多模态解码器和10亿参数的视觉编码器。这个模型能…

阿里云整理(二)

阿里云整理 1. 访问网站2. 专业名词2.1 域名2.2 域名备案2.3 云解析DNS2.4 CDN2.5 WAF 1. 访问网站 用户使用浏览器访问网站大体分为几个过程: 用户在浏览器输入域名URL,例如www.baidu.com。 不过,浏览器并不知道为该域名提供服务的服务器具…

【联表查询】.NET开源 ORM 框架 SqlSugar 系列

.NET开源 ORM 框架 SqlSugar 系列 【开篇】.NET开源 ORM 框架 SqlSugar 系列【入门必看】.NET开源 ORM 框架 SqlSugar 系列【实体配置】.NET开源 ORM 框架 SqlSugar 系列【Db First】.NET开源 ORM 框架 SqlSugar 系列【Code First】.NET开源 ORM 框架 SqlSugar 系列【数据事务…

【分布式】分布式缓存

一、什么是分布式缓存 分布式缓存是一种将缓存数据存储在多个节点上的缓存方案。它通过将数据分散存储在多个节点的内存中,以提高系统的读取性能、降低数据库压力和提高系统可扩展性。 二、分布式缓存的优点 优点明细提高性能:分布式缓存可以将数据缓…

创建子类对象时,会创建父类对象吗

一、查询网上的结论: 创建子类对象时, 会先调用子类构造方法对子类对象进行初始化,子类构造方法的第一行又会调用父类构造方法对父类进行初始化(不会创建父类对象, 但是会在子类对象的内存空间中开辟一块被包含的内存空间存储父类…

标贝科技受邀出席2024东湖国际人工智能高峰论坛并入选数据要素合作伙伴名单

近日,备受瞩目的2024东湖国际人工智能高峰论坛在中国光谷科技会展中心隆重召开。会议以“智联世界,共创未来”为主题,省市相关单位、专家学者、产学研各界百余家联合体单位齐聚一堂,共话人工智能领域的最新技术及产业发展趋势。会…

[Python] 进阶之路:模块、包和异常处理

在掌握了Python的类与对象后,下一步是深入理解模块化开发和异常处理。模块与包帮助我们组织代码,增强代码的可维护性和重用性,而异常处理则是编写健壮代码的重要技能。本文将系统讲解Python中模块、包和异常处理的核心概念与实用技巧。 一、模…

使用AI工具Screenshot to Code将UI设计图翻译成代码

一、获取openAI apikey。 一般有两种方式,一种是到openAI官网注册账号,付费申请GPT4的apikey。另一种是某宝买代理。我这里采用第二种。 二、安装Screenshot to Code 1.到github下载源码。 2.启动,两种方式:源码启动和docker启动…

SpringBoot mq快速上手

1.依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-amqp</artifactId> </dependency> 2.示例代码 基础信息配置 package com.example.demo.config;import org.springframework.amqp.co…

Rust学习笔记_07——枚举和范围

Rust学习笔记_04——引用 Rust学习笔记_05——控制流(1) Rust学习笔记_06——控制流(2) 文章目录 1. 枚举1.1基础1.2 给枚举变体起个“别名”1.3 枚举与匹配&#xff08;match&#xff09; 2. 范围2.1 介绍2.2 半开区间范围2.3 包含范围的语法糖2.4 步长范围&#xff08;Range …

VMware Workstation Pro安装教程 (全图文保姆级)

一、前言 系统&#xff1a;Windows 11时间&#xff1a;2024/12/04需求&#xff1a;注册&#xff1a;broadcom&#xff08;邮箱&#xff09;难点&#xff1a;在官网找到下载链接 二、说明 建议前往官网&#xff08;https://www.vmware.com&#xff09;下载&#xff0c;可能加…

前端开发 之 15个页面加载特效下【附完整源码】

文章目录 十二&#xff1a;铜钱3D圆环加载特效1.效果展示2.HTML完整代码 十三&#xff1a;扇形百分比加载特效1.效果展示2.HTML完整代码 十四&#xff1a;四色圆环显现加载特效1.效果展示2.HTML完整代码 十五&#xff1a;跷跷板加载特效1.效果展示2.HTML完整代码 十二&#xff…

protobuf实现Hbase数据压缩

目录 前置HBase数据压缩效果获取数据(反序列化) 前置 安装说明 使用说明 HBaseDDL和DML操作 HBase数据压缩 问题 在上文的datain中原文 每次写入数据会写入4个单元格的内容&#xff0c;现在希望能对其进行筛减&#xff0c;合并成1格&#xff0c;减少存储空间&#xff08;序列…

Svn如何切换删除账号

记录Svn清除切换账号 1.首先打开小乌龟的设置如下图 打开设置后单击已保存数据&#xff0c;然后选择清除 接上图选择清除后&#xff0c;就可以打勾选择清除已保存的账号&#xff0c;我们再次检出的就可以切换账号了 &#x1f449;总结 本次记录Svn清除切换账号 如能帮助到你…

正点原子imx6ull配置MQTT客户端上传数据到Ubuntu MQTT服务器

目录 使用QT自带的MQTT模块部署客户端创建一个class专门用于MQTT客户端通讯使用QT在ui界面上生成按钮在Windows上订阅相应主题测试在imx6ull上订阅Windows发布的消息 在上一篇中介绍了在Ubuntu22.04的Docker中部署MQTT服务器&#xff0c;然后在window上测试订阅和发布&#xff…