Nginx + Tomcat realizes the separation of request dynamic data and request static resources

preface

The last blog post explained the role of Nginx in application architecture and the idea of load balancing. The operations to access static and dynamic resources in this exercise 1.

1. Understand the difference between accessing static resources and accessing dynamic resources

Static resource: refers to the data stored in the hard disk, fixed data, do not need to calculate the data.

For example: pictures, fonts, js files, css files and so on. When a user accesses static resources, the server returns those resources directly to the user's computer.

Dynamic resource: refers to the data that needs to be returned by the server according to the user's operation, as well as the data stored in the database, after 1 series of logical calculation.

Such as: request tomorrow's weather information data, request to see the account balance.

2. The need to separate the request for dynamic data from the request for static resources

The Tomcat application server is used to handle the Servlet container and JSP. Although it can also handle the HTML and other 1 series static resources, it is not as efficient as Nginx. And there is already a lot of pressure on the Servlet container and JSP operations, which can result in a lot of wasted performance if not separated. At the end of the day, when it comes to applying services, follow one principle -- one service does one thing. Do dynamic requests only if you want to do dynamic requests, and static requests only if you want to do static requests to improve performance.

What we want to do is, when the user accesses the static resource, let Nginx return the static resource to the user; When a user accesses a dynamic resource, the access is directed to the Tomcat application server, where Tomcat returns the data to Nginx, and Nginx returns it to the user.

3. Nginx configuration method

In this section, I will not explain the parameters in the Nginx configuration file. If you need to know the Nginx configuration file moving step here.

1 instruction if you do not know the location of the configuration file:

sudo find / -name nginx.conf

Be good at making use of Linux instruction, and you will fall in love with Linux.

To start with a full configuration:

# user www www;
user root root;

worker_processes 2; # Set the value and CPU The core number 1 to 

error_log /home/zuoyu/ServerComputer/nginx/logs/nginx_error.log crit; # Log location and log level 


pid /home/zuoyu/ServerComputer/nginx/nginx.pid;

worker_rlimit_nofile 65535;

events {
 # use epoll Model improves performance 
 use epoll;
 # Maximum number of connections per process 
 worker_connections 65535;
}


