Thanks to the booming development of front-end technology and your own continuous efforts, a lot of people have been able to open up the two channels, to do the front and back end. You are gods in your own procedural world, where you can do anything, create the world, make rules and logic. When a world belongs to you is ready, you need to show it to friends, publish it to people, and let the people who love you appreciate it. At this point we need a powerful server as a container, and Nginx can fulfill all your fantasies.

Course Description:

This course covers the use and configuration of Nginx in detail, including text tutorials and video tutorials. Of course, you don’t have to pay a dime, it’s all free, and you just have to remember http://jspang.com to watch this tutorial.

Because the technology fat is not a professional lecturer, or a front end programmer, so just make a own use of sharing, inevitably there are wrong or not rigorous, please correct.

The video is at the end of the article and can be viewed directly at the end of the article if necessary.

Section 01: Introduction to Nginx and environment preparation

As a front end, I’m sure you’ve heard of Nginx. Because it’s been so popular in the last two years that if you don’t know Nginx as a front end, you don’t dare tell people you’re a big front end. So what exactly is Nginx? Let’s just quote the official introduction:

“Nginx is a lightweight HTTP server with an event-driven asynchronous non-blocking processing framework that gives it excellent IO performance and is often used for reverse proxy and load balancing on the server side.”

The advantages of Nginx

  • Supports massive and high concurrency: Uses Epoll for IO multiplexing. The official test of Nginx can support 50,000 concurrent connections, the actual production environment can support 20,000 to 40,000 concurrent connections.
  • Low memory consumption: Nginx currently has the lowest memory consumption of any major server. For example, with Nginx+PHP, starting 10 Nginx processes with 30,000 concurrent connections consumes 150M of memory.
  • Free for commercial use: Nginx is open source software that uses the 2-clause BSD-like protocol and can be used for free and commercial use.
  • Simple configuration file: Network and program configuration is easy to understand, even non-professional operation and maintenance can understand.

Of course, there are many other aspects of it, such as the reverse proxy function, load balancing function, which we will cover in this article, I will not tell you about here.

Nginx is very popular right now: as you can see from https://w3techs.com/, Nginx is the second most popular server, but it is the fastest growing site, with 39.7% share.

Why study this article

As a front end, you all have some experience with Nginx, so why study that? No system: before you may only configure a certain function (online collection), are fragments of knowledge, did not form a system. As a result, when you have problems with your service, it’s hard to know where to start.

In this article, I will try to explain to you systematically according to functions and levels, so that you can basically be competent for the configuration, operation and maintenance of Nginx.

** Learning environment **

You have three choices of learning environment:

  • Oneself look for a computer to build: need oneself to have idle computer or server, the advantage is stability is high, controllable ability is strong, study more convenient.
  • Buying Aliyun ECS: it costs little money. I choose Aliyun Student ECS, which is 9.5 yuan per month.
  • Use virtual software: this if the computer configuration is high, you can install virtual software, the disadvantage is trouble, affect computer performance, and configuration is more.

I chose ariyun’s ECS because I was lazy, but I thought it was the most efficient.

Below is a group of friends to provide a preferential price of Ali Cloud.

Play campus ecology, only 9.5 yuan a month, you can buy at your discretion. Promotion.aliyun.com/ntms/act/ca…

(I won’t go into too much Linux knowledge here, if you are not familiar with this, you can catch up.)

I am using the 64-bit version of CentOS 7.4.

Use yum to install the necessary programs

If you are familiar with Linux, you must have already installed these programs using yum, but if you are not familiar with Linux, you can install them directly using YUM. (And then their own Baidu the use of these things, here do not do too much introduction, as long as it can be done)

yum -y install gcc gcc-c++ autoconf pcre-devel make automake
yum -y install wget httpd-tools vim
Copy the code

Build directory

In fact, you can not build this directory, but that your system will be very messy, not conducive to the future operation and maintenance. So HERE I create the following catalogue according to my own preferences.

The steps are as follows (this step is based on your preference) :

  1. After entering the system, a file is created in the directoryjspangFolder.
  2. To go to the jspang folder, run thecd jspang.
  3. Use mkdir to create eachapp.backup.download.logs.workFolder.

We’ll stop there for this tutorial and start installing Nginx next time.

Section 02: Quick build of Nginx

My article is to pay attention to the hands-on operation, and light theory, because the technology fat this half-cock has not been able to tell the theoretical knowledge better than the book, so the theory part you can baidu consult or read a book to learn (need to explain that the technology fat does not mean that the theory is not important).

