从前端的角度趣解nginx

尝尝你的优乐美
1,907 阅读7分钟

一. 前言

最近搞了个新项目，在部署的时候需要自己搞一下包、以及自己配置nginx等算不上前端要干的事。但是作为一个合格的大前端，该会还是要会，不得已只能自己硬着头皮玩一玩前端部署相关的事情。

这篇文章算是从一个 前端的角度 上去考虑和使用nginx，熟悉一下nginx的一些配置和问题排查，对于新手比较友好。

image.png

二. nginx概念

nginx是一个高性能的HTTP和反向代理web服务器。简单的来说nginx就是一个服务器。。那么这里有两个问题？什么是反向代理？nginx高性能体现在哪里？搞清楚这些问题之前，我们先要了解一下服务器的几种概念。

2.1 代理服务器和web服务器

2.1.1 什么是web服务器

web服务器主要功能就是接受客户端的HTTP请求，返回HMTL文档、图片、脚本等资源。

一般工作流程是 一问一答 机制。即客户端发起请求，服务器处理完之后，转为HTTP数据包返回给客户端。

image.png

2.1.2 什么是代理服务器

代理服务器是一种中间设备，位于本地网络和互联网之间，用于转发网络请求和响应（这里注意转发这个词）。它代表客户端向目标服务器发送请求，并将目标服务器的响应返回给客户端。

image.png

请求流程：

  • client请求：客户端（web、app）像代理服务器请求一个地址
  • request转发：代理服务器会把当前请求转发给目标服务器
  • 响应：目标服务器接受到请求之后，会返回数据给代理服务器
  • reponse转发：代理服务器收到目标服务器的响应之后，会把结果返回给client

代理服务器有什么用呢？

  • 信息安全：代理服务器可以隐藏用户的真实IP地址。因为对于目标服务器而言，client的IP地址是看不到的，只能看到代理服务器的地址。
  • 内容过滤 ：可以使用代理服务器过滤的内容，限制用户访问某些网站或服务。
  • 网络加速： 代理服务器可以缓存常见请求的响应数据，从而加快用户访问速度。比如，当多个用户请求相同的网页时，代理服务器可以直接从缓存中提供响应，而不需要每次都向目标服务器请求。
  • 负载均衡： 代理服务器可以将请求分发到多台目标服务器上，从而实现负载均衡，提高服务的可用性和性能。

2.2 正向代理与反向代理

代理服务器按照功能来划分又可以分为正向代理和反向代理。

2.2.1 正向代理

什么是正向代理？举个例子：疫情的时候，你被隔离在小区里面，但是你需要楼管来帮你买日常生活用品，这个楼管会到小区外面super market按照你给的小纸条把东西买给你。

整个流程中，你告诉楼管，楼管去supermarket购买，supermarket不知道你的真实信息。这里面楼管就相当于正向代理。

image.png

​ 从技术角度来讲述，正向代理就是位于客户端和目标服务器之间的代理服务器，它主要用于代表客户端访问外部网络资源。在这一过程中，客户端明确知道正向代理的存在，并将所有的请求发送给代理，代理接收这些请求后，再向目标服务器发起请求，最后将从目标服务器获取的响应返回给客户端。

2.2.2 反向代理

想象一下，这样一个场景。假如你开了一家预制菜饭店，每天生意很好，但是你不想别人知道你干的是预制菜，所以你把预制菜放到很多隐藏的窝点里面（这里隐藏的窝点就是目标服务器），然后你搞一个干净的档口（相当于反向代理），开始卖饭。流程如下：

image.png

这样设置有以下好处：用户不知道你用的是预制菜（目标服务器地址），只知道你的档口位置（反向代理服务器）。同时还可以灵活分配，比如有一天人很多，你就可以多准备窝点，来达到供需平衡。

从技术层面上来讲：反向代理是一种服务器部署架构，它是一种架构思想。

其中代理服务器位于client与target server之间，但对外表现像是target server本身。

客户端发起请求时，实际上连接的是反向代理服务器，通过反向代理服务器将请求转发给内部网络中的一个或多个目标服务器。做到 负载均衡。

target server处理完请求后，将响应返回给反向代理，反向代理再将响应转发给client。

三. nginx使用

3.1 正向代理配置

3.1.1 基本配置

Nginx的配置文件位于/etc/nginx/nginx.conf或/etc/nginx/conf.d/目录下的某个文件中。需要编辑这个文件来添加正向代理的配置。

如下一个简单的nginx正向代理的配置：

http {
    server {
        listen 3128; # 正向代理服务的端口，常用端口是8080或3128
        location / {
            proxy_pass http://$http_host$request_uri; # 被代理的后端服务器地址
            proxy_set_header Host $host; # 设置真实的主机名到后端服务器
            proxy_set_header X-Real-IP $remote_addr; # 传递真实的客户端IP到后端服务器
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; # 传递X-Forwarded-For头到后端服务器
            # 其他可能的代理设置...
        }
    }
}

proxy_pass指令来设置代理转发的目标服务器。

$http_host和$request_uri分别代表请求的主机名和URI。

3.1.2 配置缓存

为了提高访问速度，可以配置Nginx的缓存功能。使用proxy_cache_path指令定义缓存路径和缓存区大小，使用proxy_cache和proxy_cache_valid指令设置缓存策略。

  • proxy_cache：指定缓存区域。需要指定一个缓存区域名称。如果开启这个配置，nginx会把请求的结果保存下来，后续请求如果命中缓存，走缓存，不发请求。这样可以减少对服务器的请求次数。

    proxy_cache <address>

  • proxy_cache_valid: 设置缓存的有效时间。它允许为不同的HTTP响应状态码指定不同的缓存有效期。当缓存内容在有效期内，nginx会命中缓存，直接返回，不走请求。如果过期，nginx会走请求，返回新的内容，更新缓存。

    proxy_cache_valid <status> <time>;

    status: 是http状态码（200， 304）。time是缓存有效时间

