一 動靜分離概述
1.1 動靜分離介紹
為了提高網站的響應速度,減輕程式伺服器(Tomcat,Jboss等)的負載,對於靜態資源,如圖片、js、css等檔案,可以在反向代理伺服器中進行快取,這樣瀏覽器在請求一個靜態資源時,代理伺服器就可以直接處理,而不用將請求轉發給後端伺服器。對於使用者請求的動態檔案,如servlet、jsp,則轉發給Tomcat,Jboss伺服器處理,這就是動靜分離。即動態檔案與靜態檔案的分離。
1.2 動靜分離原理
動靜分離可通過location對請求url進行匹配,將網站靜態資源(HTML,JavaScript,CSS,img等檔案)與後臺應用分開部署,提高使用者訪問靜態程式碼的速度,降低對後臺應用訪問。通常將靜態資源放到nginx中,動態資源轉發到tomcat伺服器中。
二 動靜分離實現--根據檔案字尾
2.1 環境準備
本實驗動靜分離主要是通過nginx+tomcat來實現,其中nginx01進行前端代理,同時本地處理css靜態檔案,nginx02處理圖片、html、JS等靜態檔案,tomcat處理jsp、servlet等動態請求。
2.2 建立靜態站點
1 [root@nginx02 ~]# mkdir /usr/share/nginx/staticrs/ 2 [root@nginx02 ~]# echo '<h1>Static_Web</h1>' > /usr/share/nginx/staticrs/index.html 3 [root@nginx02 ~]# ll /usr/share/nginx/staticrs/ #上傳示例圖片靜態資源 4 total 16K 5 -rw-r--r-- 1 root root 20 Jun 20 14:32 index.html 6 -rw-r--r-- 1 root root 11K Jun 20 14:35 nginx.jpg 7 [root@nginx02 ~]# mv /etc/nginx/conf.d/default.conf /etc/nginx/conf.d/default.conf.bak
1 [root@nginx02 ~]# vi /etc/nginx/conf.d/staticrs.conf 2 server { 3 listen 80; 4 server_name staticrs.linuxds.com; 5 access_log /var/log/nginx/staticrs.access.log main; 6 error_log /var/log/nginx/staticrs.error.log warn; 7 location / { 8 root /usr/share/nginx/staticrs; 9 index index.html; 10 } 11 }
1 [root@nginx02 ~]# nginx -t -c /etc/nginx/nginx.conf #檢查配置檔案 2 [root@nginx02 ~]# nginx -s reload #過載配置檔案
手動訪問後端靜態站點及資源:http://staticrs.linuxds.com/及http://staticrs.linuxds.com/nginx.jpg。
2.3 建立動態站點
1 [root@nginx03 ~]# yum install -y tomcat 2 [root@nginx03 ~]# mkdir -p /usr/share/tomcat/webapps/ROOT
1 [root@nginx03 ~]# vi /usr/share/tomcat/webapps/ROOT/javatest.jsp #構建動態測試頁面 2 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> 3 <HTML> 4 <HEAD> 5 <TITLE>JSP Test Page</TITLE> 6 </HEAD> 7 8 <BODY> 9 <% 10 Random rand = new Random(); 11 out.println("<h1>隨機數:<h1>"); 12 out.println(rand.nextInt(99)+100); 13 %> 14 </BODY> 15 </HTML>
1 [root@nginx03 ~]# systemctl start tomcat.service #啟動tomcat
手動訪問後端動態站點及資源:http://dynamic.linuxds.com:8080/javatest.jsp
2.4 配置前端動靜分離
1 [root@nginx01 ~]# mkdir -p /usr/share/nginx/dss 2 [root@nginx01 ~]# ll /usr/share/nginx/dss/ 3 total 4.0K 4 -rw-r--r-- 1 root root 1.9K Jun 20 18:10 test.css #模擬css
1 [root@nginx01 ~]# vi /etc/nginx/conf.d/dss.conf #配置Dynamic-Static Separation 2 upstream static_server { 3 server 172.24.10.22; 4 } 5 upstream tomcat_server { 6 server 172.24.10.23:8080; 7 } 8 9 server { 10 listen 80; 11 server_name dss.linuxds.com; 12 access_log /var/log/nginx/dss.access.log main; 13 error_log /var/log/nginx/dss.error.log warn; 14 proxy_set_header X-Real-IP $remote_addr; 15 proxy_set_header Host $host; 16 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 17 proxy_set_header X-Forwarded-Proto $scheme; 18 # location / { 19 # root html; 20 # index index.html; 21 # } 22 location / { 23 proxy_pass http://static_server; 24 } 25 location ~ .*\.(css)$ { 26 root /usr/share/nginx/dss; 27 } 28 location ~ .*\.(htm|html|gif|jpg|jpeg|png|gif|bmp|swf|ioc|rar|zip|txt|flv|mid|doc|ppt|pdf|xls|mp3|wma) { 29 proxy_pass http://static_server; 30 expires 5d; 31 } 32 location ~ .*\.jsp$ { 33 proxy_pass http://tomcat_server; 34 expires 1h; 35 } 36 error_page 500 502 503 504 /50x.html; 37 location = /50x.html { 38 root html; 39 } 40 }
1 [root@nginx01 ~]# nginx -t -c /etc/nginx/nginx.conf #檢查配置檔案 2 [root@nginx01 ~]# nginx -s reload #過載配置檔案
2.5 訪問測試
瀏覽器分別訪問:http://dss.linuxds.com/,http://dss.linuxds.com/javatest.jsp,http://staticrs.linuxds.com/nginx.jpg,http://dss.linuxds.com/test.css。
三 動靜分離實現--根據檔案路徑
3.1 環境準備
參考2.1.
3.2 建立靜態站點
1 [root@nginx02 ~]# mkdir /usr/share/nginx/staticrs/ 2 [root@nginx02 ~]# echo '<h1>Static_Web</h1>' > /usr/share/nginx/staticrs/index.html 3 [root@nginx02 ~]# ll /usr/share/nginx/staticrs/ #上傳示例圖片靜態資源 4 total 16K 5 -rw-r--r-- 1 root root 20 Jun 20 14:32 index.html 6 -rw-r--r-- 1 root root 11K Jun 20 14:35 nginx.jpg 7 [root@nginx02 ~]# mv /etc/nginx/conf.d/default.conf /etc/nginx/conf.d/default.conf.bak
1 [root@nginx02 ~]# vi /etc/nginx/conf.d/staticrs.conf 2 server { 3 listen 80; 4 server_name staticrs.linuxds.com; 5 access_log /var/log/nginx/staticrs.access.log main; 6 error_log /var/log/nginx/staticrs.error.log warn; 7 location /static { 8 alias /usr/share/nginx/staticrs; 9 index index.html; 10 } 11 }
1 [root@nginx02 ~]# nginx -t -c /etc/nginx/nginx.conf #檢查配置檔案 2 [root@nginx02 ~]# nginx -s reload #過載配置檔案
手動訪問後端靜態站點及資源:http://staticrs.linuxds.com/static/及http://staticrs.linuxds.com/static/nginx.jpg。
3.3 建立動態站點
1 [root@nginx03 ~]# yum install -y tomcat 2 [root@nginx03 ~]# mkdir -p /usr/share/tomcat/webapps/ROOT/dynamic
1 [root@nginx03 ~]# vi /usr/share/tomcat/webapps/ROOT/dynamic/javatest.jsp 2 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> 3 <HTML> 4 <HEAD> 5 <TITLE>JSP Test Page</TITLE> 6 </HEAD> 7 8 <BODY> 9 <% 10 Random rand = new Random(); 11 out.println("<h1>隨機數:<h1>"); 12 out.println(rand.nextInt(99)+100); 13 %> 14 </BODY> 15 </HTML>
1 [root@nginx03 ~]# systemctl start tomcat.service #啟動tomcat
手動訪問後端動態站點及資源:http://dynamic.linuxds.com:8080/dynamic/javatest.jsp
3.4 配置前端動靜分離
1 [root@nginx01 ~]# mkdir -p /usr/share/nginx/dss 2 [root@nginx01 ~]# ll /usr/share/nginx/dss/ 3 total 4.0K
1 [root@nginx01 ~]# vi /etc/nginx/conf.d/dss.conf #配置Dynamic-Static Separation 2 upstream static_server { 3 server 172.24.10.22; 4 } 5 upstream tomcat_server { 6 server 172.24.10.23:8080; 7 } 8 9 server { 10 listen 80; 11 server_name dss.linuxds.com; 12 access_log /var/log/nginx/dss.access.log main; 13 error_log /var/log/nginx/dss.error.log warn; 14 proxy_set_header X-Real-IP $remote_addr; 15 proxy_set_header Host $host; 16 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 17 proxy_set_header X-Forwarded-Proto $scheme; 18 # location / { 19 # root html; 20 # index index.html; 21 # } 22 location / { 23 proxy_pass http://static_server; 24 } 25 location ~ .*\.(css)$ { 26 root /usr/share/nginx/dss; 27 } 28 location /static/ { 29 proxy_pass http://static_server; 30 expires 5d; 31 } 32 location /dynamic/ { 33 proxy_pass http://tomcat_server; 34 expires 1h; 35 } 36 error_page 500 502 503 504 /50x.html; 37 location = /50x.html { 38 root html; 39 } 40 }
1 [root@nginx01 ~]# nginx -t -c /etc/nginx/nginx.conf #檢查配置檔案 2 [root@nginx01 ~]# nginx -s reload #過載配置檔案
3.5 訪問測試
瀏覽器分別訪問:http://dss.linuxds.com/,http://dss.linuxds.com/dynamic/javatest.jsp,http://staticrs.linuxds.com/static/nginx.jpg,http://dss.linuxds.com/test.css。
參考:https://klionsec.github.io/2017/12/21/nginx-static-dynamic/。