一、爲什麼要實現動靜分離
- 動靜分離是將網站的靜態資源（HTML，JavaScript，CSS,img等文件）與後臺應用分開部署，提高用戶訪問靜態代碼的速度，降低對後臺應用的訪問
- nginx 處理靜態資源的能力超強。
主要是nginx處理靜態頁面的效率遠高於 tomcat 的處理能力，如果tomcat的請求量爲1000次，則nginx的請求量爲6000次，tomcat每秒的吞吐量爲0.6M，nginx的每秒吞吐量爲3.6M，可以說，nginx處理靜態資源的能力是tomcat處理能力的6倍，優勢可見一斑。 - 動態資源和靜態資源分開，使服務器結構更清晰。
二、動靜分離的基本過程
- 如下圖所示，我們部署了 nginx 和 tomcat 服務器，把所有的靜態資源都放置在nginx的webroot目錄下面，把動態請求的程序都放在 tomcat 的webroot目錄下面。
- 當客戶端訪問服務端的時候，如果是靜態資源的請求，就直接到nginx的webroot目錄下面獲取資源。
- 如果是動態資源的請求，nginx利用反向代理的原理，把請求轉發給tomcat進行處理，這樣就實現了動靜分離，提高了服務器處理請求的性能。
![在這裏插入圖片描述]()
三、環境說明
| 服務類型 | IP地址 | 軟件包 |
|---|---|---|
| Nginx服務器 | 192.168.100.128/24 | nginx-1.12.2.tar.gz |
| Tomcat服務器 | 192.168.100.131/24 | jdk-8u91-linux-x64.tar.gz、apache-tomcat-8.5.16.tar.gz |
| win10客戶端 | 192.168.100.0網段 |
僅供參考：（包版本有所不同）
- 百度雲盤下載鏈接：
- nginx：https://pan.baidu.com/s/1gI6Q2qJHmQUIqJVqut_AXA
- Tomcat：https://pan.baidu.com/s/1ibLOT9wBfVsALMqBOPUVEA 提取碼：prry
四、部署過程
4.1、nginx 服務器部署
//nginx安裝包如果需要其他版本，可以到官網下載。
//安裝依賴包
yum -y install gcc gcc-c++ make pcre-devel zlib-devel
//掛載本地共享文件夾，解壓nginx安裝包
tar z xvf nginx-1.12.2.tar.gz -C /opt
//添加nginx用戶
useradd -M -s /sbin/nologin nginx
//編譯且安裝nginx
cd /opt/nginx-1.12.2/
./configure \
--prefix=/usr/local/nginx \
--user=nginx \
--group=nginx \
--with-http_stub_status_module
make && make install
//創建軟鏈接便於控制服務
ln -s /usr/local/nginx/sbin/nginx /usr/local/sbin
//編輯腳本，使用service工具，控制服務
vim /etc/init.d/nginx
#!/bin/bash
# chkconfig: - 99 20
# description: Nginx Service Control Script
PROG="/usr/local/nginx/sbin/nginx"
PIDF="/usr/local/nginx/logs/nginx.pid"
case "$1" in
start)
$PROG
;;
stop)
kill -s QUIT $(cat $PIDF)
;;
restart)
$0 stop
$0 start
;;
reload)
kill -s HUP $(cat $PIDF)
;;
*)
echo "Usage: $0 {start|stop|restart|reload}"
exit 1
esac
exit 0
//添加執行權限，將腳本文件添加到服務列表中
cd /etc/init.d
chmod +x nginx
chkconfig --add nginx
chkconfig --level 35 nginx on
//關閉防火牆，開啓nginx服務
systemctl stop firewalld
setenforce 0
service nginx start
netstat -natp | grep 80
tcp 0 0 0.0.0.0:80 0.0.0.0:* LISTEN 36517/nginx: master
我們的服務搭建成功！
4.2、Tomcat 服務器部署
//解壓軟件包jdk
tar zxvf jdk-8u91-linux-x64.tar.gz -C /usr/local/
//配置環境變量，將下面的代碼追加到末尾處。
vim /etc/profile
export JAVA_HOME=/usr/local/jdk1.8.0_91 //指定家目錄
export JRE_HOME=${JAVA_HOME}/jre //java虛擬機
export CLASSPATH=.:${JAVA_HOME}/lib:${JRE_HOME}/lib //java函數庫
export PATH=${JAVA_HOME}/bin:$PATH
source /etc/profile //使環境變量生效
//解壓tomcat軟件包
tar zxvf apache-tomcat-8.5.16.tar.gz -C /usr/local/
//修改文件名，便於操作
cd /usr/local
mv apache-tomcat-8.5.16 tomcat
//建立軟鏈接，便於服務控制
ln -s /usr/local/tomcat/bin/startup.sh /usr/local/bin/
ln -s /usr/local/tomcat/bin/shutdown.sh /usr/local/bin
//關閉防火牆，開啓tomcat服務
systemctl stop firewalld
setenforce 0
startup.sh #開啓服務
netstat -natp | grep 8080 #查看服務是否啓動
這時打開一臺 win10虛擬機 作爲 client 服務端，在瀏覽器輸入nginx服務器的IP地址：192.168.100.128和 tomcat 服務器的IP地址：192.168.100.131:8080
4.3、動靜分離配置
//配置nginx.conf，開啓反向代理功能。
vim /usr/local/nginx/conf/nginx.conf
server {
. . .省略. . .
location ~.*.jsp$ { //正則表達式，即任何以.jsp結尾的url
proxy_pass http://192.168.100.131:8080; //轉到192.168.100.131:8080
proxy_set_header Host $host;
}
//創建nginx的站點內容
vim /usr/local/nginx/html/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> #第一處添加，使之支持中文字符
<title>Welcome to nginx!</title>
<style>
body {
width: 35em;
margin: 0 auto;
font-family: Tahoma, Verdana, Arial, sans-serif;
}
</style>
</head>
<body>
<h1>靜態頁面！</h1> #第二處修改
<p>這是個靜態頁面</p> #第三處修改
</body>
</html>
重啓服務
service nginx stop
service nginx start
- 在客戶端上訪問靜態站點
![在這裏插入圖片描述]()
//創建tomcat的web目錄和站點
mkdir /usr/local/tomcat/webapps/test
//站點內容
vim /usr/local/tomcat/webapps/test/index.jsp
<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.util.Date" %>
<%@ page import="java.text.SimpleDateFormat" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/ html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>動態頁面</title>
</head>
<body>
<h1>動態頁面</h1>
<p>這是個動態頁面</p>
</body>
</html>
- 在客戶端的瀏覽器輸入http://192.168.100.128/test/index.jsp 訪問動態站點，nginx 服務器發現是動態請求，反向代理給 Tomcat 服務器處理。
![在這裏插入圖片描述]()
4.4、配置驗證
//在Tomcat服務器上聲明圖片的位置
vim /usr/local/tomcat/webapps/test/index.jsp
<body>
<img src="game.jpg"/>
#添加頁面圖片,這個圖片在nginx中存放，但是在tomcat裏聲明
</body>
//如果圖片過大，可以通過設置參數改變圖片大小，例子如下：
<img src="game.jpg" height="150px" width="230px"/>
//在nginx服務器上，存放圖片，而且圖片的目錄名稱要和tomcat中的java項目名稱相同
vim /usr/local/nginx/conf/nginx.conf
在server{}段裏添加
location ~.*\.(gif|jpg|jpeg|png|bmp|swf|css)$ {
root html;
expires 30d;
}
(Tomcat指路徑，nginx放圖片)
注意:目錄名稱需要和 java項目(webapps)名稱相同
mkdir /usr/local/nginx/html/test/
在/usr/local/nginx/html/test/目錄下放一張圖片
service nginx stop
service nginx start
在客戶端瀏覽器中輸入http://192.168.100.128/test/index.jsp 出現存放的圖片
