Many of the problems we encounter in our work are related to Nginx, such as cross-domain problems, request filtering, configuration of GZIP, load balancing, or problems with static resource servers.

Although Nginx is typically configured by operations and we do not configure it directly, it is important to understand the role it plays in our online applications and to know how to troubleshoot problems.

So what exactly is NGINX?

What is NGINX

Nginx is a lightweight Web server and reverse proxy server. It is widely used in Internet projects because of its small memory footprint, extremely fast startup and high concurrency ability.

The above diagram Outlines the role Nginx plays in overall browsing, a bit like an entry gateway. Nginx is a high-performance reverse proxy server, so what is a reverse proxy and what is a forward proxy?

1. Forward Proxy

Due to the firewall, we can not directly access www.google.com, so we need to use VPN to complete this visit. From this example, we can find that the so-called forward proxy, the proxy is the client, the client knows what he is accessing, but the target server does not know whether it is receiving the proxy or from the real client.

The official explanation:

Is a server located between the client and the origin server. In order to get content from the origin server, the client sends a request to the proxy and specifies the target (the origin server). The proxy then forwards the request to the original server and returns the obtained content to the client. The client can use the forward proxy.

2. Reverse proxy

As can be seen from the figure, when we visit www.baidu.com from the external network, we will make a forwarding and proxy to the internal network. So reverse proxies are actually proxies on the server side, and the process is transparent to the client side.

The official explanation:

The reverse proxy server is located between the user and the target server, but for the user, the reverse proxy server is equivalent to the target server, that is, the user directly access the reverse proxy server can obtain the resources of the target server.

The basic configuration of Nginx

The following diagram shows the basic structure of the Nginx configuration file:

Among them:

Main: Global configuration of nginx, which takes effect globally
Events: Configuration affects the NGINX server or network connection to the user
HTTP: Nest multiple servers, configure proxies, cache, log definitions, etc., and configure the configuration of third party modules.
Upstream: Configuring the specific address of the back-end server is related to load balancing
Server: Configure the parameters related to the virtual host. There can be multiple servers in one HTTP
Location: Configure the routing of requests and the processing of various pages

Built-in variables

Three, cross – domain problems

1. Cross-domain definition

Browsers have a same-origin policy for security reasons. That is, if there is a difference in protocol, domain name, or port, it is cross-domain.

2. How does Nginx solve cross-domain problems

• The domain name of the front-end server: fast.dewu.com • The domain name of the back-end server: app.dewu.com

Without a proxy, making a request to app.dewu.com at fast.dewu.com is bound to cause cross-domain problems.

If you have NGINX use a proxy to set SERVE_NAME to FAST.DEWU.com, then set the appropriate location to intercept cross-domain requests from the front end, and then proxy the request back to APP.DEWU.com. The configuration is as follows:

{ listen 80; server_name fast.dewu.com; location / { proxy_pass app.dewu.com; }}

Fast.dewu.com accessing nginx in this way is a homologous access, and requests forwarded by nginx to the server do not trigger the browser’s homologous policy.

Request filtering

1. Status code filtering

