乐趣区

关于前端:前端必会的nginx配置可视化

1. 介绍

Nginx(发音同“engine X”)是异步框架的 web 服务器,也能够用作反向代理、负载平衡器和 HTTP 缓存。

特点:和 node 相似,Nginx 应用异步事件驱动的办法来解决申请,适宜解决 io 密集型场景

前端为什么要学:

    1. 测试环境须要本人部署
    1. 遇到网络问题,咱们要会排查问题,要有独立解决的能力
    1. 性能优化
    1. 上线的时候领导 ops 部署

2. 装置

举荐还是通过 yum 一键装置 (centos)
个别须要晓得两个地址,

  • 执行地址 /usr/local/bin 这里寄存着能够间接执行的二进制文件,用来启动或者重启 nginx (which nginx 查问)
  • 配置地址
    个别在 /usr/local/etc/nginx, 不同的装置形式可能有差别,然而装置的时候肯定会有信息显示 (nginx - t 查问)

执行地址(启动,重启)

启动 nginx

cd /use/local/sbin
./nginx

重启 nginx

cd /usr/sbin
nginx -s reload
或者间接 /usr/sbin/nginx -s reload

配置地址

nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok

在 /etc/nginx 外面 咱们能够看到有个文件叫 nginx.conf, 这个就是根底配置文件, 也能够说是大配置文件.
外面写了一句话 include /etc/nginx/conf.d/*.conf;
这就是说 nginx 会读 conf.d 外面的.conf 当做小配置文件 对于不同的我的项目咱们能够独自在小配置文件外面进行配置,这样构造更清晰,更易保护。

编译参数

咱们还能够用 nginx -V 来查一下所有的相干门路。这些不是固定的,咱们能够在装置的时候指定这些参数进行编译装置。具体的能够网上查一下。

3. 日志

资源的拜访,是会产生日志的,日志分两种,胜利拜访日志和失败日志
access_.log 拜访日志
error.log 谬误日志
咱们在 nginx.conf 外面能够看到 access 日志的目录, 以及日志的格局

咱们在/var/log/nginx/access 外面看一下,的确是按设定的格局返的

[roo@centos]# cat access.log

[roo@centos]# 111.206.87.56 – – [18/Aug/2021:17:42:47 +0800] “GET / HTTP/1.1” 200 4833 “-” “Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.131 Safari/537.36” “-“

tail -f /var/log/nginx/access.log  // 实时更新

内置变量

下面的 log_format 外面 有一些 $xxx 这玩意是 nginx 的内置变量,更具体的能够网上查一下

名称 含意
$remote_addr 客户端地址
$remote_user 客户端用户名称
$time_local 拜访工夫和时区
$request 申请的 URI 和 HTTP 协定
$http_host 申请地址,即浏览器中你输出的地址(IP 或域名)
$status HTTP 申请状态
$body_bytes_sent 发送给客户端文件内容大小
$http_user_agent 用户代理

4. 动态页面

解读下初始配置

/etc/nginx/nginx.conf

#   For more information on configuration, see:
#   * Official English Documentation: http://nginx.org/en/docs/
#   * Official Russian Documentation: http://nginx.org/ru/docs/

user root;  #设置 nginx 服务的零碎应用用户 
worker_processes auto; #工作过程数, 个别和 CPU 数量雷同 
error_log /var/log/nginx/error.log; #谬误日志地址
pid /run/nginx.pid; #谬误日志地址

# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf; # 模块化开发

events {worker_connections 1024; #每个过程容许的最大连接数}

http {log_format  main  '$remote_addr - $remote_user [$time_local]"$request"''$status $body_bytes_sent "$http_referer" ''"$http_user_agent""$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main; # main 日志

    sendfile            on; # 不通过用户内核
    tcp_nopush          on; # 攒一波再发
    # tcp_nodelay         on; # 不提早
    keepalive_timeout   65;  # 超时工夫
    types_hash_max_size 4096;
    gzip on;                 #决定是否开启 gzip 模块,on 示意开启,off 示意敞开;gzip_min_length 1k;      #设置容许压缩的页面最小字节(从 header 头的 Content-Length 中获取),当返回内容大于此值时才会应用 gzip 进行压缩, 以 K 为单位, 当值为 0 时,所有页面都进行压缩。倡议大于 1k
gzip_buffers 4 16k;      #设置 gzip 申请内存的大小, 其作用是按块大小的倍数申请内存空间,param2:int(k) 前面单位是 k。这里设置以 16k 为单位, 依照原始数据大小以 16k 为单位的 4 倍申请内存
gzip_http_version 1.1;   #辨认 http 协定的版本, 早起浏览器可能不反对 gzip 自解压, 用户会看到乱码
gzip_comp_level 2;       #设置 gzip 压缩等级,等级越底压缩速度越快文件压缩比越小,反之速度越慢文件压缩比越大;等级 1 -9,最小的压缩最快 然而耗费 cpu
gzip_types text/plain application/x-javascript text/css application/xml;    #设置须要压缩的 MIME 类型, 非设置值不进行压缩,即匹配压缩类型
gzip_vary on;    

    include             /etc/nginx/mime.types;  # 文件扩展名与类型映射表
    default_type        application/octet-stream;

    # Load modular configuration files from the /etc/nginx/conf.d directory.
    # See http://nginx.org/en/docs/ngx_core_module.html#include
    # for more information.
    include /etc/nginx/conf.d/*.conf; # 子配置
 
    server {
        listen       80;  #端口
        listen       [::]:80; # It is for the IPv6 configs
        server_name  _; 
        root         /usr/share/nginx/html; #根目录

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        error_page 404 /404.html;
        location = /404.html { }

        error_page 500 502 503 504 /50x.html;
        location = /50x.html {}}

# Settings for a TLS enabled server. ## 配置 https 的
#
#    server {
#        listen       443 ssl http2;
#        listen       [::]:443 ssl http2;
#        server_name  _;
#        root         /usr/share/nginx/html;
#
#        ssl_certificate "/etc/pki/nginx/server.crt";
#        ssl_certificate_key "/etc/pki/nginx/private/server.key";
#        ssl_session_cache shared:SSL:1m;
#        ssl_session_timeout  10m;
#        ssl_ciphers HIGH:!aNULL:!MD5;
#        ssl_prefer_server_ciphers on;
#
#        # Load configuration files for the default server block.
#        include /etc/nginx/default.d/*.conf;
#
#        error_page 404 /404.html;
#            location = /40x.html {#}
#
#        error_page 500 502 503 504 /50x.html;
#            location = /50x.html {#}
#    }

}

5. 具体利用

5.1 跨域(反向代理)

 location ~ /api {proxy_pass http://l-test9.dev.cn2.corp.xxx.cn:8080}

5.2 性能优化

  • 缓存 expiress
location ~ .*\.(jpg|png|gif)$ {
    expires 24h;
    gzip on ;
}
  • 压缩 gzip
    gzip 开启后的标记,响应头外面:
Content-Encoding: gzip

1.3 防盗链

location ~ .*\.(jpg|png|gif)$ {
        expires 1h;
        gzip off;
        gzip_http_version 1.1;
        gzip_comp_level 3;
        gzip_types image/jpeg image/png image/gif;
        # none 没有 refer blocked 非正式 HTTP 申请 特定 IP
+       valid_referers none blocked 47.104.184.134;
+       if ($invalid_referer) { # 验证通过为 0,不通过为 1
+           return 403;
+       }
        root /data/images;
    }

1.4 负载平衡


var http = require('http');
var server =http.createServer(function ( request ,response){response.end('server3 000');
} );
server.listen(3000 ,function(){console.log( 'HTTP 服务器启动中,端口:3000');
});
var server =http.createServer(function ( request ,response){response.end('server4 000');
} );
server.listen(4000 ,function(){console.log( 'HTTP 服务器启动中,端口:4000');
});
var server =http.createServer(function ( request ,response){response.end('server5 000');
} );
server.listen(5000 ,function(){console.log( 'HTTP 服务器启动中,端口:5000');
});

upstream fyy {
  server 127.0.0.1:3000 weight=10;
  server 127.0.0.1:4000;
  server 127.0.0.1:5000;
}

server {
    location / {proxy_pass http://fyy;}

负载平衡策略

类型 品种
轮询(默认) 每个申请按工夫程序逐个调配到不同的后端服务器,如果后端服务器 down 掉,能主动剔除
weight(加权轮询) 指定轮询几率,weight 和拜访比率成正比,用于后端服务器性能不均的状况
ip_hash 每个申请按拜访 ip 的 hash 后果调配,这样每个访客固定拜访一个后端服务器,能够解决 session 的问题
least_conn 哪个机器上连接数少就分发给谁
url_hash(第三方) 按拜访的 URL 地址来调配 申请,每个 URL 都定向到同一个后端 服务器上(缓存)
fair(第三方) 按后端服务器的响应工夫来调配申请,响应工夫短的优先调配
正定义 hash hash 自定义 key

1.5 rewrite

Port:9003 9004

  • 能够实现 url 重写及重定向

应用场景:url 页面跳转,保护,转发

比方手机 PC 的一个重定向

server {
        listen       9003;   # 这个是 pc 网页,然而如果用户代理是手机即便拜访 pc 站也会重定向到挪动端
        location / {if ($http_user_agent ~* '(Android|webOS|iPhone)') {rewrite  ^(.*)$ http://localhost:9004  break;
            } 
           
            root   /Users/fengyangyang/Desktop/nginx/pc;
            index  index.html index.htm;
        }
   
}

server {
        listen       9004; # 这个是手机网页
        location / {
            root   /Users/fengyangyang/Desktop/nginx/mobile;
            index  index.html index.htm;
        }
   
}

6. 可视化配置

传统的书写 Nginx 配置 学习操作老本比拟高
可视化配置:依据你的交互,抉择一些条件,动静生成 nginx 配置文件
比方我抉择的这个根底配置
nignxConfig
益处:比拟全,对前端裸露的货色比拟少(高度封装),学习成本低一点
害处:太全了,不灵便

7. 本人实现的一个可视化的工具

7.1 目前我的项目中存在的问题

测试环境
1. 测试服务器上我的项目太多,端口治理混轮:

  • 我的项目和端口的映射凌乱 —-> 找不到对应的端口(几十个我的项目谁能记住响应端口)
  • 我的项目和配置文件映射凌乱 —-> 找不到配置的中央(比方 A 我的项目的配置写到 B 我的项目配置里)

2. 服务器上实现各种操作比拟繁琐(新建批改我的项目配置)对前端程度也有肯定要求

7.2 解决方案

做了一个线上编辑 nginx 的工具
反对以下性能

  • 新建我的项目 输出我的项目名和端口 主动在服务器上生成相干配置并实现 nginx 重启
  • 反对在线批改服务器上的配置,改完主动重启 nginx
  • 实时读取服务器你上配置,生成我的项目名与端口的映射
  • 反对主动部署


退出移动版