Nginx version description

  • Mainline version: a development version intended for Nginx enthusiasts, testing, research, and learning, but not recommended for production use.
  • Stable version: A Stable version. This version is generally more mature, after a long period of update testing, so this version is also the mainstream version.
  • Legacy version: The historical version, if you need the previous version, Nginx also provides.

After understanding the differences between these three versions, you can use them clearly.

Install Nginx using Yum

To check whether yum already exists, run the following command:

yum list | grep nginx
Copy the code

If something like the following appears, the yum source exists.

(If you are careful, you can find that the original source of the system only supports the 1.1.12 version, which is a little low)

If it does not exist, or is not the version you need, then we can configure the yum source, the following is the source provided by the official website, we can rest assured that bold use.

[nginx]
name=nginx repo
baseurl=http://nginx.org/packages/OS/OSRELEASE/$basearch/
gpgcheck=0
enabled=1
Copy the code

Copy the code above and type:

vim /etc/yum.repos.d/nginx.repo
Copy the code

And then I’m going to copy the code in, and you’re going to need some knowledge of how Vim works, and if you’re not familiar with it, you can learn it yourself, and I’ll do that in the video.

After the assignment is complete, you need to change the operating system and version number, because MY centos and version 7, so this.

baseurl=http://nginx.org/packages/centos/7/$basearch/
Copy the code

You can change it depending on your system or the version you need.

If you have everything ready, you can start the installation. The installation command is very simple:

yum install nginx
Copy the code

After the installation is complete, you can run commands to check the version of Nginx.

nginx -v
Copy the code

If the following image appears, Nginx has been installed successfully.

Here you have the latest version of Nginx installed on Linux, which is a very good start. You have to do it. You can’t do it. You have to do it.

Section 03: The Nginx basic configuration file

Now that Nginx is installed, the task is to learn how to configure and use it. Personally enjoy this process, it is like a horse full of wild blood BMW, you now have to do is to tame it. Both the result and the process are so beautiful.

Check the installation directory of Nginx

After you install Nginx using yum, you need to know which files are on your system and where they are installed. To view this, run the following command:

rpm -ql nginx
Copy the code

RPM is the Linux RPM package management tool. -q stands for query mode and -l stands for return list, so we can find all the nginx installation locations.

The list is quite extensive, so we’ll try to explain it to you, but we’ll start this section by looking at the important documents.

Nginx. conf file

The nginx.conf file is the total nginx configuration file, which is often adjusted when we set up the server.

Go to the etc/nginx directory and open it with vim

cd /etc/nginx
vim nginx.conf
Copy the code

Below is a detailed comment on the file. I have commented almost every sentence, so you can configure it according to your needs.

# Run user, default is nginx, can not set
user  nginx;
#Nginx process, normally set to the same number of CPU cores
worker_processes  1;   
# Error log directory
error_log  /var/log/nginx/error.log warn;
# Location where process PID is stored
pid        /var/run/nginx.pid;


events {
    worker_connections  1024; # Maximum number of concurrent requests for a single background process
}