error_page 500 501 502 503 504 506 /50x.html; Location = /50x.html {# Adapts the following path to the path where the HTML is stored. root /root/static/html; }

50x is the page where the error status code is displayed, followed by the address where the specific HTML is stored.

2. Filter by URL name

location / {
    rewrite  ^.*$ /index.html  redirect;
}

Here is the rewrite directive:

rewrite regex replacement [flag];

Here, regular is used to match the requested URL, and if the match is successful, replacement is used to change the URL. The final redirect means to return a 302 temporary redirect.

So here is the exact match URL, the URL that does not match all redirect to the home page.

3. Request type filtering

if ( $request_method ! ~ ^(GET|POST|HEAD)$ ) { return 403; }

Configure gzip

1. What is Gzip

Gzip, short for GNUZIP, was originally used for file compression on UNIX systems. GZIP encoding over the HTTP protocol is a technique used to improve the performance of Web applications. Both the Web server and the client (browser) must support GZIP. The current major browsers, Chrome, Firefox,IE and so on all support this protocol. Common servers such as Apache, Nginx, and IIS also support GZIP.

The GZIP compression ratio is about 3 to 10 times, which can greatly save the network bandwidth of the server. In practice, instead of compressing all files, you usually compress only static files.

2. Enable GZIP representation

Request header

Response headers

3. The nginx configuration

server{ gzip on; # to turn on or off gzip module gzip_buffers 32 4K; Set the system to obtain several units of the cache used to store the compressed result data stream of GZIP. gzip_comp_level 6; # Compression level, 1-10, the larger the number, the better the compression, the higher the compression level, the higher the compression rate, the longer the compression time. gzip_min_length 100; # Sets the minimum number of page bytes allowed to be compressed. The number of page bytes is obtained from the Content-Length of the corresponding header. gzip_types application/javascript text/css text/xml; gzip_disable "MSIE [1-6]\."; Gzip_proxied on: # Use to enable or disable GZIP compression for receiving content from the proxy server. Gzip_http_version 1.1; # Identifies the HTTP protocol version with a value of 1.1 or 1.0 GZIP_PROXIED: OFF; Use to enable or disable receiving GZIP compression of content from the proxy server. gzip_vary on; # Use to add Vary: Accept-Encoding to the response header to make the proxy server recognize whether GZIP compression is enabled or not based on the Accept-Encoding in the request header.

6. Load balancing

1. What is load balancing

Load balancing is a key component of a highly available network infrastructure, typically used to distribute workloads across multiple servers to improve the performance and reliability of Web sites, applications, databases, or other services.

A Web architecture without load balancing would look something like this:

In this case, the user is directly connected to the Web server, and if the server goes down, the user will have no access to it. In addition, if too many users try to access the server at the same time, more than it can handle, it may load slowly or fail to connect at all.

This failure can be mitigated by introducing a load balancer and at least one additional Web server on the back end. Typically, all back-end servers are guaranteed to serve the same content so that users receive the same content regardless of which server responds.

2. How does Nginx implement load balancing

Upstream specifies a list of back-end server addresses

Upstream balanceServer {server 10.1.22.33:12345; Server 10.1.22.34:12345; Server 10.1.22.35:12345; }

Intercept the response request in the Server and forward the request to the list of servers configured in Upstream.

server { server_name fe.server.com; listen 80; location /api { proxy_pass http://balanceServer; }}

3. Load balancing strategy

(1) Polling strategy (default)

Assign all client request polling to the server. This strategy works fine, but if one of the servers becomes too stressed and delays occur, it will affect all the users assigned to that server. The code is as above.

(2) Minimum connection number strategy

Prioritizing requests to less stressed servers balances the length of each queue and avoids adding more requests to stressed servers.

upstream balanceServer { 
  least_conn; 
  server 10.1.22.33:12345; 
  server 10.1.22.34:12345; 
  server 10.1.22.35:12345; 
  }

(3) Weight strategy

Specify the weight of different IP. The weight is positively correlated with the access ratio. The higher the weight is, the greater the access is.

Upstream balanceServer {server 192.168.0.1 weight=2; Server 192.168.0.2 weight = 8; }

(4) Client IP binding IP_HASH

The request from the same IP is always allocated to only one server, which effectively solves the problem of session sharing in dynamic web pages.

upstream balanceServer {
    ip_hash;
    server 10.1.22.33:12345;
    server 10.1.22.34:12345;
    server 10.1.22.35:12345;
}

(5) The fastest response time policy FAIR (third party)

Requests are prioritized to the fastest server, which relies on a third-party plugin called nginx-upstream-fair

upstream balanceServer {
    fair;
    server 10.1.22.33:12345;
    server 10.1.22.34:12345;
    server 10.1.22.35:12345;
}

(6) URL_HASH (third party)

The request is allocated according to the hash result of the accessed URL, so that each URL is directed to the same back-end server, which is more efficient for caching.

upstream balanceServer { 
  hash $request_uri; 
  server 192.168.244.1:8080; 
  server 192.168.244.2:8080; 
  server 192.168.244.3:8080; 
  server 192.168.244.4:8080; 
  }

4. Health check up

Nginx comes with ngx_http_upstream_module (health check module), which is essentially a server heartbeat check. It regularly polls the servers in the cluster to send health check requests to the servers in the cluster to check if any servers in the cluster are in abnormal state.

If an exception is detected on one of the servers, no Nginx reverse proxy requests from the client will be sent to that server (until the next health check is normal).

Upstream balanceServer{server 192.168.0.1 max_fails=1 fail_timeout=40s; Server 192.168.0.2 max_fails = 1 fail_timeout = 40 s; } server { listen 80; server_name localhost; location / { proxy_pass http://balanceServer; }}

Max_fails: sets the number of times that Nginx fails to communicate with the server. The default is: 1.

7. Static resource server

location ~* \.(png|gif|jpg|jpeg)$ { root /root/static/; autoindex on; access_log off; expires 10h; # Set expiration time to 10 hours}

Matching with the PNG | | GIF JPG | jpeg for the end of the request, and forwards the request to the local path, the path specified in the root namely nginx local path. You can also do some caching Settings.

Eight, access authority control

You can configure the NGINX whitelist to specify which IPs can access the server.

Location / {allow 192.168.0.1; # Allow this IP to be denied all; # disable all}

The article | Zhun spirit

Pay attention to the technology of things, hand in hand to the cloud technology

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Nginx is what front-end engineers need to know

What is NGINX

1. Forward Proxy

2. Reverse proxy

The basic configuration of Nginx

Built-in variables

Three, cross – domain problems

1. Cross-domain definition

2. How does Nginx solve cross-domain problems

Request filtering

1. Status code filtering

2. Filter by URL name

3. Request type filtering

Configure gzip

1. What is Gzip

2. Enable GZIP representation

3. The nginx configuration

6. Load balancing

1. What is load balancing

2. How does Nginx implement load balancing

3. Load balancing strategy

(1) Polling strategy (default)

(2) Minimum connection number strategy

(3) Weight strategy

(4) Client IP binding IP_HASH

(5) The fastest response time policy FAIR (third party)

(6) URL_HASH (third party)

4. Health check up

7. Static resource server

Eight, access authority control

Nginx is what front-end engineers need to know

What is NGINX

1. Forward Proxy

2. Reverse proxy

The basic configuration of Nginx

Built-in variables

Three, cross – domain problems

1. Cross-domain definition

2. How does Nginx solve cross-domain problems

Request filtering

1. Status code filtering

2. Filter by URL name

3. Request type filtering

Configure gzip

1. What is Gzip

2. Enable GZIP representation

3. The nginx configuration

6. Load balancing

1. What is load balancing

2. How does Nginx implement load balancing

3. Load balancing strategy

(1) Polling strategy (default)

(2) Minimum connection number strategy

(3) Weight strategy

(4) Client IP binding IP_HASH

(5) The fastest response time policy FAIR (third party)

(6) URL_HASH (third party)

4. Health check up

7. Static resource server

Eight, access authority control

Related Posts

When page rendering meets edge calculation

Webpack package optimization

TCP three times handshake four times wave explain