1.Nginx動靜分離基本概述
動靜分離, 通過中間件將動靜分離和靜態請求進行分離。
那為什么要通過中間件將動態請求和靜態請求進行分離? 減少不必要的請求消耗, 同時能減少請求的延時。
通過中間件將動態請求和靜態請求分離，邏輯圖如下
動靜分離只有好處: 動靜分離后, 即使動態服務不可用, 但靜態資源不會受到影響
2.Nginx動靜分離場景實踐
Nginx動靜分離實踐應用案例
2.0.環境准備
| 系統 | 服務 | 服務 | 地址 |
|---|---|---|---|
| CentOS7.5 | 負載均衡 | Nginx Proxy | 10.0.0.5 |
| CentOS7.5 | 靜態資源 | Nginx Static | 10.0.0.7 |
| CentOS7.5 | 動態資源 | Tomcat Server | 10.0.0.8 |
2.1.在10.0.0.7服務器上配置靜態資源
[root@web01 conf.d]# cat ds_oldboy.conf
server{
listen 80;
server_name ds.oldboy.com;
root /soft/code;
index index.html;
location ~* .*\.(png|jpg|gif)$ {
root /soft/code/images;
}
}
# 准備目錄, 以及靜態相關圖片
[root@web01 ~]# mkdir /soft/code/images -p
[root@web01 ~]# wget -O /soft/code/images/nginx.png http://nginx.org/nginx.png
[root@web01 ~]# systemctl restart nginx
2.2.在10.0.0.8服務器上配置動態資源
[root@web01 ~]# yum install -y tomcat
[root@web01 ~]# mkdir /usr/share/tomcat/webapps/ROOT
[root@web01 ~]# vim /usr/share/tomcat/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>
#重啟tomcat服務
[root@web01 ~]# systemctl start tomcat
2.3.在負載均衡10.0.0.5上配置調度, 實現訪問jsp和png
[root@lb01 conf.d]# cat ds_proxy.conf
upstream static {
server 10.0.0.7:80;
}
upstream java {
server 10.0.0.8:8080;
}
server {
listen 80;
server_name ds.oldboy.com;
location / {
root /soft/code;
index index.html;
}
location ~ .*\.(png|jpg|gif)$ {
proxy_pass http://static;
include proxy_params;
}
location ~ .*\.jsp$ {
proxy_pass http://java;
include proxy_params;
}
}
[root@lb01 conf.d]# systemctl restart nginx
2.4.通過負載測試訪問靜態資源
2.5.通過負載測試訪問動態資源
2.6.在負載均衡10.0.0.5上整合動態和靜態資源的html文件
[root@lb01 ~]# mkdir /soft/code -p
[root@lb01 ~]# cat /soft/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://ds.oldboy.com/java_test.jsp",
success: function(data) {
$("#get_data").html(data)
},
error: function() {
alert("fail!!,請刷新再試!");
}
});
});
</script>
<body>
<h1>測試動靜分離</h1>
<img src="http://ds.oldboy.com/nginx.png">
<div id="get_data"></div>
</body>
</html>
2.7.測試動態和靜態資源是否能正常加載在一個html文件中
2.8.當使用systemctl stop nginx停止Nginx后, 會發現靜態內容無法訪問, 動態內容依舊運行正常
2.9.當使用systemctl stop tomcat停止tomcat后, 靜態內容依舊能正常訪問, 動態內容將不會被請求到
3.Nginx資源分離場景實踐
Nginx通過負載均衡實現手機與PC調度至不同的后端節點應用案例
3.1.根據iphone、安卓、pc跳轉不同的頁面環境規划
| 系統版本 | 主機角色 | 外網IP | 內網IP | 提供端口 |
|---|---|---|---|---|
| CentOS7.5 | 負載均衡 | 10.0.0.5 | 172.16.1.5 | 80 |
| CentOS7.5 | 提供Android頁面 | 172.16.1.7 | 9090 | |
| CentOS7.5 | 提供Iphone頁面 | 172.16.1.7 | 9091 | |
| CentOS7.5 | 提供pc頁面 | 172.16.1.7 | 9092 |
3.2.配置后端WEB節點的Nginx配置
[root@web01 conf.d]# cat sj.conf
server {
listen 9090;
location / {
root /code/android;
index index.html;
}
}
server {
listen 9091;
location / {
root /code/iphone;
index index.html;
}
}
server {
listen 9092;
location / {
root /code/pc;
index index.html;
}
}
3.3.為后端WEB節點配置對應的網站目錄以及代碼
[root@web01 conf.d]# mkdir -p /code/{android,iphone,pc}
[root@web01 conf.d]# echo "PC" > /code/pc/index.html
[root@web01 conf.d]# echo "Iphone" > /code/iphone/index.html
[root@web01 conf.d]# echo "Android" > /code/android/index.html
#檢查語法並重載Nginx服務
[root@web01 conf.d]# nginx -t
[root@web01 conf.d]# systemctl restart nginx
3.4.配置負載均衡服務，根據不同的瀏覽器調度到不同的資源池
[root@lb01 conf.d]# cat sj_proxy.conf
upstream iphone {
server 172.16.1.7:9091;
}
upstream android {
server 172.16.1.7:9090;
}
upstream pc {
server 172.16.1.7:9092;
}
server {
listen 80;
server_name sj.oldboy.com;
location / {
#默認跳轉至pc站點
proxy_pass http://pc;
include proxy_params;
#如果客戶端是Iphone則跳轉到iphone的資源池
if ($http_user_agent ~* "Iphone") {
proxy_pass http://iphone;
}
#如果客戶端是Android則跳轉到android的資源池
if ($http_user_agent ~* "Android"){
proxy_pass http://android;
}
#如果客戶端是IE瀏覽器，則返回403錯誤。
if ($http_user_agent ~* "msie"){
return 403;
}
}
}
3.5.直接使用瀏覽器訪問，返回默認的結果
3.6如果通過android設備訪問，效果如下。
3.7如果通過Iphone設備訪問，效果如下。
