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

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

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

前端为什么要学：

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

举荐还是通过 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 来查一下所有的相干门路。这些不是固定的，咱们能够在装置的时候指定这些参数进行编译装置。具体的能够网上查一下。

资源的拜访，是会产生日志的，日志分两种，胜利拜访日志和失败日志
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	用户代理

/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 {#}
#    }

}

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

缓存 expiress

location ~ .*\.(jpg|png|gif)$ {
    expires 24h;
    gzip on ;
}

压缩 gzip
gzip 开启后的标记，响应头外面：

Content-Encoding: gzip

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;
    }


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

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;
        }
   
}

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

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

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

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

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

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

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

1. 介绍

2. 装置

执行地址（启动，重启）

配置地址

编译参数

3. 日志

内置变量

4. 动态页面

解读下初始配置

5. 具体利用

5.1 跨域（反向代理）

5.2 性能优化

1.3 防盗链

1.4 负载平衡

负载平衡策略

1.5 rewrite

6. 可视化配置

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

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

7.2 解决方案