What is Nginx

Nginx is a lightweight Web/reverse proxy server and email (IMAP/POP3) proxy server.

Structure and extension: one main process and multiple worker processes. Worker processes are single-threaded and do not require special authorization to run;

Support for hot loading (because of the above features, nginx does not need to restart, very harmonious replacement of the worker process)

Master is the main thread that assigns tasks to worker processes. Worker is the worker process. There can be multiple processes.

What is Nginx used for

  • The reverse proxy
  • Load balancing
  • Forward agent
  • HTTP server (including static/static separation)

1. Reverse proxy

Explanation: it is a proxy server. The server obtains resources from one or more groups of associated back-end servers (such as Web servers) according to the client’s request, and then returns these resources to the client. The client only knows the IP address of the reverse proxy, but does not know the existence of the server cluster behind the proxy server.

Common solutions: The service port where front-end files reside is different from the service port where back-end files reside, causing cross-domain access. Load balancing

🌰 :The first kind of:

Description of parameter Meanings: proxy_set_header Host $Host; // Obtain the real host of the client

proxy_set_header X-Real-IP $remote_addr; // Set $remote_addr to the client’s Real IP address. The x-real-ip value defaults to the IP address of the last hop of the HTTP request (the client IP of the TCP connection).

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; // Obtain the real CLIENT IP address

The standard format is as follows:

X-Forwarded-For: client1, proxy1, proxy2

This header is Forwarded to Forwarded-For. Each item is separated by a comma (,). The first item is the IP address of the real client, and the rest are IP addresses of the forwarded-for proxy or load balancer.

The second,(This can achieve more functions) :

2. Load balancing

The task is distributed to multiple operation units, such as the Web server, FTP server, enterprise critical application server, and other critical task servers, to jointly complete the task.

In load balancing configuration, you need to configure a reverse proxy to switch to load balancing

🌰 :

3. Forward proxy

Explanation: The client sends a request to the agent and specifies the target (the original server), then the agent forwards the request to the original server and returns the obtained content to the client.

use: Over the wall, fortress machine

The difference between reverse proxy and forward proxy:

Forward proxy: sent only by the client. The client knows the IP address of the target server and has a proxy server to help it obtain resources

Reverse proxy: Obtains a specified resource from a proxy server, regardless of where the resource comes from. The proxy server obtains the resource from another server

4.HTTP server (including static/static separation)

Dynamic and static separation is to make dynamic web pages in the dynamic website according to certain rules to the constant resources and often changed resources, dynamic and static resources split, we can do it according to the characteristics of static resources cache operation, this is the core idea of static site processing. Usually packaged deployment files are static resources

Purpose: static resources directly access to use, dynamic resources for server processing, reduce unnecessary server consumption 🌰 :

