關(guān)于Nginx動靜分離詳解以及配置

更新時間：2023年04月26日 11:05:29 作者：Jiangxl~

這篇文章主要介紹了關(guān)于Nginx動靜分離詳解以及配置,動靜分離是通過中間件將動態(tài)請求和靜態(tài)請求進行分離，分離資源，減少不必要的請求消耗，減少請求延時,需要的朋友可以參考下

1.Nginx動靜分離概念

動靜分離，通過中間件將動態(tài)請求和靜態(tài)請求進行分離，分離資源，減少不必要的請求消耗，減少請求延時。

好處：動靜分離后，即使動態(tài)服務(wù)不可用，但靜態(tài)資源不會受到影響

通過中間件可以將動態(tài)請求和靜態(tài)請求進行分離

在這里插入圖片描述

2.Nginx動靜分離應(yīng)用案例

在這里插入圖片描述

2.1.環(huán)境規(guī)劃

系統(tǒng)	服務(wù)	服務(wù)	地址
centos7.5	負載均衡	Nginx proxy	192.168.81.210
centos7.5	靜態(tài)資源	Nginx static	192.168.81.220
centos7.5	動態(tài)資源	Tomcat server	192.168.81.230

2.2.配置靜態(tài)資源

1.創(chuàng)建動靜分離配置文件
[root@localhost ~]# cd /etc/nginx/conf.d/
[root@localhost conf.d]# vim ds.conf
#動靜分離
server {
	listen 80;
	server_name ds.com;
	
	location / {
		root /web;
		index index.html;
	}
	
	location ~* .*\.(png|jpg|gif)$ {
		root /web/images;
	}
}

2.重載Nginx
[root@localhost conf.d]# nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful
[root@localhost conf.d]# systemctl reload nginx

3.準備圖片
[root@localhost conf.d]# mkdir /web/images
[root@localhost conf.d]# wget -O /web/images/nginx.png http://nginx.org/nginx.png

在這里插入圖片描述

2.3.配置動態(tài)資源

1.編譯安裝tomcat
[root@localhost soft]# tar xf apache-tomcat-7.0.92.tar.gz  -C /application/

2.寫入動態(tài)文件
[root@localhost soft]# cd /application/
[root@localhost application]# vim apache-tomcat-7.0.92/webapps/ROOT/java_test.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<HTML>
    <HEAD>
        <TITLE>JSP Test Page</TITLE>
    </HEAD>
    <BODY>
      <%
        Random rand = new Random();
        out.println("<h1>Random number:</h1>");
        out.println(rand.nextInt(99)+100);
      %>
    </BODY>
</HTML>

3.啟動服務(wù)
[root@localhost application]# cd apache-tomcat-7.0.92/
[root@localhost apache-tomcat-7.0.92]# ./bin/startup.sh

2.4.整合動靜分離

2.4.1.配置動靜分離負載均衡

[root@localhost conf.d]# vim lb_ds.conf
#整合動靜分離
upstream static_photo {
        server 172.16.1.20:80;
}

upstream java {
        server 172.16.1.30:8080;
}

server {
        listen 80;
        server_name ds.com;
        access_log /nginx_log/lb_ds_access.log main;

        location / {
                root /web/ds;
                index index.html;
        }

        location ~* .*\.(jpg|png|gif)$ {
                proxy_pass http://static_photo;
                proxy_set_header HOST $http_host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }

        location ~* .jsp$ {
                proxy_pass http://java;
                proxy_set_header HOST $http_host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
}

2.4.2.編寫整合動靜分離代碼

[root@localhost conf.d]# vim /web/ds/index.html
<html lang="en">
<head>
        <meta charset="UTF-8" />
        <title>測試動靜分離</title>
        <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function(){
        $.ajax({
        type: "GET",
        url: "http://ds.com/java_test.jsp",
        success: function(data) {
                $("#get_data").html(data)
        },
        error: function() {
                alert("fail!!,請刷新再試");
        }
        });
});
</script>
        <body>
                <h1>測試動靜分離</h1>
                <h1>上面為靜態(tài)圖片，下面為動態(tài)頁面</h1>
                <img src="http://ds.com/nginx.png">
                <div id="get_data"></div>
        </body>
</html>