http {
    include       /etc/nginx/mime.types;   # File extension and type mapping table
    default_type  application/octet-stream;  Default file type
    Set log mode
    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;   #nginx access log location

    sendfile        on;   # Enable efficient transmission mode
    #tcp_nopush on; # Reduce the number of network segments

    keepalive_timeout  65;  The duration of the connection, also called timeout

    #gzip on; # Enable gzip compression

    include /etc/nginx/conf.d/*.conf; # Contains the child configuration item location and file
Copy the code

We see that there is a subfile configuration item at the end of the default.conf configuration item, so let’s open the include subfile configuration item and see what it contains.

Go to the conf.d directory and use vim default.conf to view it.

server {
    listen       80;   Configure the listening portserver_name localhost; // Configure the domain name#charset koi8-r;     
    #access_log /var/log/nginx/host.access.log main;

    location / {
        root   /usr/share/nginx/html;     Service default startup directory
        index  index.html index.htm;    # Default access file
    }

    #error_page 404 /404.html; Configure the 404 page

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;   # Error status code display page, need to restart after configuration
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ \.php$ {
    # proxy_pass http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ \.php$ {
    # root html;
    # fastcgi_pass 127.0.0.1:9000;
    # fastcgi_index index.php;
    # fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
    # include fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    # deny all;
    #}
}

Copy the code

With these configuration items in mind, we know that our service directory is located under /usr/share/nginx/html. We can use the command to go to the directory and have a look at the files in this directory.

cd /usr/share/nginx/html
ls 
Copy the code

You can see two files under the directory, 50x.html and index.html. We can use Vim for editing.

At this point, as you might expect, our Nginx server can already provide a server for HTML. We can open a browser, access the IP address and give it a try.

Alicloud security group configuration

If you are using Aliyun, remember to open the port to the ECS instance.

The steps are as follows:

  1. Go to the Ali Cloud console and find the ECS instance.
  2. Click “More” after the instance
  3. Click Network and Security Groups, then Click Security Group Configuration.
  4. Add Security Group Configuration in the upper right corner.
  5. Set port 80, as shown in the figure.

At this point we can navigate to the page of the application. End of this section, see the following picture page, you are configured successfully.

Section 04: Nginx service starts, stops, and restarts

After the first three sections, nginx has been installed. During maintenance, the most common operations we do are to start, restart, and stop Nginx. In this tutorial, we’ll look at some of the most common Nginx operations.

Start the Nginx service

By default, Nginx does not start automatically. You need to start it manually, and there is no single way to start Nginx.

Nginx starts directly

In CentOS7.4 (earlier versions are not available), it is possible to start the service directly using nginx.

nginx
Copy the code

Start using the systemctl command

You can also use a Linux command to start, I generally use this method. In this way, no matter what service is started, it is the same, just change the name of the service (no additional memory points).

systemctl start nginx.service
Copy the code

How do we know where the Nginx service has been started? You can use the combined commands of Linux to query the health of a service.

ps aux | grep nginx
Copy the code

If the startup is successful, something similar to the following is displayed.

These three records indicate that Nginx has been started properly.

Four ways to stop the Nginx service

There are many ways to stop Nginx, and you can take different approaches depending on your needs. Let’s explain one by one.

  • Stop service immediately
nginx  -s stop
Copy the code

This approach is tough, stopping the process whether it is working or not.

  • Leisurely out of service
nginx -s quit
Copy the code

This approach is gentler than stop, requiring the process to complete its current work before stopping.

  • The killall method kills the process

This method is also a bit more brutal, we kill the process directly, but it’s better to use this method when it doesn’t work above.

killall nginx
Copy the code
  • Systemctl stop
systemctl stop nginx.service
Copy the code

Restart the Nginx service

Sometimes you need to restart the Nginx service, using the following command.

systemctl restart nginx.service
Copy the code

Reload the configuration file

After you have rewritten or modified the Nginx configuration file, you need to reload it, and you can use the command given by Nginx.

nginx -s reload
Copy the code

Viewing the Port number

By default, Nginx starts by listening on port 80 to provide HTTP access, and fails to start if port 80 is already occupied. You can run the netstat -tlnp command to check whether the port number is occupied.

** Summary :** Although the content of this class is simple, it is often used in our work. I hope that friends can contact with each other more. One of the main reasons why I divided the course into such details is that I hope it can be convenient to refer to it in work.

Section 05: Custom error pages and access Settings

A good website is armed to the teeth, with user-friendly tips for any errors. For example, when the website encountered the page was not found, we should prompt the page was not found, and give the user the return. There are many types of errors, so really good products will give customers different results.

Multiple errors to the same page

In the/etc/nginx/conf. D/default conf is can see the words below.

error_page   500 502 503 504  /50x.html;
Copy the code

The error_page directive is used to customize the error page. 500,502,503,504 are the most common error codes in HTTP, and /50.html is used to indicate that any of the errors specified above will be handled in the /50.html file in the root directory of the web site.

Top handling for errors alone

Sometimes these error pages need to be displayed separately to give the user a better experience. So set up a different page for each error code. The setting method is as follows:

error_page 404  /404_error.html;
Copy the code

Then go to the website directory and create a new 404_error.html file and write some information.

<html>
<meta charset="UTF-8"> <body> <h1>404 page not found! </h1> </body> </html>Copy the code

Then restart our service and visit again, you will see that the 404 page has changed.

Replace the error code with an address

When handling errors, you can use not only the resources of your own server, but also external resources. Let’s say we set the configuration file like this.

error_page  404 http://jspang.com;
Copy the code

We used techfat’s blog address as a hint that the 404 page was not found, so we made a jump to techfat’s blog without finding the file.

Simple access control

Sometimes our server only allows specific hosts to access, such as internal OA system, or application management background system, or some application interfaces, at this time we need to control some IP access, we can directly configure in the location.

This can be configured directly in default.conf.

Location / {deny 123.9.51.42; Allow 45.76.202.231; }Copy the code

Once the configuration is complete, restart the server to restrict and allow access. This is very common at work, so keep it in mind.

Section 06: Nginx access more on this

In the last lesson, we have briefly exposed the simple usage of Nginx access, simply know that, deny is to deny access, allow is to allow access. However, Nginx access control is more complex, and we will cover it in detail in this lesson.

Instruction priority

Let’s look at the code first:

Location / {allow 45.76.202.231; deny all; }Copy the code

The preceding configuration indicates that only IP address 45.76.202.231 is allowed to access. Other IP addresses are forbidden. But what happens if we move the deny ALL directive before allow 45.76.202.231? You will find that all IP addresses are not allowed to access. This illustrates a problem: for two permissions under the same block, the first one will override the second one.

Complex access control permission matching

In work, access control requirements are more complex. For example, for the IMG (image directory) under the website, all users are allowed to access, but for the admin directory under the website, only the internal fixed IP address is allowed to access. In this case, only the two directives deny and allow cannot be implemented. We need the Location block to do the related requirements matching.

For the above requirements, the configuration code is as follows:

    location =/img{
        allow all;
    }
    location =/admin{
        deny all;
    }
Copy the code

The = sign represents an exact match, and the use of = is an exact match based on the pattern that follows. This is directly related to the security of our website, must learn.

Use regular expressions to set access permissions

For example, now we want to ban access to all PHP pages. PHP pages are mostly background management or interface code. Therefore, for security purposes, we often want to ban access to all users and only open access to internal companies.

The code is as follows:

 location ~\.php$ {
        deny all;
    }
Copy the code

So when we access it again, we can’t access the file that ends in PHP. Does it make the website a lot safer?

Section 07: Nginx sets up the virtual host

Virtual host refers to the partition of multiple disk space on a physical host server. Each disk space is a virtual host. Each virtual host can provide external Web services without interfering with each other. Outsiders, virtual host is a stand-alone server host, this means that users will be able to use the different virtual host domain name site deployed on the same server, and don’t have to resume a website alone buy one server, solve the problem of the maintenance of server technology, both at the same time, greatly saving the server hardware costs and associated maintenance costs.

You can configure a virtual host based on port, IP, or domain name. In this lesson, we will first learn to configure a virtual host based on port number.

Configure the virtual host based on the port number

Configuring a virtual host based on a port number is one of the simplest ways in Nginx. The idea is that Nginx listens on multiple ports to identify different sites based on different port numbers.

We can direct configuration in the main file/etc/nginx/nginx. Conf file, also can be configured in the configuration file/etc/nginx/conf. D/default. Conf. I’m going to put it in a subfile for easy configuration. You can also create a new file in the conf.d folder.

Modify the server option in the configuration file so that there are two servers.

server{
        listen 8001;
        server_name localhost;
        root /usr/share/nginx/html/html8001;
        index index.html;
}
Copy the code

In the usr/share/nginx/HTML/html8001 / directory index. The HTML file and view the results.

<h1>welcome port 8001</h1>
Copy the code

Finally, access the address and the address with the port respectively in the browser. The results are different.

And then we can visit http://112.74.164.244:8001 in the browser, of course, your IP is not the same as the affirmation, the IP will be out of date in a few days.

IP based virtual host

The IP – based and port – based configurations are almost the same, just set the server_name option to IP.

For example, the above configuration can be modified as:

server{
        listen 80;
        server_name 112.74.164.244;
        root /usr/share/nginx/html/html8001;
        index index.html;
}
Copy the code

This demonstration requires multiple IP support, because our Ali ECS only provides one IP, so we will not show you here, if used in the work, as long as the installation of this method configuration can be.

Section 08: Nginx uses domain names to set up virtual hosts

In a real online environment, a website needs a domain name and a public IP address to be accessible. This is also a more real lesson, we in the actual work of the configuration is the most set up this virtual host.

If you don’t have a domain name, I hope you can register one. You can register a domain name with your full name. There are plenty of domain names available. Only a few dozen yuan a year, this is not only to study this course, more importantly, a domain name will be a lot of benefits to your career development. For example, if you want to make your own program to show others, you want to create a blog, or you want to conduct a test program, these need the domain name support. So if you’re a programmer, I highly recommend you get your own domain name.

Here I use my own blog domain name as an example.

The domain name must be resolved first so that it can be correctly located to the IP address you need. I have created two new parses here, which are:

  • Nginx.jspang.com: This domain maps to the default Nginx home page location.
  • Nginx2.jspang.com: This domain name maps to the original location of port 8001.

Configure virtual hosts based on domain names

We modify the /etc/nginx/conf. d directory default.conf file to change the original port 80 virtual host to the domain name partition virtual host. The code is as follows:

server {
    listen       80;
    server_name  nginx.jspang.com;
Copy the code

Conf file 8001. Conf in the same directory as 8001.

server{ listen 80; server_name nginx2.jspang.com; location / { root /usr/share/nginx/html/html8001; index index.html index.htm; }}Copy the code

And then we’re going to do a smooth reboot, and we’re going to go to these two pages in the browser.

In fact, domain name setting virtual host is very simple, the main operation is the configuration file server_NAME item, but also need to resolve the cooperation of domain name. Make sure you practice. Later courses may not be so easy.

Section 09: Nginx reverse proxy setup

Virtual host learning completed, as a front-end will be a skill is reverse proxy. As you all know, our current Web mode is based on the standard CS structure, that is, Client to Server. A proxy is a Server that is added between the Client and Server to provide a specific function. This Server is called a proxy Server.

** Forward proxies: ** If reverse proxies are hard to understand, learn about forward proxies first. I’m sure that as a programmer with far faster hands than normal, you’ve used a wall climbing tool (and I’m not talking about a physical ladder here), which is a typical positive proxy tool. What it does is it forwards a web request from a server that we don’t want access to to a proxy server that can access the site, which is called a proxy server, and forwards it to the client. Let me draw a picture to help you understand.

You want access to the target server, but you don’t have access. In this case, the proxy server has access to the server, and you have access to the proxy server, and then you can access the proxy server, and the proxy server accesses the real server, and bring the content to you.

** Reverse proxy: ** Reverse proxy is the opposite of proxy (need to note, now almost all large web pages are using reverse proxy), the client sent a request, want to access the content on the server server. The sent content is sent to the proxy server, which in turn sends the request to its own internal servers, where the user really wants the content.

From the comparison of the pictures, we should see some differences. Here, the proxy server does not proxy the client, but the server, that is, it provides a unified proxy entry to the external client, and all client requests must go through the proxy server first. Access to that server is controlled by Nginx. To put it more simply, a general proxy is the client of the proxy, and a reverse proxy is the server of the proxy.

The uses and benefits of reverse proxies

  • Security: The client of the forward proxy can access any website while hiding its own information, which poses a great threat to the network security proxy. Therefore, we must protect the server. Using the reverse proxy client, users can only access the proxy server through the external network, and users do not know which real server they are accessing, which can provide good security protection.
  • Functionality: The main purpose of the reverse proxy is to provide debt balancing, caching, and other functions for multiple servers. Load balancing is when the content of a website is deployed on several servers. These machines can be regarded as a cluster. Then Nginx can “evenly” distribute the received client requests to all servers in the cluster, so as to realize the average distribution of server pressure, also called load balancing.

Simplest reverse proxy

Now we’re going to go to http://nginx2.jspang.com and reverse proxy to jspang.com. We directly to the/etc/nginx/con. The d / 8001. Conf.

The modified configuration file is as follows:

server{ listen 80; server_name nginx2.jspang.com; location / { proxy_pass http://jspang.com; }}Copy the code

Generally we are a reverse proxy IP, but I proxy here a domain name is also possible. In fact, at this time our reverse proxy is successful, we can open http://nginx2.jspang.com in the browser to test. (A detailed demonstration is available in the video.)

Other reverse proxy instructions

There are also some common reverse proxy instructions, I give you here:

  • Proxy_set_header: Changes the request header information from the client before sending the client request to the back-end server.

  • Proxy_connect_timeout: specifies the timeout period for Nginx to attempt to establish a connection with the back-end proxy server.

  • Proxy_read_timeout: specifies the timeout period that Nginx waits for after sending a read request to the back-end server group.

  • Proxy_send_timeout: specifies the timeout period that Nginx waits for after sending a write request to the back-end server group.

  • Proxy_redirect: used to change Location and Refresh in the response header returned by the back-end server.

Section 10: Nginx for PC or mobile devices

Many websites now have PC and H5 sites because they can display different pages with better experience depending on the customer’s device.

Some people say that such requirements can be solved with self-adaptation, such as bootstrap and 24-grid layout, which we often say. These are indeed very good solutions, but in terms of complexity and ease of use, they are not as good as those written separately, such as taobao and JINGdong…… Instead of adapting, these large sites are built separately.

How do you configure Nginx to identify which pages should be displayed separately? That’s what we’re going to learn in this lesson.

$http_user_agent

Nginx uses the built-in variable $http_user_agent to obtain the userAgent of the requesting client, which can determine whether the user is currently on mobile or PC, and then display different pages to the user.

The operation steps are as follows:

  1. Create two folders under /usr/share/nginx/: PC directory and mobile directory
cd /usr/share/nginx
mkdir pc
mkdir mobile
Copy the code
  1. In the PC and miblic directories, create two new index. HTML files with the following contents
<h1>I am pc! </h1>Copy the code
<h1>I am mobile! </h1>Copy the code
  1. Enter theetc/nginx/conf.dConf file 8001.conf to the following format:
server{
        listen 80;
        server_name nginx2.jspang.com;
        location / {
         root /usr/share/nginx/pc;
         if ($http_user_agent~ *'(Android|webOS|iPhone|iPod|BlackBerry)') { root /usr/share/nginx/mobile; } index index.html; }}Copy the code

I’m going to go through this code in a video, but if you’re interested, check it out, it’s all free.

Section 11: Gzip compression configuration for Nginx

Gzip is a web page compression technology. After Gzip compression, pages can be 30% or less of their original size. Smaller web pages give users a better and faster browsing experience. The implementation of GZIP web compression requires browser and server support.

As you can see from the figure above, GZIP needs support from both server and browser colleagues. When a browser supports GZIP compression, it includes accept-encoding :gzip in the request message, so Nginx sends the browser what it has heard from GZIP, adding content-encoding :gzip in the header, stating that it is after gZIP. Tell the browser to unzip it before parsing the output.

Configuration items of GZIP

Nginx provides a specialized gZIP module, and the instructions in the module are very rich.

  • Gzip: This directive is used to enable or disable the gzip module.
  • Gzip_buffers: Sets the number of units of caching that the system obtains to store gZIP compression result data streams.
  • Gzip_comp_level: indicates the gZIP compression ratio. The compression levels range from 1 to 9. 1 is the lowest and 9 is the highest. The higher the compression level, the higher the compression ratio and the longer the compression time.
  • Gzip_disable: You can use this command to disable compression for certain user-agents.
  • Gzip_min_length: Sets the minimum page bytes that are allowed to be compressed. The page bytes are obtained from the content-length of the corresponding message header.
  • Gzip_http_version: identifies the HTTP protocol version, which can be 1.1. Or 1.0.
  • Gzip_proxied: Set to enable or disable gZIP compression of content received from the proxy server.
  • Gzip_vary: Used to add Vary: accept-encoding to the response header to enable the proxy server to recognize whether gZIP compression is enabled based on accept-encoding in the request header.

The simplest configuration for Gzip

http { ..... gzip on; gzip_types text/plain application/javascript text/css; . }Copy the code

Gzip on is the gizp-enabled module, and the following line is used to compress the output of text, JavaScript, and CSS files when a web page is accessed by the client.

Once configured, we can restart the Nginx service and let our gizp take effect.

If you are a Windows operating system, you can press F12 to open the developer tool, select Headers for the current request, and view the HTTP response Headers. You can clearly see that content-Encoding is gzip.

When you see this, we have successfully opened gzip.

So far, our update is over temporarily, this is just an introduction tutorial, friends can continue to learn, Nginx has a lot of third-party modules, I will continue to share the opportunity in the future.

Video list:

  • Section 01: Introduction to Nginx and environment preparation: v.qq.com/x/page/m073…
  • Section 02: Quick setup of Nginx: v.qq.com/x/page/e073…
  • Section 03 :Nginx basic configuration file details: v.qq.com/x/page/j074…
  • Section 04 :Nginx service start, stop, restart: v.qq.com/x/page/k074…
  • Section 05: Custom error pages and access Settings: v.qq.com/x/page/p075…
  • Section 06 :Nginx access
  • Section 07 :Nginx setup virtual host: v.qq.com/x/page/d076…
  • Section 08 :Nginx uses domain name for hosting: v.qq.com/x/page/i076…
  • Section 09 :Nginx reverse proxy setup: v.qq.com/x/page/b076…
  • Section 10 :Nginx for PC or mobile: v.qq.com/x/page/l076…
  • Section 11 :Nginx Gzip configuration: v.qq.com/x/page/u077…