​ 比如，proxy_cache_valid 200 10h;表示对于HTTP响应状态码为200的请求，缓存将保持有效10小时。

  • proxy_cache_path：Nginx 配置中用于定义代理缓存存储路径及其相关参数的指令。

    proxy_cache_path path [levels=levels] keys_zone=name:size [inactive=time] [max_size=size] [其他参数];

    [path]：设置缓存数据存放的根路径，该路径应该是预先存在于磁盘上的。

    [levels=levels]：设置在相对于 path 指定目录的第几级 hash 目录中缓存数据。例如，levels=1:2 表示使用两级目录结构来存储缓存文件，第一级目录由 URL 的一个哈希值决定，第二级目录由 URL 的另一个哈希值决定。

    [keys_zone=name:size]：为缓存索引分配内存区域。name 是内存区域的名称，size 是该区域的大小。这个内存区域用于存储缓存键和元数据，以便快速查找缓存内容。

    [inactive=time]：设置缓存数据的非活动期限。

    [max_size=size]：设置缓存目录中可以存储的最大数据量。当缓存数据量超过此限制时，Nginx 将根据 LRU策略删除最旧的缓存数据。

    proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=my_cache:10m max_size=10g inactive=60m;

    3.1.3 配置访问控制

    使用allow和deny指令配置访问控制规则，以限制或允许特定用户访问代理服务器。

     # 配置访问控制（可选）  
  # allow 192.168.1.0/24;  
  # deny all;

    具体所有配置如下：

    http {  
    server {  
        listen 8080;  
  
        location / {  
            proxy_pass http://$http_host$request_uri;  
            proxy_set_header Host $http_host;  
            proxy_set_header X-Real-IP $remote_addr;  
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;  
            proxy_set_header X-Forwarded-Proto $scheme;  
  
            # 配置缓存（可选）  
            proxy_cache my_cache;  
            proxy_cache_valid 200 302 10m;  
            proxy_cache_valid 404 1m;  
        }  
  
        # 配置缓存路径（如果启用了缓存）  
        proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=my_cache:10m max_size=1g inactive=60m use_temp_path=off;  
  
        # 配置访问控制（可选）  
        # allow 192.168.1.0/24;  
        # deny all;  
    }  
}

3.2 反向代理配置

3.2.1 基本配置

server {
    listen 80;  # 监听 80 端口
    server_name example.com;  # 定义服务器名称

    location / {
        proxy_pass http://backend_server;  # 转发请求到后端服务器
        proxy_set_header Host $host;  # 设置 HTTP 头部，传递客户端请求的主机名
        proxy_set_header X-Real-IP $remote_addr;  # 传递客户端的真实 IP 地址
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;  # 传递客户端和所有代理服务器的 IP 地址
        proxy_set_header X-Forwarded-Proto $scheme;  # 传递使用的协议（http 或 https）
    }
}

这个例子中nginx 监听 80 端口的请求，将所有路径的请求转发到 http://backend_server

3.2.2 高级配置

  • 负载均衡

    http {
  upstream backend_servers {
      server b1.example.com weight=3;  # backend1 服务器的权重为 3
      server b2.example.com;  # 默认权重为 1
      server b3.example.com;  # 默认权重为 1
  }
}

    设置对应服务器的权重。这里b1权重是3， b2和b3都是1。

  • 配置缓存

    ​ 同正向代理配置。

  • 超时设置

    ​ 为了优化与server的连接管理，可以设置连接池和超时参数。

    http {
  upstream backend_servers {
     keepalive 32;  # 保持活动的空闲连接数
  }
  server {

        location / {
            proxy_connect_timeout 60s;  # 连接超时时间 60 秒
            proxy_send_timeout 60s;  # 发送超时时间 60 秒
            proxy_read_timeout 60s;  # 读取超时时间 60 秒
        }
    }
}

3.3 nginx问题排查

3.3.1 502 Bad Gateway

如果nginx返回502的话，表示nginx无法从后端获取有效的响应。

问题原因：

  • 后端挂了
  • 后端服务没起
  • nginx与后端通信断了
  • nginx中的proxy_pass地址错误

排查：

  • 去看看nginx的配置中proxy_pass等重要信息是否正确。

  • 检查nginx与后端服务之间是否正常通信。

    telnet backend_server_ip backend_server_port

  • 找你的小伙伴（倒霉后端）去看服务器日志。

3.3.2 504 Gateway Timeout

这个其实挺常见的，表示nginx请求服务超时。

问题原因：

  • 网太卡了。
  • 后端服务器处理时间过长。
  • nginx设置超时时间太短

排查：

前两个对前端来说，没什么好说的（又不关我的事）。最多我给你ping一下。。。

可以去看一下nginx配置，看一下里面的proxy_connect_timeout、proxy_send_timeout 和 proxy_read_timeout的时长。

 proxy_connect_timeout 300s;  # 增加连接超时时间到 300 秒
proxy_send_timeout 300s;  # 增加发送超时时间到 300 秒
proxy_read_timeout 300s;  # 增加读取超时时间到 300 秒

四. 总结

本文从nginx的概念入手，一点点探讨一下服务器、代理服务器的概念。然后笼统的讲了一下nginx的一些配置项。因为自己对nginx也算是新手，所以这篇文章也算是自己的一个总结。有问题的地方欢迎大家指正出来，评论区欢迎讨论哈！下期会更新一下nginx在项目中的使用。

相关文章： Docker部署Vue项目原来可以那么好用

avatar
文章
阅读
粉丝