preface

Good attitude, not so tired. In a good mood, all you see is beautiful scenery.

"If you can't solve a problem for a while, use this opportunity to see your limitations and put yourself out of order." As the old saying goes, it's easy to let go. If you are distracted by something, learn to disconnect. Cut out the paranoia, the trash in the community, and get rid of the negative energy. Good attitude, not so tired. In a good mood, all you see is beautiful scenery.

What is static separation

Static separation: will projectCSS, JS, HTML, JPG'. Static resources andJSP, FTL “and other dynamic resources separate processing of a way

Advantages of static and static separation

  1. Different files are handled by different servers, which makes the system architecture clearer and easier to maintain. > 2. Enhanced user experience by improving server response speed.

Static and static separation configuration

findThe nginxIn the installation directoryThe CONF directoryTo open the directorynginx.confEdit the file and add the following configuration:

#user nobody; # Number of nginx processes. It is recommended that the value be set to the total number of CPU cores. worker_processes 4; #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info; #pid logs/nginx.pid; Events {#nginx work mode, epoll is a Linux platform efficient mode #use epoll; # set the maximum number of connections per nginx process to 51200. } # include mime.types; Default_type application/octet-stream; # default file type #charset UTF-8; # Server_names_hash_bucket_size 128; Client_header_buffer_size 32K; Large_client_header_buffers 4 64K; Client_max_body_size 8m; 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 logs/access.log main; sendfile on; Sendfile specifies whether nginx calls sendFile to output files. Set it to ON for common applications. Set it to off for heavy load applications such as downloading disk I/O to balance disk and network I/O processing speed and reduce system load. Note: Change this to off if the image does not display properly. autoindex on; # Enable directory list access, suitable for download server, default disabled. tcp_nopush on; Tcp_nodelay on; Keepalive_timeout 65; FastCGI Parameters are used to improve site performance: reduce resource usage and increase access speed. The following parameters can be understood literally. 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; #gzip module set gzip on; Gzip_min_length 1k; Gzip_buffers 4 16k; # Compress buffer gzip_http_version 1.0; Gzip_comp_level 2; Gzip_types text/plain Application/X-javascript text/ CSS application/ XML; The default compression type already contains text/ HTML, so there is no need to write it below. There will be no problem writing it, but there will be a WARN. gzip_vary on; #limit_zone crawler $binary_remote_addr 10m; Server {listen 80; server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; location / { root static; index index.html index.htm; proxy_redirect off; proxy_set_header X-Real-IP $remote_addr; Http_forwarded_for this server is forwarded_forwarded_for. If the forwarded_forwarded_for is forwarded_forwarded_for, the forwarded_forwarded_for is forwarded_forwarded_for. # Here are some optional reverse proxy configurations. proxy_set_header Host $host; client_max_body_size 10m; Client_body_buffer_size 128K; Proxy_connect_timeout 90; #nginx connection timeout proxy_send_timeout 90; Proxy_read_timeout 90; Proxy_buffer_size 4K; proxy_buffer_size 4k; # change the buffer size of the proxy server (nginx). #proxy_buffers, page average set below 32K proxy_busY_buffers_size 64K; Proxy_temp_file_write_size 64K; # set the cache folder size to greater than this value. Upstream: sends static files to nginx from the upstream server. All static files are read directly by Nginx without the Tomcat or resin location .*.(htm|html|gif|jpg|jpeg|png|bmp|swf|ioc|rar|zip|txt|flv|mid|doc|ppt|pdf|xls|mp3|wma)$ { root static; expires 15d; } # JS and CSS cache time set the location ~. * \. (JS) | CSS? $ { root static; expires 1h; } # NginxStatus {#stub_status on; #access_log on; #auth_basic "NginxStatus"; #auth_basic_user_file conf/htpasswd; The contents of the #htpasswd file can be generated using the htpasswd tool provided by Apache. # #} all JSP pages to a tomcat or resin processing location ~. (JSP | JSPX | do)? $ { proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; Proxy_pass http://127.0.0.1:8080; } #error_page 404 /404.html; # redirect server error pages to the static page /50x.html # error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } # another virtual host using mix of IP-, name-, and port-based configuration # #server { # listen 8000; # listen somename:8080; # server_name somename alias another.alias; # location / { # root html; # index index.html index.htm; # } #} # HTTPS server # #server { # listen 443 ssl; # server_name localhost; # ssl_certificate cert.pem; # ssl_certificate_key cert.key; # ssl_session_cache shared:SSL:1m; # ssl_session_timeout 5m; # ssl_ciphers HIGH:! aNULL:! MD5; # ssl_prefer_server_ciphers on; # location / { # root html; # index index.html index.htm; # #}}}Copy the code

Static and static separation test

First of all instaticThe directory contains some static resource files, as shown below:

Then switch CMD path to nginx directory restart nginx server nginx -s reload, open firefox browser to access the website: http://localhost/js/XX.js, F12 open mode tool, you can see file storage time. The static resource file is obtained directly from the disk, the response header has the cache-control field, and the static resource request time is 0ms. This js file needs to be referenced in the project JSP file, you can write it as follows

<script type="text/javascript" src="/js/xx.js"></script>

🎉 summary:

  • For more references, see here:The Blog of Chan Wing Kai

  • Like the small partner of the blogger can add a concern, a thumbs-up oh, continue to update hey hey!