写给前端同学的Nginx配置指南(二)

简介: 写给前端同学的Nginx配置指南

静态资源优化


为了提高静态资源的传输效率,Nginx提供了以下三个主要的优化指令:

  • sendfile
  • tcp_nopush
  • tcp_nodelay


sendfile 指令


sendfile 用于开启高效的文件传输模式。它通过调用系统内核的 sendfile 函数来实现,从而避免了文件的多次拷贝,同时减少了用户态和内核态之间的切换,从而提高了静态文件的传输效率。

传统的静态资源请求过程:

  1. 客户端通过网络接口向服务端发送请求。
  2. 操作系统将这些请求传递给服务器端应用程序。
  3. 服务器应用程序处理请求。
  4. 处理完成后,操作系统将处理得到的结果通过网络适配器传递给客户端。


image.png

项目 描述
语法 `sendfile on off`
默认值 sendfile off
配置位置 http块server块location块


tcp_nopush 和 tcp_nodelay指令


tcp_nopush

sendfile 开启时,tcp_nopush 也可以被启用。它的主要目的是提高网络数据包的传输效率。

项目 描述
语法 `tcp_nopush on off`
默认值 tcp_nopush off
配置位置 http块server块location块

tcp_nodelay

只有在 keep-alive 连接开启时,tcp_nodelay 才能生效。它的目的是提高网络数据包的实时性。

项目 描述
语法 `tcp_nodelay on off`
默认值 tcp_nodelay on
配置位置 http块server块location块

tcp_nopush 的工作原理是设置一个缓冲区,当缓冲区满时才进行数据发送,这样可以大大减少网络开销。


静态资源压缩


在数据的传输过程中,为了进一步优化,Nginx引入了gzip模块,用于对传输的资源进行压缩,从而减少数据的传输体积,提高传输效率。

image.png

Nginx中的静态资源压缩可以在http块、server块、location块中配置。涉及的主要模块有:

  • ngx_http_gzip_module模块 (内置)
  • ngx_http_gzip_static_module模块
  • ngx_http_gunzip_module模块


Gzip模块配置指令


  1. gzip:开启或关闭gzip功能。
  • 语法:gzip on | off
  • 默认值:gzip off
  • 配置位置:http块,server块,location块
  1. gzip_types:根据响应的MIME类型选择性地开启gzip压缩。
  • 语法:gzip_types mime-type
  • 默认值:gzip_types text/html
  • 配置位置:http块,server块,location块
  • 示例:gzip_types application/javascript
  1. gzip_comp_level:设置Gzip压缩的程度,级别从1-9。
  • 语法:gzip_comp_level level
  • 默认值:gzip_comp_level 1
  • 配置位置:http块,server块,location块
  1. gzip_vary:设置是否携带"Vary:Accept-Encoding"的响应头部。
  • 语法:gzip_vary on|off
  • 默认值:gzip_vary off
  • 配置位置:http块,server块,location块
  1. gzip_buffers:处理请求压缩的缓冲区数量和大小。
  • 语法:gzip buffers number size
  • 默认值:gzip_buffer 32 4k | 16 8K
  • 配置位置:http块,server块,location块
  1. gzip_disable:选择性地开启和关闭gzip功能,基于客户端的浏览器标志。
  • 语法:gzip_disable regex
  • 默认值:gzip_disable -
  • 配置位置:http块,server块,location块
  • 示例:gzip_disable "MSIE [1-6]."
  1. gzip_http_version:针对不同的http协议版本,选择性地开启和关闭gzip功能。
  • 语法:gzip_http_version 1.0 | 1.1
  • 默认值:gzip_http_version 1.1
  • 配置位置:http块,server块,location块
  1. gzip_min_length:根据响应内容的大小决定是否使用gzip功能。
  • 语法:gzip_min_length length
  • 默认值:gzip_min_length 20
  • 配置位置:http块,server块, location块
  1. gzip_proxied:设置是否对nginx服务器对后台服务器返回的结果进行gzip压缩。
  • 语法:gzip_proxied off | expired | no-cache | no-store | private | no_last_modified | no_etag | auth | any
  • 默认值:gzip_proxied off
  • 配置位置:http块,server块, location块


Gzip与sendfile共存问题


Gzip在应用程序中进行压缩,而sendfile可以直接通过系统的网络设备发送静态资源文件,绕过应用程序的用户进程。为了解决这两者之间的冲突,Nginx提供了ngx_http_gzip_static_module模块的gzip_static指令。

image.png

  • gzip_static:对静态文件进行提前压缩。
  • 语法:gzip_static on|off|always
  • 默认值:gzip_static off
  • 配置位置:http块,server块, location块

通过上述配置,Nginx可以有效地对静态资源进行压缩,提高数据传输效率,同时与sendfile功能共存,确保高效的资源传输。


跨域


跨域资源共享(CORS)是一种安全策略,用于控制哪些网站可以访问您的资源。当您的前端应用程序和后端API位于不同的域上时,通常会遇到跨域问题。Nginx可以通过设置响应头来帮助解决这个问题。

image.png

location / {
    # 其他配置...
    # 设置允许来自所有域名请求。如果需要指定域名,将'*'替换为您的域名。
    add_header 'Access-Control-Allow-Origin' '*';
    # 允许的请求方法。
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    # 允许的请求头。
    add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
    # 允许浏览器缓存预检请求的结果,单位为秒。
    add_header 'Access-Control-Max-Age' 1728000;
    # 允许浏览器在实际请求中携带用户凭证。
    add_header 'Access-Control-Allow-Credentials' 'true';
    # 设置响应类型为JSON。
    add_header 'Content-Type' 'application/json charset=UTF-8';
    # 针对OPTIONS请求单独处理,因为预检请求使用OPTIONS方法。
    if ($request_method = 'OPTIONS') {
        return 204;
    }
}

注意:在生产环境中,出于安全考虑,建议不要使用 'Access-Control-Allow-Origin' '*',而是指定确切的域名。


防盗链


image.png

防盗链是指防止其他网站直接链接到你的网站资源(如图片、视频等),从而消耗你的服务器带宽。Nginx提供了一个非常方便的模块——ngx_http_referer_module,用于实现防盗链功能。


基本的防盗链配置:


location ~ .*.(gif|jpg|jpeg|png|bmp|swf)$ {
    valid_referers none blocked www.example.com example.com *.example.net;
    if ($invalid_referer) {
        return 403;
    }
}

在上述配置中:

  • valid_referers定义了合法的来源页面。none表示直接访问,blocked表示没有Referer头的访问,www.example.comexample.com是合法的来源域名,*.example.net表示example.net的所有子域名都是合法的来源。
  • $invalid_referer变量会在来源不在valid_referers列表中时变为"true"。
  • 如果来源不合法,服务器将返回403禁止访问的状态码。


使用错误图片代替原图片:


如果你不想显示403错误,而是想显示一个错误图片(例如:“禁止外链”的图片),你可以这样配置:

location ~ .*.(gif|jpg|jpeg|png|bmp|swf)$ {
    valid_referers none blocked www.example.com example.com *.example.net;
    if ($invalid_referer) {
        rewrite ^/.*$ /path/to/error/image.jpg;
    }
}

在上述配置中,当检测到盗链时,Nginx会重写请求的URL,将其指向一个错误图片。


注意事项


  • 防盗链配置可能会影响搜索引擎的爬虫,因此在实施防盗链策略时要小心。
  • 如果你的网站使用了CDN,确保CDN的服务器也在valid_referers列表中,否则CDN可能无法正常工作。
  • 为了确保防盗链配置正确,你应该在生产环境之前在测试环境中进行充分的测试。


内置变量


nginx的配置文件中可以使用的内置变量以美元符$开始。其中,大部分预定义的变量的值由客户端发送携带。