http {
 # Extension and file type mapping table 
 include mime.types;
 # The default type 
 default_type application/octet-stream;

 log_format main '$remote_addr - $remote_user [$time_local] "$request" '
   '$status $body_bytes_sent "$http_referer" '
   '"$http_user_agent" "$http_x_forwarded_for"';

 client_header_buffer_size 32k;
 large_client_header_buffers 4 32k;
 client_max_body_size 8m;
 types_hash_max_size 2048;
 types_hash_bucket_size 128;
 
 sendfile on;
 tcp_nopush on;
 keepalive_timeout 60;
 tcp_nodelay on;
 fastcgi_connect_timeout 300;
 fastcgi_send_timeout 300;
 fastcgi_read_timeout 300;
 fastcgi_buffer_size 64k;
 fastcgi_buffers 4 64k;
 fastcgi_busy_buffers_size 128k;
 fastcgi_temp_file_write_size 128k;
 #  Decompression transmission 
 gzip on; 
 gzip_min_length 1k;
 gzip_buffers 4 16k;
 gzip_http_version 1.0;
 gzip_comp_level 2;
 gzip_types text/plain application/x-javascript text/css application/xml;
 gzip_vary on;

 # Load balancing group 
 # Static server group 
 upstream static.zuoyu.com {
 server localhost:81;
 }

 # Dynamic server group 
 upstream dynamic.zuoyu.com {
 server localhost:8080;
 # server localhost:8081;
 # server localhost:8082;
 # server localhost:8083;
 }

 # Configure proxy parameters 
 proxy_redirect off;
 proxy_set_header HOST $host;
 proxy_set_header X-Real-IP $remote_addr;
 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 # client_max_body_size 10m;
 client_body_buffer_size 128k;
 proxy_connect_timeout 90;
 proxy_send_timeout 90;
 proxy_read_timeout 90;
 proxy_buffer_size 16k;
 proxy_buffers 4 32k;
 proxy_busy_buffers_size 64k;
 proxy_temp_file_write_size 64k;
 
 # Cache configuration 
 proxy_cache_key '$host:$server_port$request_uri';
 # proxy_temp_file_write_size 64k;
 proxy_temp_path /home/zuoyu/ServerComputer/nginx/proxy_temp_path;
 proxy_cache_path /home/zuoyu/ServerComputer/nginx/proxy_cache_path levels=1:2 keys_zone=cache_one:200m inactive=5d max_size=1g;
 proxy_ignore_headers X-Accel-Expires Expires Cache-Control Set-Cookie;

 # Static resource host 
 server {
 listen 81;
 server_name localhost_0;
 charset utf8;

 location / {
  root /home/zuoyu/Public/NginxStaticSource/static;
 }
 }
 #  The following is server Virtual host configuration 
 server {
 listen 80;# Listen on port 
 server_name localhost_1;# The domain name 
 charset utf8;

 location / {
  # root /usr/share/nginx/html;
  proxy_pass http://dynamic.zuoyu.com;
  index index.html index.jsp;
 }


 location ~ .*\.(jsp|do|action)$
 {
  index index.jsp;
  proxy_pass http://dynamic.zuoyu.com;
  
 }

 

 location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|ico|svg)$
 {
  # The cache 30 day 
  expires 30d;
  proxy_pass http://static.zuoyu.com;
  proxy_cache cache_one;
  proxy_cache_valid 200 304 302 5d;
  proxy_cache_valid any 5d;
  proxy_cache_key '$host:$server_port$request_uri';
  add_header X-Cache '$upstream_cache_status from $host';
 }

 location ~ .*\.(ttf|woff|woff2)$
 {
  # The cache 30 day 
  expires 30d;
  proxy_pass http://static.zuoyu.com;
  proxy_cache cache_one;
  proxy_cache_valid 200 304 302 5d;
  proxy_cache_valid any 5d;
  proxy_cache_key '$host:$server_port$request_uri';
  add_header X-Cache '$upstream_cache_status from $host';
 }

 location ~ .*\.(js|css)$
 {
  # The cache 7 day 
  expires 7d;
  proxy_pass http://static.zuoyu.com;
  proxy_cache cache_one;
  proxy_cache_valid 200 304 302 5d;
  proxy_cache_valid any 5d;
  proxy_cache_key '$host:$server_port$request_uri';
  add_header X-Cache '$upstream_cache_status from $host';
 }

 # Reverse proxy to other pages tomcat The container 
 location ~ .*$ {
  index index.jsp index.html;
  proxy_pass http://dynamic.zuoyu.com;
 }
 access_log off; 
 error_page 500 502 503 504 /50x.html;

 location = /50x.html {
  root /usr/share/nginx/html;
 }
 } 
}

In this configuration file, it includes not only the separation of static and dynamic access, but also caching, resource compression, and load balancing. Only static and dynamic resources are analyzed here:

Static resource allocation

Take the example of accessing images:

location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|ico|svg)$
  {
   root /home/zuoyu/Public/NginxStaticSource/static; 
  }

When you visit the virtual host location: 80, when access to the file type, go to root/home/zuoyu/Public/NginxStaticSource/static/directory lookup, such as you want to visit root/home/zuoyu/Public/NginxStaticSource/static/img/background png this picture, So you only need to location: 80 / img background png can access to the file;

In my configuration, I set up another host to configure the static resource path, so as to avoid changing the directory of static resources to change a lot of places once, just modify the host path can be achieved. You can change the above image configuration to

location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|ico|svg)$
  {
   proxy_pass http://localhost:81;
  }

This greatly improves flexibility and makes it easier to implement during load balancing. Note: the static resource host configuration must be placed on top of the core host to be effective.

Dynamic data configuration

Let's take the example of accessing the JSP page, the do request, and the action request

location ~ .*\.(jsp|do|action)$
  {
   index index.jsp;
   proxy_pass http://localhost:8080;
   
  }

This configuration tells the Nginx server that when there is a request with the jsp, do, action suffixes, the request is passed to localhost:8080; This host handles, the home page of this host is index.jsp, this is called the reverse proxy. Here design to 1 concept - proxy and reverse proxy; Agents usually need to be configured on the client side to forward requests to the proxy server that would otherwise be sent. The reverse proxy is configured on the server to forward requests that would otherwise be sent to the server to the proxy server.

Give Tomcat all the requests that need to be processed by Tomcat application server, and let Nginx handle the rest. If you need other servers, you can reconfigure ok.

In this way, the static and static separation is realized. When the user's browser loads the page, the css files, js files, font styles, images, etc., will be taken out of the local hard disk by the Nginx server and returned to the user's browser. The user name and other information will be handed over by nginx to Tomcat for processing and then returned to Nginx. Nginx will be returned to the user's browser.

Fear what truth is infinite, into an inch into an inch of joy.

conclusion