前后端都应该知道的Nginx技能

站长

2022年12月09日 18:05 · 阅读数 58

前言

我们本次讲解的目的是尽可能阐述清楚，工作中必备的Nginx的知识点，而且这些知识点必须在日常开发中，对于前后端开发来说都是工作中的痛点。

这时你可能会有疑问，我说的这些真的都应该需要掌握吗？

有这个质疑，我觉得是思维上是正向的，我很乐意回答，我可以明确回答，“是的”。

为什么这么说，我们来列举几个场景

场景：

1、面试时，面试官问你，Nginx在你平常开发中有使用到吗？是怎么用的？xxx是干什么的，还能做那些事情？（我平常也这么问）

2、项目第一个迭代版本开发完成，项目经理说，老X，咱们申请了2个服务器，需要把项目部署上去，一个开发环境，一个测试环境，你搞一些环境，然后前后的包一打，也部署上去

过了1~2天，中午某刻，项目经理悄悄站在你的背后，双手扶着你的肩膀，说：“老X，弄的怎么样？有什么问题吗”，你想了想，组织了一下语言，“环境都好了，项目需要开发人员提供给我，我放上去，还有，项目怎么部上去呢？”

项目经理，对着办公室的前后端负责人，你们把项目打包一下，发给老X，部署到服务器上，协助支持一下他。

一夜过去了。

第二天早上，晨会开始，项目进度大家汇报完，项目经理问起来，昨天的项目部署怎么样？可以访问了吗？

老X说，部署上去了，运行不起来，报502，不知道怎么回事？可能是Nginx的配置有问题

大家就开始排查，怎么改。忽然发现前后端对基本的配置都不熟悉，竟然连 location、upstream都不懂。更别说访问拦截日志、上传文件大小设置、超时等。

3、线上打包好的程序包，有问题，但是测试环境和生产环境的数据不能动？本地复现不出来。怎么办。本地运行nginx环境，但是我不太会，怎么办？

4、听说这个xx属性在项目开发中是必备技能，先学习了解一下。

上面四个场景，都关联到Nginx部署相关技能。

你肯定也是属于上述的某个目的，需要进行技能学习和提升。

注意：对于深入难懂的nginx配置，则需要运维去搞

实际应用

在项目应用前，我们需要了解几个专业名词

反向代理
server
location 匹配
prox_pass、root、alias等基本配置
upstream 负载均衡

对于这几个重要的点，我们用一张图串起来

前后端都应该知道的Nginx技能

不知道你有没有看懂？

没看懂也没关系，我们下来慢慢讲解

1、反向代理，是不是也有正向代理，是什么意思？

首页我们web应用项目，大部分使用场景应用的反向代理，二者解释起来有点绕。

我们结合图列简单阐述下

正向代理

前后端都应该知道的Nginx技能

这个有点类型我们的局域网中客户端访问互联网，这种情况下，我们一般是无法直接访问，需要连接一个代理服务器，来进行访问，这种代理服务就称为正向代理。

也有点类型我们需要连外部网络，通过VPN进行访问的原理，但是这种就更加复杂，但是肯定会有一个代理服务器进行转发。

正向代理是对客户端的代理，由客户端设立

使用正向代理可达到突破访问限制、提高访问速度、对服务器隐藏客户端IP等目的；

反向代理

前后端都应该知道的Nginx技能

上面的图，是代理服务器，负载均衡的示例图

需要将请求发送到反向代理服务器，由反向代理服务器去选择目标服务器获取数据后，在返回给客户端。

说明：

反向代理中客户端对代理是无感知的，因为客户端不需要任何配置就可以访问，

此时反向代理服务器和目标服务器对外就是一个服务器，暴露的是代理服务器地址，隐藏了真实服务器 IP 地址。

学习的大佬们，静下心来，仔细琢磨下就懂了

2、Nginx 里面的 server 是什么？

server{} 包含在http{}内部，每一个server{}都是一个虚拟主机（站点）

