The front-end must have nginx (configuration visualization)

1 Introduction

Nginx (pronounced with the "engine X") is an asynchronous framework Web server , can also be used reverse proxy , load balancer and HTTP caching .

Features: Similar to node, Nginx uses an asynchronous event-driven method to process requests, which is suitable for processing io-intensive scenarios

Why should the front end learn:

• 1. The test environment needs to be deployed by itself
• 2. When encountering network problems, we must be able to troubleshoot the problem and have the ability to solve it independently
• 3. performance optimization
• 4. Guide ops deployment when going online

2. Installation

It is recommended to install via yum with one click (centos)
Generally need to know two addresses,

• The execution address /usr/local/bin stores binary files that can be directly executed to start or restart nginx (which nginx query)
• configure address
Generally in /usr/local/etc/nginx, different installation methods may be different, but there will be information displayed (nginx -t query)

execution address (startup, restart)

start nginx

cd /use/local/sbin
./nginx

restart nginx

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

or service nginx restart /stop /start

configure address

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

In /etc/nginx, we can see that there is a file called nginx.conf, which is the basic configuration file, or a large configuration file.
There is a sentence in include /etc/nginx/conf.d/*.conf;
This means that nginx will read .conf in conf.d as a small configuration file. For different projects, we can configure it in the small configuration file separately, so that the structure is clearer and easier to maintain.

compile parameters

We can also use nginx -V to check all relevant paths. These are not fixed, we can specify these parameters during installation to compile and install. The specifics can be checked online.

3. Log

Access to resources will generate logs. There are two types of logs: successful access logs and failure logs.
access_.log access log
error.log error log
We can see the directory of the access log and the format of the log in nginx.conf

Let's take a look in /var/log/nginx/access, it is indeed returned according to the set format

[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  //实时更新

built-in variable

There are some $xxx in the above log_format. This stuff is a built-in variable of nginx. For more details, you can check it online.

name	meaning
$remote_addr	client address
$remote_user	Client Username
$time_local	Access time and time zone
$request	Requested URI and HTTP protocol
$http_host	The request address, which is the address (IP or domain name) you enter in the browser
$status	HTTP request status
$body_bytes_sent	The size of the file content sent to the client
$http_user_agent	user agent

4. Static pages

Interpret the initial configuration

/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. Specific applications

5.1 Cross-domain (reverse proxy)

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

5.2 Performance optimization

• cache expires

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

• compressed gzip
The flag after gzip is turned on, in the response header:

Content-Encoding: gzip

1.3 Anti-theft chain

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 Load Balancing

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

load balancing strategy

Types of	type
poll (default)	Each request is allocated to different back-end servers one by one in chronological order. If the back-end server goes down, it can be automatically eliminated
weight (weighted polling)	Specify the polling probability, and the weight is proportional to the access ratio, which is used when the performance of the backend server is uneven.
ip_hash	Each request is allocated according to the hash result of the access ip, so that each visitor can access a back-end server fixedly, which can solve the problem of session
least_conn	Whoever has fewer connections on which machine
url_hash (third party)	Distribute requests according to the URL address accessed, each URL is directed to the same backend server (cache)
fair (third party)	Requests are allocated according to the response time of the backend server, and those with short response times are given priority
positive definition hash	hash custom key

1.5 rewrite

Port:9003 9004

• Can realize url rewriting and redirection

Usage scenarios: url page jump, maintenance, forwarding

For example, a redirection of a mobile 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. Visual configuration

The traditional writing Nginx configuration learning operation cost is relatively high
Visual configuration: According to your interaction, select some conditions to dynamically generate nginx configuration files
For example, the basic configuration I chose
nignxConfig
Advantages: relatively complete, less exposed to the front end (highly encapsulated), lower learning cost
Disadvantage: too comprehensive, inflexible

7. A visualization tool implemented by yourself

7.1 Problems existing in the current project

test environment
1. There are too many projects on the test server, and the port management is mixed:

• The mapping of projects and ports is confusing ----> The corresponding port cannot be found (who can remember the corresponding port for dozens of projects)
• Project and configuration file mapping is confusing ----> can't find the place for configuration (for example, some people try to save trouble, the configuration of project A is directly written into the configuration of project B, and it is difficult for others to maintain it later)

2. It is cumbersome to complete various operations on the server (new and modified project configuration) also have certain requirements on the front-end level

7.2 Solutions

Made an online editing tool for nginx
The following functions are supported

• Create a new project Enter the project name and port to automatically generate the relevant configuration on the server and complete the nginx restart
• Support online modification of the configuration on the server, and automatically restart nginx after the modification
• Read the configuration on the server in real time, and generate the mapping between the project name and the port
• Support automatic deployment ( will be automatically created without the corresponding directory)





Advantages: unified maintenance and management, the front end does not need to directly contact the server, and the deployment efficiency is improved