server {
    listen 80;

    All static requests are handled by Nginx and stored in HTML
    location ~ \.(gif|jpg|jpeg|png|bmp|swf|css|js)$ {
        root    e:\wwwroot;
    }
    All dynamic requests are forwarded to Tomcat for processing
    location ~ \.(jsp|do)$ {
        proxy_passhttp://test; }}Copy the code

Nginx configuates the basic content of location

Order no priority: (location =) > (location ^~ path) > (location, * regular order) > (location partial start path) > (/)

Four types of matching rules:

  1. Perfect match (=)
  2. Regular match without regular (^(^ means “not”,Means “regular”)

After a match, stop searching down for the re and use this one. 3. Regular expression match (or) ~ indicates case-sensitive regular match; ~ indicates case-insensitive regular matching. 4. Ordinary matching

Note: Regular path matching and regular path matching have a lot of details and can be very error prone, need to try more practice.

The difference between root and alias, and the impact of slashes on paths

# visit: http://www.test.com/work-order/
server {
        listen       80;
        server_name  www.test.com;

        location^ ~ /work-order/ {
                root   basePath/test/;
                index  index.html index.htm;
            }

        location^ ~ /work-order/ {
                alias   basePath/test/;
                index  index.html index.html
            }
       In practice, two identical matches will result in an error} Note: Nginx handles root in all paths with // :'basePath/test/' + '/work-order/'+ '/index.html' = basePath/test//work-order//index.html alias:'basePath/test/''+'/index. The HTML = basePath/test / / index. The HTMLCopy the code

A common problem solved by Nginx vue history mode refresh page appears blank page (404)

Nginx solution 🌰 :

location / {
        root  /dist;
        index  index.html index.htm;
        error_page 404 /index.html; # does the same thing as the following line
        error_page 404 try_files $uri $uri/ /index.html;
        # $uri: request file path; $uri/: Path to the requested directory
}
Copy the code
A 404 will occur when you visit http://www.test.com/work-order-release/home, and no resource will be matched.  1.error_page 404 /work-order-release/index.html; Visit http://www.test.com/work-order-release/index.html 2. Match ^~ /work-order-release render HTML /work-order-release/index.html (vue file) 3. Vue goes to /home based on the http://www.test.com/work-order-release/home route and accesses the /home path correctlyCopy the code

Whether 404 has a/case

Error_page 404 / : localhost:8080:work-order/home

root

location ^~ /work-order/ {

        root   basePath/test/;
        index  index.html index.htm;
        error_page  404           /work-order/index.html; // Or the following method
        error_page  404           try_files $uri $uri/ /index.html; // $uri: request file path; $uri/: Request directory path} status200: basePath/test//work-order//index.html
status 404: basePath/test//work-order/index.html/starts with basePath

location ^~ /work-order/ {
        root   basePath/test/;
        index  index.html index.htm;
        error_page  404           /wen/index.html;
      }
status 200: basePath/test//work-order//index.html
status 404: basePathLocalhost :8080:wen does not match /work-order. // localhost:8080:wen does not match /work-order
Copy the code

alias

location ^~ /work-order {
       alias   basePath/test/work/;
       index  index.html index.htm;
       error_page  404         /work-order/index.html;
     }

status 200: basePath/test//work//index.html
status 404: basePath/test//work/index.html /work-order/index.html; The/indicates that the replacement starts after basePath

location ^~ /work-order {
       alias   basePath/test/work/;
       index  index.html index.htm;
       error_page  404           /wen/index.html;
     }

status 200: basePath/test//work//index.html
status 404: basePathLocalhost :8080:wen does not match /work-order. // localhost:8080:wen does not match /work-order
Copy the code

Error_page 404 does not start with a /, and is sent to localhost:8080:work-order, 404 to localhost:8080:work-order/home

root

location ^~ /work-order/ {

        root   basePath/test/;
        index  index.html index.htm;
        error_page  404           work-order/index.html;
      }
status 200: basePath/test//work-order//index.html
status 404: basePath/test//work-order/work-order/work-order/ index.html There is no/to indicate the relative path because it has been 404 so /work-order/work-order/ wen

location ^~ /work-order/ {
        root   basePath/test/;
        index  index.html index.htm;
        error_page  404           wen/index.html;
      }
status 200: basePath/test//work-order//index.html
status 404: basePath/test/ / / the work - the order/wen wen wen/index. The HTML no/said relative paths in the beginning, because has 404 / wen wen/wen
Copy the code

alias

location ^~ /work-order {
       alias   basePath/test/work/;
       index  index.html index.htm;
       error_page  404     work-order/index.html
     }

status 200: basePath/test//work//index.html
status 404: basePath/test//work/work-order/work-order/work-order/index.html; There is no/to indicate the relative path, since 404 always, so /work-order/work-work-order/wen

location ^~ /work-order {
       alias   basePath/test/work/;
       index  index.html index.htm;
       error_page  404           wen/index.html;
     }

status 200: basePath/test//work//index.html
status 404: basePath/test/ / work / / wen wen, wen wen/index. The HTML/beginning representative from basePath after replacement Because have been 404 / wen wen/wen
Copy the code

Four, a few actual 🌰 son

Note: Nginx has many built-in parameters

Jump to the corresponding home page based on PC and mobile terminal

location^ ~ /static/ {
  root E:/workspace/test/dist/;
  index index.html index.htm;
}

location / {
    # Default PC access to content
    set $flag "pc";
    # If it is a mobile phone to access the content
    if ( $http_user_agent ~* "Mobile") {
        set $flag "m";
    }
    root   E:/workspace/test/dist/$flag/;
    index  index.html index.htm;
}
Copy the code

Resolve CORS(Cross-domain Request Processing)

server {
    listen       80;
    server_name  localhost;

    set $cors_origin "*";
    set $cors_cred   "true";
    set $cors_header "authToken,Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,X-Requested-With,Cookie";
    set $cors_method "POST, GET, PUT, OPTIONS, DELETE, PATCH";
    add_header Access-Control-Allow-Origin      $cors_origin;
    add_header Access-Control-Allow-Credentials $cors_cred;
    add_header Access-Control-Allow-Headers     $cors_header;
    add_header Access-Control-Allow-Methods     $cors_method;

    # Front-end code
    location / {
        root  /dist;
        indexindex.html index.htm; }}Copy the code