变量名 描述
$args 请求行中的参数,同$query_string
$content_length 请求头中的Content-length字段
$content_type 请求头中的Content-Type字段
$document_root 当前请求在root指令中指定的值
$host 请求行的主机名,或请求头字段 Host 中的主机名
$http_user_agent 客户端agent信息
$http_cookie 客户端cookie信息
$limit_rate 可以限制连接速率的变量
$request_method 客户端请求的动作,如GET或POST
$remote_addr 客户端的IP地址
$remote_port 客户端的端口
$remote_user 已经经过Auth Basic Module验证的用户名
$request_filename 当前请求的文件路径
$scheme HTTP方法(如http,https)
$server_protocol 请求使用的协议,如HTTP/1.0或HTTP/1.1
$server_addr 服务器地址
$server_name 服务器名称
$server_port 请求到达服务器的端口号
$request_uri 包含请求参数的原始URI
$uri 不带请求参数的当前URI
$document_uri $uri相同

这些内置变量为nginx配置提供了极大的灵活性,使得nginx能够根据请求的各种属性进行决策和处理。


目录
相关文章
|
3月前
|
缓存 应用服务中间件 网络安全
Nginx中配置HTTP2协议的方法
Nginx中配置HTTP2协议的方法
227 7
|
27天前
|
缓存 前端开发 Android开发
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
75 12
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
|
1月前
|
Dart 前端开发 Android开发
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
36 1
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
1月前
|
前端开发 应用服务中间件 nginx
docker安装nginx,前端项目运行
通过上述步骤,你可以轻松地在Docker中部署Nginx并运行前端项目。这种方法不仅简化了部署流程,还确保了环境的一致性,提高了开发和运维的效率。确保按步骤操作,并根据项目的具体需求进行相应的配置调整。
120 25
|
1月前
|
Dart 前端开发 架构师
【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
112 26
|
21天前
|
存储 应用服务中间件 Linux
nginx配置证书和私钥进行SSL通信验证
nginx配置证书和私钥进行SSL通信验证
56 4
|
28天前
|
前端开发 NoSQL Java
【Java若依框架】RuoYi-Vue的前端和后端配置步骤和启动步骤
本文介绍了如何配置和启动基于Java的若依(RuoYi)项目,涵盖后端和前端的详细步骤。首先,准备Redis、MySQL以及IDE(如Idea和VS)。接着,通过GitHub获取代码并导入到IDE中,执行必要的SQL文件和配置数据库密码。然后,启动Redis并进行相关配置。最后,按照前端配置步骤克隆前端代码库,打开终端执行命令完成前端配置。整个过程详细记录了每一步的操作,帮助开发者顺利部署若依项目。 如果你觉得有帮助,请点赞、关注和收藏,这将是我持续分享的动力!
283 1
|
3月前
|
负载均衡 监控 应用服务中间件
配置Nginx反向代理时如何指定后端服务器的权重?
配置Nginx反向代理时如何指定后端服务器的权重?
220 61
|
3月前
|
安全 应用服务中间件 网络安全
如何测试Nginx反向代理实现SSL加密访问的配置是否正确?
如何测试Nginx反向代理实现SSL加密访问的配置是否正确?
227 60
|
3月前
|
安全 应用服务中间件 网络安全
配置Nginx反向代理实现SSL加密访问的步骤是什么?
我们可以成功地配置 Nginx 反向代理实现 SSL 加密访问,为用户提供更安全、可靠的网络服务。同时,在实际应用中,还需要根据具体情况进行进一步的优化和调整,以满足不同的需求。SSL 加密是网络安全的重要保障,合理配置和维护是确保系统安全稳定运行的关键。
301 60

热门文章

最新文章

  • 1
    【Java若依框架】RuoYi-Vue的前端和后端配置步骤和启动步骤
  • 2
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 4
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 5
    详解智能编码在前端研发的创新应用
  • 6
    巧用通义灵码,提升前端研发效率
  • 7
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 8
    智能编码在前端研发的创新应用
  • 9
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
  • 10
    抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目