关于前端:前端必会的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
实时读取服务器你上配置，生成我的项目名与端口的映射
反对主动部署

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

1.介绍

2.装置

执行地址（启动，重启）

配置地址

编译参数

3.日志

内置变量

4.动态页面

解读下初始配置

5.具体利用

5.1 跨域（反向代理）

5.2 性能优化

1.3 防盗链

1.4 负载平衡

负载平衡策略

1.5 rewrite

6.可视化配置

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

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

7.2 解决方案

评论

发表回复取消回复

更多文章

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

深入解析：基于Delta的线性数据结构模型，打造高效富文本编辑器

轻松管理社交媒体：使用Automa插件实现一键拉黑功能

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

1.介绍

2.装置

执行地址（启动，重启）

配置地址

编译参数

3.日志

内置变量

4.动态页面

解读下初始配置

5.具体利用

5.1 跨域（反向代理）

5.2 性能优化

1.3 防盗链

1.4 负载平衡

负载平衡策略

1.5 rewrite

6.可视化配置

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

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

7.2 解决方案

评论

发表回复 取消回复

更多文章

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

深入解析：基于Delta的线性数据结构模型，打造高效富文本编辑器

轻松管理社交媒体：使用Automa插件实现一键拉黑功能

发表回复取消回复