前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >前端开发者必备Nginx知识

前端开发者必备Nginx知识

作者头像
薛定喵君
发布2019-11-06 11:38:18
5140
发布2019-11-06 11:38:18
举报
文章被收录于专栏:薛定喵君

nginx在应用程序中的作用

  • 解决跨域
  • 请求过滤
  • 配置gzip
  • 负载均衡
  • 静态资源服务器

# 正向代理与反向代理

代理

  • 在服务器和客户端之间假设的一层服务器
  • 将接收客户端的请求并将它转发给服务器,然后将服务端的响应转发给客户端

::: tip 正向代理

  • 是一个位于客户端和原始服务器(origin server)之间的服务器,为了从原始服务器取得内容,客户端向代理发送一个请求并指定目标(原始服务器),然后代理向原始服务器转交请求并将获得的内容返回给客户端。
  • 为我们服务的,即为客户端服务的,客户端可以根据正向代理访问到它本身无法访问到的服务器资源。
  • 对我们是透明的,对服务端是非透明的,即服务端并不知道自己收到的是来自代理的访问还是来自真实客户端的访问。 :::

::: tip 反向代理

  • 是指以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给internet上请求连接的客户端,此时代理服务器对外就表现为一个反向代理服务器。
  • 为服务端服务的,反向代理可以帮助服务器接收来自客户端的请求,帮助服务器做请求转发,负载均衡等。
  • 对服务端是透明的,对我们是非透明的,即我们并不知道自己访问的是代理服务器,而服务器知道反向代理在为他服务。 :::

# 基本配置

nginx配置文件的基本结构

代码语言:javascript
复制
events { }
http { 
    server { 
        location path { ... } 
        location path { ... } 
    } 
    server { ... }
}  
  • main:nginx的全局配置,对全局生效。
  • events:配置影响nginx服务器或与用户的网络连接。
  • http:可以嵌套多个server,配置代理,缓存,日志定义等绝大多数功能和第三方模块的配置。
  • server:配置虚拟主机的相关参数,一个http中可以有多个server。
  • location:配置请求的路由,以及各种页面的处理情况。
  • upstream:配置后端服务器具体地址,负载均衡配置不可或缺的部分。

# 内置变量

下面是nginx一些配置中常用的内置全局变量,你可以在配置的任何位置使用它们。

变量名

功能

$host

请求信息中的Host,如果请求中没有Host行,则等于设置的服务器名

$request_method

客户端请求类型,如GET、POST

$remote_addr

客户端的IP地址

$args

请求中的参数

$content_length

请求头中的Content-length字段

$http_user_agent

客户端agent信息

$http_cookie

客户端cookie信息

$remote_addr

客户端的IP地址

$remote_port

客户端的端口

$server_protocol

