Nginx has some amazing features that you don’t know about!

SpringBoot e-Commerce project mall (25K + STAR) address: github.com/macrozheng/…

Abstract

This article will explain the use of Nginx in Docker environment from the reverse proxy, file compression, address rewrite three aspects!

Installation in Docker environment

Download the nginx docker image

Docker pull nginx:1.10 copy codeCopy the code

Copy the nginx configuration from the container

• Run the container first (to copy configuration files) :

docker run -p 80:80 --name nginx \
-v /mydata/nginx/html:/usr/share/nginx/html \
-v /mydata/nginx/logs:/var/log/nginx  \
-dNginx :1.10 Copy codeCopy the code

• Copy the configuration file in the container to the specified directory:

Docker container cp nginx:/etc/nginx /mydata/nginx/ copy codeCopy the code

• Change the file name:

Mv Nginx conf Copies the codeCopy the code

• Terminating and deleting containers:

Docker stop nginx docker rm nginx copy codeCopy the code

Use the docker command to start

docker run -p 80:80 --name nginx \
-v /mydata/nginx/html:/usr/share/nginx/html \
-v /mydata/nginx/logs:/var/log/nginx  \
-v /mydata/nginx/conf:/etc/nginx \
-dNginx :1.10 Copy codeCopy the code

The reverse proxy

Reverse proxy means that when a request is made to your proxy server, the proxy server forwards the request, either to a static resource path or to a dynamic service interface. Let’s take the domain name proxy as an example to talk about how to carry out static proxy and dynamic proxy.

Static agent

Static proxy is to delegate requests to different static resource paths. Here we delegate requests for docs.macrozheng.com to my documents project and requests for Mall.macrozheng.com to mall’s front end project.

• First let’s modify the local host file:

Docs.macrozheng.com 192.168.6.132 mall.macrozheng.com Copy codeCopy the code

• Then upload our document project and mall front end project to nginx’s HTML directory and unzip it:

• in/mydata/nginx/conf/conf.dAdd the configuration file docs. Conf to the folder to reverse proxy the document project:

server {
    listen       80;
    server_name  docs.macrozheng.com; # change domain name

    location / {
        root   /usr/share/nginx/html/docs; Delegate to the docs folderindex index.html index.htm; } error_page 500 502 503 504 /50x.html; location = /50x.html { root /usr/share/nginx/html; }} Copy the codeCopy the code

• in/mydata/nginx/conf/conf.dAdd the configuration file mall. Conf to the folder to reverse proxy the front-end items of the mall:

server {
    listen       80;
    server_name  mall.macrozheng.com; # change domain name

    location / {
        root   /usr/share/nginx/html/mall; Delegate to the mall folderindex index.html index.htm; } error_page 500 502 503 504 /50x.html; location = /50x.html { root /usr/share/nginx/html; }} Copy the codeCopy the code

• Restart the nginx service:

Docker restart nginx copy codeCopy the code

• throughdocs.macrozheng.comTo access our documentation project:

• throughmall.macrozheng.comTo access the mall’s front end project:

A dynamic proxy

Dynamic proxy is a proxy server that forwards requests to another service. Here we proxy requests to api.macrozheng.com to the mall-admin backend service.

• First let’s modify the host file and add the following rules:

Api.macrozheng.com copy codeCopy the code

• in/mydata/nginx/conf/conf.dAdd the configuration file api.conf to the folder to broker the request to the remote mall-admin service:

server {
    listen       80;
    server_name  api.macrozheng.com; # change domain nameLocation / {proxy_pass http://120.27.63.9:8080;Change to proxy service addressindex index.html index.htm; } error_page 500 502 503 504 /50x.html; location = /50x.html { root /usr/share/nginx/html; }} Copy the codeCopy the code

• After restarting the nginx service, theapi.macrozheng.com/swagger-ui.htmlTo access the API documentation page of the mall-admin interface:

File compression

If you rent a server with low bandwidth and the site is slow to access, you can speed up the site by enabling GZIP compression on nginx. Here we use mall’s front end project as an example to demonstrate its speed up effect.

• First, we limit the speed of nginx to 128K per connection to establish a slower access scenario.

• Modify the mall. Conf configuration file to perform rate limiting operations:

server {
    listen       80;
    server_name  mall.macrozheng.com;
    
    limit_rate 128k; Limit network speed to 128Klocation / { root /usr/share/nginx/html/mall; index index.html index.htm; } error_page 500 502 503 504 /50x.html; location = /50x.html { root /usr/share/nginx/html; }} Copy the codeCopy the code

• Front end project for mallmall.macrozheng.comWe can find that there is a large JS file in the website, which needs to load 12s:

• Nginx returns the following request header:

• Modify the/mydata/nginx/confIn the directorynginx.confConfiguration file, enable GZIP compression;

http {

    gzip on; # open gzip
    gzip_disable "msie6"; #IE6 does not use gZIP
    gzip_vary on; # Set to on will add "Vary: accept-encoding "to the Header
    gzip_proxied any; Proxy result data compression
    gzip_comp_level 6; #gzip compression ratio (1~9), the smaller the compression effect is worse, but the larger the processing is slower, so generally take the middle value
    gzip_buffers 16 8k; Get how much memory is used to cache compressed resultsGzip_http_version 1.1;Identify the version of the HTTP protocol
    gzip_min_length 1k; # set the minimum number of bytes allowed for page compression. Files exceeding 1K will be compressed
    gzip_types application/javascript text/css; For specific MIME types,js and CSS files will be compressedinclude /etc/nginx/conf.d/*.conf; } Duplicate codeCopy the code

• Again on mall’s front end projectmall.macrozheng.comWe can find that the js file has been compressed, the loading time is shortened to 3.88s, about 3 times faster:

• Nginx returns a request header to addContent-Encoding: gzipInformation:

Address rewrite

Sometimes we change the domain name of the site, but there are still users using the old domain name, then we can use nginx address rewriting to allow users to jump to the new domain name for access.

• For example, the domain docs.macrozheng.com is no longer used, but now www.macrozheng.com is used to access document projects.

• Modify the docs. Conf configuration file to rewrite the address with parameters to the new address:

server {
    listen       80;
    server_name  docs.macrozheng.com; 
    
    rewrite "^ / (. *) $" http://www.macrozheng.com/The $1; Rewrite the address to the new addresslocation / { root /usr/share/nginx/html/docs; index index.html index.htm; } error_page 500 502 503 504 /50x.html; location = /50x.html { root /usr/share/nginx/html; }} Copy the codeCopy the code

• Access the old domain at this pointdocs.macrozheng.comIt jumps directly towww.macrozheng.comGo to.