nginx solves the problem of slow image display and incomplete download

nginx solves the problem of slow image display and incomplete download

Written in front

Recently, a reader told me that when he accessed his server through a browser, the images were displayed so slowly that they could not be fully loaded in the browser. When downloading files, it was even more annoying because the files could not be fully downloaded at all. And the strange thing is that there is no problem with the network this reader is on. So I started helping him troubleshoot various problems. . .

Problem location

After a series of investigations (I will omit the intermediate process and write the key points directly!), it was finally located that the problem was Nginx. When I opened the reader's website backend management system, I found that the images were displayed very slowly and the following error message was found on the Nginx front-end proxy.

[error] 28423#0: *5 connect() failed (111: Connection refused) while connecting to upstream

I used the IP address of the backend server to access the service directly and found that the speed was quite fast, so I suspected that it was a problem with the Nginx configuration.

Note: When downloading large attachments or large images on the page, the download will be interrupted or the image cannot be displayed. Maybe you will say that I have never encountered such a problem with the default configuration of Nginx! What I want to say is: that's because your website doesn't have large files, at least not large enough to be loaded using Nginx's default configuration.

Here, I give a section of Nginx configuration, as shown below.

location /file {
	 root /home/file;
	 index index.html index.htm;
	 proxy_set_header X-Real-IP $remote_addr;
	 proxy_set_header Host $host;
	 proxy_pass http://127.0.0.1:8080 ;
	 client_max_body_size 100m;
	 client_body_buffer_size 128k;
	 proxy_connect_timeout 600;
	 proxy_read_timeout 600;
	 proxy_send_timeout 600;
	 proxy_buffer_size 32k;
	 proxy_buffers 4 64k;
	 proxy_busy_buffers_size 64k;
	 proxy_temp_file_write_size 64k;
}

Several important parameters are listed below.

  • proxy_connect_timeout 600; #Nginx connection timeout with backend server (proxy connection timeout)
  • proxy_read_timeout 600; #After the connection is successful, the backend server response time (proxy reception timeout)
  • proxy_send_timeout 600; #Backend server data return time (proxy send timeout)
  • proxy_buffer_size 32k; #Set the buffer size of the proxy server (nginx) to save user header information
  • proxy_buffers 4 32k; #proxy_buffers buffer, if the average web page size is below 32k, set it like this
  • proxy_busy_buffers_size 64k; #buffer size under high load (proxy_buffers*2)
  • proxy_temp_file_write_size 16k; #Set the cache folder size. If it is larger than this value, the file will be transferred from the upstream server.

Seeing this, I found the problem. This reader's Nginx has the following line of configuration.

proxy_temp_file_write_size 16k;

The images on his server are basically between 100K and 5M.

The problem lies in proxy_temp_file_write_size. When the file on the server exceeds the size set by this parameter, Nginx will first write the file to a temporary directory (the default is the /proxy_temp directory under the Nginx installation directory). By default, Nginx is started as nobody. Using the ls -al command to view the proxy_temp directory, nobody is the owner of the proxy_temp directory. It's strange that there is no permission. Next, check the parent directory of proxy_temp, which is the Nginx installation directory. I found that nobody did not have permission, no wonder the above problem occurred.

Solving the problem

Once the problem is located, it will be easier to solve it. There are two ways to solve this problem, as shown below.

  • Set the proxy_temp directory so that anyone can write to it and restart Nginx to solve the problem.
  • Directly change the value of proxy_temp_file_write_size to a value larger than the size of the image and file, and restart Nginx.

If the problem is solved in the first way, for example, my proxy_temp directory is /usr/local/nginx/proxy_temp, use the following command to set the /usr/local/nginx/proxy_temp directory to be writable by anyone, and the problem is solved.

chmod -R 777 /usr/local/nginx/proxy_temp/

If you use the second method to solve the problem, you can directly modify the nginx.conf file as shown below.

location /file {
	 root /home/file;
	 index index.html index.htm;
	 proxy_set_header X-Real-IP $remote_addr;
	 proxy_set_header Host $host;
	 proxy_pass http://127.0.0.1:8080 ;
	 client_max_body_size 100m;
	 client_body_buffer_size 256k;
	 proxy_connect_timeout 1200;
	 proxy_read_timeout 1200;
	 proxy_send_timeout 6000;
	 proxy_buffer_size 32k;
	 proxy_buffers 4 64k;
	 proxy_busy_buffers_size 128k;
	 proxy_temp_file_write_size 10m;
}

Of course, I also helped this reader optimize some other configuration items.

Okay, let’s stop here for today! Don’t forget to like, follow and forward so that more people can see it, learn and improve together! !

The above is the details of how nginx solves the problem of slow image display and incomplete download. For more information about how nginx solves the problem of slow image display and incomplete download, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in:
  • Nginx+FastDFS to build an image server
  • How to build Nginx image server with Docker
  • How to use Nginx proxy to output scaled images
  • How to set up nginx image hotlink protection under centos server
  • How to configure nginx to access the image path and retrieve the html static page
  • Build a simple image server with nginx under Linux environment
  • Nginx image hotlink protection configuration example

<<:  JavaScript to implement the most complete code analysis of a simple shopping cart (ES6 object-oriented)

>>:  A possible bug when MySQL executes the sum function on the window function

Recommend

TCP performance tuning implementation principle and process analysis

Three-way handshake phase Number of retries for c...

CSS uses calc() to obtain the current visible screen height

First, let's take a look at the relative leng...

vue3 timestamp conversion (without using filters)

When vue2 converts timestamps, it generally uses ...

Record of the actual process of packaging and deployment of Vue project

Table of contents Preface 1. Preparation - Server...

The difference between this.$router and this.$route in Vue and the push() method

The official document states: By injecting the ro...

Implementation of Docker deployment of MySQL cluster

Disadvantages of single-node database Large-scale...

JavaScript dynamically generates a table with row deletion function

This article example shares the specific code of ...

Design Theory: A Method to Understand People's Hearts

<br />Once, Foyin and Mr. Dongpo were chatti...

A simple method to implement scheduled backup of MySQL database in Linux

Here are the detailed steps: 1. Check the disk sp...

Navicat cannot create function solution sharing

The first time I wrote a MySQL FUNCTION, I kept g...

nuxt.js multiple environment variable configuration

Table of contents 1. Introduction 2. Scenario 3. ...