请求使用的协议,如HTTP/1.0、·HTTP/1.1`

$server_addr

服务器地址

$server_name

服务器名称

$server_port

服务器的端口号

# 解决跨域

跨域的定义 同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。通常不允许不同源间的读操作。

同源的定义 如果两个页面的协议,端口(如果有指定)和域名都相同,则两个页面具有相同的源。

nginx解决跨域的原理

例如:

前端server的域名为:fe.server.com 后端服务的域名为:dev.server.com 现在我在fe.server.com对dev.server.com发起请求一定会出现跨域。

现在我们只需要启动一个nginx服务器,将server_name设置为fe.server.com,然后设置相应的location以拦截前端需要跨域的请求,最后将请求代理回dev.server.com。如下面的配置:

代码语言:javascript
复制
server { 
    listen 80; 
    server_name fe.server.com; 
    location / { 
        proxy_pass dev.server.com; 
    } 
}  

这样可以完美绕过浏览器的同源策略: fe.server.com访问nginx的fe.server.com属于同源访问,而nginx对服务端转发的请求不会触发浏览器的同源策略。

# 请求过滤

根据状态码过滤

代码语言:javascript
复制
error_page 500 501 502 503 504 506 /50x.html; 
location = /50x.html 
{ 
    #将跟路径改编为存放html的路径。 
    root /root/static/html; 
}

根据URL名称过滤,精准匹配URL,不匹配的URL全部重定向到主页。

代码语言:javascript
复制
location / { rewrite ^.*$ /index.html redirect; }

根据请求类型过滤

代码语言:javascript
复制
if ( $request_method !~ ^(GET|POST|HEAD)$ ) { return 403; }

# 配置gzip

对于文本文件,GZip 的效果非常明显,开启后传输所需流量大约会降至 1/4 ~ 1/3。 启用gzip同时需要客户端和服务端的支持,如果客户端支持gzip的解析,那么只要服务端能够返回gzip的文件就可以启用gzip了,我们可以通过nginx的配置来让服务端支持gzip。

代码语言:javascript
复制
gzip on; 
gzip_http_version 1.1; 
gzip_comp_level 5; 
gzip_min_length 1000; 
gzip_types text/csv text/xml text/css text/plain text/java application/java application/x-java application/json application/xml;

gzip

  • 开启或者关闭gzip模块
  • 默认值为 off
  • 可配置为 on / off

gzip_http_version

  • 启用 GZip 所需的 HTTP 最低版本
  • 默认值为 HTTP/1.1

gzip_comp_level

  • 压缩级别,级别越高压缩率越大,当然压缩时间也就越长(传输快但比较消耗cpu)。
  • 默认值为 1
  • 压缩级别取值为1-9

gzip_min_length

  • 设置允许压缩的页面最小字节数,Content-Length小于该值的请求将不会被压缩
  • 默认值:0
  • 当设置的值较小时,压缩后的长度可能比原文件大,建议设置1000以上

gzip_types

  • 要采用gzip压缩的文件类型(MIME类型)
  • 默认值:text/html(默认不压缩js/css)

# 负载均衡

用来帮助我们将众多的客户端请求合理的分配到各个服务器,以达到服务端资源的充分利用和更少的请求时间

如何实现 Upstream指定后端服务器地址列表

代码语言:javascript
复制
upstream balanceServer { 
    server 10.1.22.33:12345; 
    server 10.1.22.34:12345; 
    server 10.1.22.35:12345; 
}

在server中拦截响应请求,并将请求转发到Upstream中配置的服务器列表。

代码语言:javascript
复制
server { 
    server_name fe.server.com; 
    listen 80; l
    ocation /api { 
        proxy_pass http://balanceServer; 
    } 
}

指定分配策略

  • 轮询策略 默认策略:将所有客户端请求轮询分配给服务端,某一台服务器压力太大会出现延迟影响本台机器所服务的用户
代码语言:javascript
复制
upstream balanceServer { 
    server 10.1.22.33:12345; 
    server 10.1.22.34:12345; 
    server 10.1.22.35:12345; 
}
  • 最小连接数策略 请求优先分配给压力较小的服务器,它可以平衡每个队列的长度,并避免向压力大的服务器添加更多的请求
  • 最快响应时间策略 依赖于NGINX Plus,优先分配给响应时间最短的服务器。
代码语言:javascript
复制
upstream balanceServer { 
    fair; 
    server 10.1.22.33:12345; 
    server 10.1.22.34:12345; 
    server 10.1.22.35:12345;
}
  • 客户端ip绑定 同一个ip的请求永远只分配一台服务器,有效解决了动态网页存在的session共享问题
代码语言:javascript
复制
upstream balanceServer { 
    ip_hash; 
    server 10.1.22.33:12345; 
    server 10.1.22.34:12345; 
    server 10.1.22.35:12345;
}
  • 静态资源服务器
代码语言:javascript
复制
location ~* \.(png|gif|jpg|jpeg)$ { 
    root /root/static/; 
    autoindex on; 
    access_log off; 
    expires 10h;# 设置过期时间为10小时 
}

匹配以png|gif|jpg|jpeg为结尾的请求,并将请求转发到本地路径,root中指定的路径即nginx本地路径。同时也可以进行一些缓存的设置。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019/05/06 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • # 正向代理与反向代理
  • # 基本配置
  • # 内置变量
  • # 解决跨域
  • # 请求过滤
  • # 配置gzip
  • # 负载均衡
相关产品与服务
文件存储
文件存储(Cloud File Storage,CFS)为您提供安全可靠、可扩展的共享文件存储服务。文件存储可与腾讯云服务器、容器服务、批量计算等服务搭配使用,为多个计算节点提供容量和性能可弹性扩展的高性能共享存储。腾讯云文件存储的管理界面简单、易使用,可实现对现有应用的无缝集成;按实际用量付费,为您节约成本,简化 IT 运维工作。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档