Server 块是配置虚拟主机的重要参数块，每个HTTPS 全局块可以包含多个 server 块，而每个Server块就相当于一台虚拟主机


server {
            listen 80;
            server_name Example Domain;
}

listen指令 监听的端口号
server_name指令 外网访问的域名，可以写多个，用空格分隔

这两个基本的指令，根据实际情况，自己配置

3、location 匹配

直白一些的解释就是，匹配用户访问的路径，就是浏览器地址访问

juejin.cn/creator/hom…

上述访问的地址，/path部分为：/creator/home，访问后，location进行匹配/path部分，如果命中，进行响应，返回（状态吗、转发页面、服务器静态资源访问等）

在server{}里有很多location配置段

规则是：

先匹配普通location （再匹配正则表达式）

类型分为两种：

普通配置和正则匹配

普通配置

规则：

location / 路径 location = / 路径

路径部分为字符串，两者的区别在于，第二种等号后属于精确匹配，对子路径不生效。

我们大部分Nginx Server下会有

location / {       
    root /web;     
}

这个是默认策略，表示所有的请求都会命中，包含所有的请求，但是优先级最低，其他未命中时，这个才会生效。

location / {       
    root /web;     
}

location /abc {       
    root /web;     
}

当用户请求的（/abc）url同时匹配到两段location时，

最大前缀生效（location /abc 生效）

