碼上歡樂
相關內容    簡體    繁體

013.Nginx動靜分離

本文轉載自   查看原文   2020-07-18 12:37   1655    Nginx/ 動靜分離/ Nginx動靜分離

一 動靜分離概述

1.1 動靜分離介紹

為了提高網站的響應速度，減輕程序服務器（Tomcat，Jboss等）的負載，對於靜態資源，如圖片、js、css等文件，可以在反向代理服務器中進行緩存，這樣瀏覽器在請求一個靜態資源時，代理服務器就可以直接處理，而不用將請求轉發給后端服務器。對於用戶請求的動態文件，如servlet、jsp，則轉發給Tomcat，Jboss服務器處理，這就是動靜分離。即動態文件與靜態文件的分離。

1.2 動靜分離原理

動靜分離可通過location對請求url進行匹配，將網站靜態資源（HTML，JavaScript，CSS，img等文件）與后台應用分開部署，提高用戶訪問靜態代碼的速度，降低對后台應用訪問。通常將靜態資源放到nginx中，動態資源轉發到tomcat服務器中。
clipboard

二 動靜分離實現--根據文件后綴

2.1 環境准備

主機

IP

角色

備注

nginx01

172.24.10.21

Nginx Proxy主機

接受請求，並代理至后端css存儲點

nginx02

172.24.10.22

Nginx 靜態服務器

處理靜態請求

nginx03

172.24.10.23

Nginx 動態服務器

處理動態請求
本實驗動靜分離主要是通過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。
clipboard
clipboard

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
clipboard

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。
clipboard

三 動靜分離實現--根據文件路徑

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。
clipboard
參考：https://klionsec.github.io/2017/12/21/nginx-static-dynamic/。


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 nginx動靜分離 nginx動靜分離配置 Nginx+Apache動靜分離 Nginx 配置實例-動靜分離 Nginx教程(6) 動靜分離架構 nginx+apache動靜分離/負載均衡 nginx+tomcat動靜態資源分離 使用nginx+tomcat實現動靜分離 Nginx + Tomcat 動靜分離實現負載均衡 Nginx-配置動靜分離實例
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM