Linux架構之Nginx 動靜分離

時間 2019-11-08

標籤 linux 架構 nginx 動靜分離欄目 Linux 简体版

原文原文鏈接

案例No.51：Nginx動靜分離

一、web01配置靜態資源

[root@web01 ~]# cd /etc/nginx/conf.d/
#配置靜態資源
[root@web01 conf.d]# cat dj_oldboy.conf 
server{
 listen 80;
       server_name pic.drz.com;
       root /code;
       index index.html;

       location ~* .*\.(jpg|png|gif)$ {
               root /code/images;
       } 
}

#配置一個主頁
[root@web01 conf.d]# echo "zls_test_web01" > /code/index.html
#建立圖片目錄
[root@web01 conf.d]# mkdir -p /code/images/
[root@web01 conf.d]# cd /code/images/

#上傳一個靜態文件
[root@web01 images]# rz cjk.gif

修改域名解析文件，hosts，10.0.0.7   pic.drz.com  

[root@web01 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@web01 conf.d]# nginx -s reload

打開瀏覽器，訪問http://pic.drz.com，頁面跳轉至靜態頁面。javascript

打開瀏覽器，訪問http://pic.drz.com/pic5.gif，頁面顯示動態圖。php

二、接下來作動靜分離，將.jsp、.php、.java等內容寫在web02上，web02配置動態資源

[root@web02 ~]# yum install -y tomcat
[root@web02 ~]# mkdir -p /usr/share/tomcat/webapps/ROOT
[root@web02 ~]# cat /usr/share/tomcat/webapps/ROOT/java_test.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<HTML>
   <HEAD>
       <TITLE>曾老溼JSP Page</TITLE>
   </HEAD>
   <BODY>
       <%
           Random rand = new Random();
           out.println("<h1>曾老溼隨機數:<h1>");
           out.println(rand.nextInt(99)+100);
       %>
   </BODY>
</HTML>

[root@web02 webapps]# systemctl start tomcat

打開瀏覽器，訪問http://10.0.0.8:8080/java_test.jsp，頁面顯示靜態頁面，是一個隨機數。html

三、在負載均衡上調度

[root@lb01 conf.d]# cat proxy_ds.conf 
upstream static {
       server 172.16.1.7:80;
}

upstream java {
       server 172.16.1.8:8080;
}

server {
       listen 80;
       server_name pic.drz.com;

       location ~* \.(jpg|png|gif)$ {
               proxy_pass http://static;
               proxy_set_header Host $http_host;
       }

       location ~ \.jsp {
               proxy_pass http://java;
               proxy_set_header Host $http_host;
       }
}


修改域名解析文件，hosts，10.0.0.5   pic.drz.com ，經過負載訪問動態與靜態資源


[root@lb01 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@lb01 conf.d]# nginx -s reload

打開瀏覽器，訪問http://pic.drz.com/pic5.gif，頁面顯示動態圖。java

打開瀏覽器，訪問http://pic.drz.com/java_test.jsp，頁面顯示靜態頁面。jquery

四、負載均衡上整合動態和靜態的html文件，寫html文件使動態資源和靜態資源顯示在同一個頁面中。

#編輯配置文件
[root@lb01 ~]# cat /etc/nginx/conf.d/proxy_ds.conf
upstream static {
       server 172.16.1.7:80;
}

upstream java {
       server 172.16.1.8:8080;
}

server {
       listen 80;
       server_name pic.drz.com;
        
       location / {
           root /code;
           index index.html;
       }
        
       location ~* \.(jpg|png|gif)$ {
               proxy_pass http://static;
               proxy_set_header Host $http_host;
       }

       location ~ \.jsp {
               proxy_pass http://java;
               proxy_set_header Host $http_host;
       }
}

[root@lb01 ~]# mkdir -p /code

#編輯整合後的index.html
[root@lb01 ~]# cat /code/index.html
<html lang="en">
<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",
       url: "http://pic.drz.com/java_test.jsp",
       success: function(data){
               $("#get_data").html(data)
       },
       error: function() {
               alert("哎呦喂,失敗了,回去檢查你服務去~");
       }
       });
});
</script>
       <body>
               <h1>曾老溼帶你測試動靜分離</h1>
               <img src="http://pic.drz.com/cjk.gif">
               <div id="get_data"></div>
       </body>
</html>


修改域名解析文件，hosts，10.0.0.5   pic.drz.com ，經過負載訪問動態與靜態資源


[root@lb01 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@lb01 conf.d]# nginx -s reload