如果没有这段(location /abc ） 第一段 location / 生效。

正则匹配

location ~ URI {}

~匹配的文件是区分字符大小写的

location ~* URI {}

~*匹配的文件是不区分字符大小的

如：

location  ~ /abc {

      return 400;

}

location ~* /abc {

     return 500;

}

这个用的比较少，下面在实际应用中，使用到的点，我会提一下。知道配置即可。

4、基本配置（proxy_pass、root、alias等）

proxy_pass 反向代理

如果在proxy_pass后面的url，是实际的服务器地址

如果加/，表示绝对根路径
如果没有/，表示相对路径，把匹配的路径部分也给代理

前后端都应该知道的Nginx技能

这块需要注意，实际使用比较重要，

尾部要不要加斜杠，这个要一定要研究清楚，这个配置，在后续添加接口代理上用的比较多

比如业务层面，需要做：

1、业务数据类接口请求 2、静态资源接口代理 3、文件服务器接口代理 4、消息通知接口代理 ....

root

这个root含义就是根目录地址

默认server下可以设置

server {
   root E:/work/edu/wonder_front
}

表示当前server的根目录地址，这个看情况，一般都是访问代理地址，实践使用时会注释

访问路径

location /www/ {

   root /home/data;

}

访问路径中，配置root，访问的时候，会追加上访问路径 即：root + path

访问路径：http://192.168.66.39:2234/www/login.html

实际上的地址是:

/home/data/www/login.html

alias 别名路径

alias指定的目录必须带/，path匹配后面的内容会在alias指定的目录下查找，即alias+匹配到path路径后面的部分

访问路径

location /www/ {

   alias /home/data;

}

访问路径：http://192.168.66.39:2234/www/login.html

实际上的地址是:

/home/data/login.html

上述的使用，一般的配置应用不是很多，如果牵扯到多端的配置，就需要配置了。

5、upstream 负载均衡

upstream 用以配置负载的策略，nginx自带的有：

轮询/权重/ip_hash

特殊需求可用第三方策略（使用较少）

upstream test{
    server 192.168.0.101:8081;
    server 192.168.0.102:8081;
}
 
upstream test1 {
    server 192.168.0.101:8081 weight=2;
    server 192.168.0.102:8081 weight=1;
}
 
upstream test2 {
    ip_hash
    server 192.168.0.101:8081;
    server 192.168.0.102:8081;
}
 
server{
   listen   80;
   server_name  localhost;
 
   location /login {
       proxy_pass   http://test/
   } 
}

这里的配置，upstream一般会在独立的文件进行配置，就是说，

/login会代理到 test的地址，test指向了负载upstream地址

这个项目上一般都会进行配置

5、其他配置

client_max_body_size 100m; 这个文件上传一般配置，传输文件大小限制 add_header Access-Control-Allow-Origin *; 设置跨域

gzip 压缩，建议开启，访问时会节流，性能提升

    gzip on;
    gzip_min_length  1000;
    gzip_buffers     4 8k;
    gzip_comp_level  1;
    gzip_types       text/plain text/css text/javascript application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss;

expires缓存 设置

 # 使用expires缓存图片，缓存到客户端10天--发布上线使用
 location ~ .*\.(gif|jpg|png|bmp|swf|pbf)$ {
      expires 10d;
 }
 
 # 使用expires缓存静态资源，缓存到客户端1天--发布上线使用
 location ~ .*\.(js|css)?$ {
    expires 1d;
 }

这个应用，一般在线上环境使用，开发环境建议关闭。

项目范例：

  
  upstream eduApi {
      server 192.168.101.74:9091; #v3
      # server edu-test04.edu.com:9091; # test
      # server edu-test01.edu.com:9091; # test
      # server 192.168.100.114:9091; # development
      # server 192.168.100.177:9091; # development
      # server jxsr-eye.educloud.cn; # online
  }
  upstream eduSocket {
      # server edu-dev01.edu.com:9092;
      # 开发环境
      # server 192.168.100.114:9092;
      # 测试环境
      server 192.168.100.27:9092;
  }

  server {
    client_max_body_size 100m;
    listen       8892;
#    server_name  aice;

    error_page  404              /404.html;

    error_page   500 502 503 504  /50x.html;
    location / {
      root   D:/code/PDT/Wonder_Front/dist;
			index  index.html index.htm;
      # 这个必须添加 路由模式为 History模式，防止请求问题404找不到
			try_files $uri $uri/ /index.html;
    }

	#root E:/work/edu/wonder_front;

	#index index.html index.htm index.php;

	# 配置接口网关
  location ^~ /rtdl-dev/ {
      proxy_pass  http://10.61.160.208:8080;
      proxy_redirect      default;
      proxy_set_header    Host    $host:$server_port;
      proxy_set_header    X-Real-IP $remote_addr;
      proxy_set_header    X-Forwarded-Host $host:$server_port;
      proxy_set_header    X-Forwarded-Server $host:$server_port;
      proxy_set_header    X-Forwarded-For  $proxy_add_x_forwarded_for;
  }
  
  # 系统层请求网关代理
  location ^~ /systemApi/ {
      proxy_pass  http://10.61.81.22:8080/;
      proxy_redirect      default;
      proxy_set_header    Host    $host:$server_port;
      proxy_set_header    X-Real-IP $remote_addr;
      proxy_set_header    X-Forwarded-Host $host:$server_port;
      proxy_set_header    X-Forwarded-Server $host:$server_port;
      proxy_set_header    X-Forwarded-For  $proxy_add_x_forwarded_for;
  }

  # 消息通信网关
  location ^~ /socket.io/ {
      proxy_pass http://eduSocket/socket.io/;
      proxy_http_version      1.1;
      proxy_set_header        Upgrade $http_upgrade;
      proxy_set_header        Connection      "upgrade";
      proxy_set_header        X-real-ip       $remote_addr;
      proxy_set_header        X-Forwarded-For $remote_addr;
  }  	
  }

总结：

前后端关于nginx的基本需要掌握的技能，已经罗列出来。

我们来个扩展的小玩意

扩展

写个本地的bat脚本来，启动nginx和关闭nginx，这个的使用是针对开发环境 winodw下的，不用自己手动启停，忒麻烦

前后端都应该知道的Nginx技能

1、启动的比较好弄，找到nginx的根目录，找nginx.exe，右键快捷方式到桌面即可

2、停止，创建stopNginx.bat

@echo off

::windows 2000,98
::tskill /A nginx > nul

::windows xp above:

taskkill /F /IM nginx.exe > nul

exit

转载自:https://juejin.cn/post/7140578836273430558