Nginx之動靜分離配置

時間 2019-11-06

標籤 nginx 動靜分離配置欄目 Nginx 简体版

原文原文鏈接

Nginx之動靜分離javascript

nginx的反向代理，我想你們應該瞭解，前端nginx代理後端的tomcat，可是在處理靜態資源（相關圖片等）上tomcat並不佔優點。因此動靜分離利用nginx的location匹配，使靜態資源本身處理，或者交由其餘服務器處理，動態資源交給tomcat處理。這樣帶來的好處是加快了網站的訪問速度，減輕後端壓力，而且在後臺tomcat宕機時，靜態資源並不受影響。css

環境：三臺主機html

192.168.0.18 proxy代理主機nginx前端

192.168.0.25 解析動態資源tomcatjava

192.168.0.102 解析靜態資源nginxjquery

1、動態資源tomcat配置
nginx

tomcat安裝不在贅述，主要修改訪問頁面web

路徑： /usr/local/tomcat8/webapps/ROOTajax

vim index.jsp #代碼內容以下，直接複製便可。vim

<%@ 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>隨機數:</h1>");
        out.println(rand.nextInt(1000)+100);
      %>
      %    </BODY>
      %    </HTML

訪問頁面內容以下

2、靜態資源解析nginx配置

安裝nginx不在贅述，主要修改nginx.conf

一、在默認server中添加以下location，匹配靜態資源

location ~ .*\.(gpg|png|css|jpg) {

root /usr/local/nginx/static;

}

二、建立對應目錄

mkdir /usr/local/nginx/static

在該目錄中放一張測試圖片便可，圖片尾綴要和配置文件中匹配

三、重啓nginx，訪問頁面

3、proxy代理nginx配置

搭建nginx不在贅述，主要修改主配置文件

這樣訪問192.168.0.18/test.jpg 和192.168.0.18/index.jsp時會代理不一樣的後端主機進行解析。

vim /usr/local/nginx/conf/nginx.conf

    gzip  on;
    #增長upstream模塊
    upstream tomcat_server {
      server 192.168.0.25:8080;
      }
    upstream static_server {
      server 192.168.0.102;
     }
    #修改默認server的中配置
    server {
        listen       80;
        server_name  localhost;
        location / {
        root html;
        index index.html;
}
            #匹配到http://ip/*.jpg或者*.png或者*.css時，交由靜態資源服務器102處理
        location ~ .*\.(jpg|png|css) {
          proxy_pass http://static_server;
          proxy_set_header X-Real-IP $remote_addr;
}
           #匹配到http://ip/*.jsp時，交由後臺tomcat處理動態資源
       location ~ .*\.jsp$ {
         proxy_pass http://tomcat_server;
         proxy_set_header X-Real-IP $remote_addr;
}
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
}

4、整合動態和靜態資源（proxy代理nginx）

vim /usr/local/nginx/html/index.html

<html>
<head>
        <meta charset="UTF-8" />
        <title>測試ajax和跨域訪問</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",
        #添加proxy主機代理的動態資源
        url: "http://192.168.0.18/index.jsp",
        success: function(data) {
                $("#get_data").html(data)
        },
        error: function() {
                alert("fail!!,請刷新再試!");
        }
        });
});
</script>
        <body>
                <h1>測試動靜分離</h1>
                #添加proxy主機代理的靜態資源
                <img src="http://192.168.0.18/test.jpg">
                <div id="get_data"></div>
        </body>
</html>

訪問效果以下：

總結：動靜分離原理其實是使用了nginx的location正則匹配，這樣即便動態資源宕機，也不影響靜態資源使用，並且增長訪問效率。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。