本文設計的動靜分離結構
在本文中，我們將靜態資源放在 A 主機的一個目錄上，將動態程序放在 B 主機上，同時在 A 上安裝 Nginx 並且在 B 上安裝 Tomcat。配置 Nginx，當請求的是 js、css、jpg、gif 等靜態資源時，就訪問 A 主機上的靜態資源目錄；當用戶提出動態資源的請求時，則將請求轉發到後端的 B 服務器上，交由 Tomcat 處理，再由 Nginx 將結果返回給請求端。
提到這，可能有您會有疑問，動態請求要先訪問 A，A 轉發訪問 B，再由 B 返回結果給 A，A 最後又將結果返回給客戶端，這是不是有點多餘。初看的確多餘，但是這樣做至少有 2 點好處。第一，爲負載均衡做準備，因爲隨着系統的發展壯大，只用一臺 B 來處理動態請求顯然是是不夠的，要有 B1，B2 等等才行。那麼基於圖 1 的結構，就可以直接擴展 B1，B2，再修改 Nginx 的配置就可以實現 B1 和 B2 的負載均衡。第二，對於程序開發而言，這種結構的程序撰寫和單臺主機沒有區別。我們假設只用一臺 Tomcat 作爲服務器，那麼凡是靜態資源，如圖片、CSS 代碼，就需要編寫類似這樣的訪問代碼：<img src=”{address of A}/a.jpg”>，當靜態資源過多，需要擴展出其他的服務器來安放靜態資源時，訪問這些資源就可能要編寫這樣的代碼：<img src=”{address of C}/a.jpg”>、<img src=”{address of D}/a.jpg”>。可以看到，當服務器進行變更或擴展時，代碼也要隨之做出修改，對於程序開發和維護來說非常困難。而基於上面的結構，程序都只 要 <img src=”a.jpg”>，無需關心具體放置資源的服務器地址，因爲具體的地址 Nginx 爲幫您綁定和選擇。
動靜分離的nginx配置：
#爲負載均衡做準備
upstream tomcat_server{
server 192.168.234.42:8181;
}
server {
listen 80;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root html;
index index.html index.htm;
}
# 動態請求的轉發
location ~ .*.jsp$ {
proxy_pass http://tomcat_server;
proxy_set_header Host $host;
}
# 靜態請求直接讀取
location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|css|js|html|min.css|min.js|mustache)$ {
expires 30d;
}
}
我這裏開啓一個虛擬機作爲nginx服務器，ip地址爲192.168.234.139
將close_hover.png和loading.gif拷貝到/usr/local/nginx/html中
步驟：
一、打開SecureCRT客戶端工具，輸入快捷鍵Alt+P，分別輸入命令：put d:/setup/close_hover.png和put d:/setup/loading.gif。
二、進入到根目錄，輸入以下命令將圖片移動到/usr/local/nginx/html文件夾中
mv close_hover.png /usr/local/nginx/html
三、輸入命令：
mv loading.gif /usr/local/nginx/html
如下圖所示：
其目的和我們預期的一樣，動態的請求（以 .jsp 結尾）發到 B（192.168.234.42:8181，即 tomcat_server）上，而靜態的請求（gif|jpg 等）則直接訪問定義的html目錄
四、在另一臺裝有tomcat的電腦或虛擬機（我的ip爲192.168.234.42）中新建一個Web 項目，我們只爲其添加一個 index.jsp 文件，目錄結構如圖:
注意目錄，很簡單，在xs下新建了一個簡單的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>dfgdf</title>
</head>
<body>
<div>result</div><br><img src='close_hover.png'>
<br><img src='loading.gif'>
</body>
<script>
</script>
</html>
測試一下，啓動nginx，進入到/usr/local/nginx/sbin文件夾中，輸入命令：
./nginx
啓動tomcat，確定是可以訪問到的 http://localhost:8181/xs/index.jsp，如下圖：
由上圖可知，直接訪問tomcat的xs項目的index.jsp，圖片是不能正常顯示的。
下面我們通過nginx來訪問，輸入網址：192.168.234.139/xs/index.jsp，如下圖：
由上圖可知，通過nginx反向代理訪問tomcat項目，圖片顯示正常。動靜分離成功！
------------------------------------------------------------------------------------------------------------
下面要開始真正的大動作了。
我們手裏有一個單體項目，前端頁面採用jsp編寫，現在公司需要把js、html、css、jpg、gif等靜態文件放在nginx中，其他放在tomcat中。用戶不允許直接訪問tomcat，而是要通過nginx。jsp不允許直接以url的方式鏈接nginx中的靜態文件。那該怎麼做呢？
一、在html文件夾中新建wageSplit文件夾，和項目名一致。將項目中webapp文件夾下的js和static文件夾移動到/usr/local/nginx/html/wageSplit中。
二、nginx中的配置文件更改如下：
upstream tomcat_server{
server 192.168.234.42:8181;
}
server {
listen 80;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root html;
index index.html index.htm;
}
# 動態請求的轉發
location /wageSplit/ {
proxy_pass http://tomcat_server;
proxy_set_header Host $host;
}
# 動態請求的轉發
location ~ .*.jsp$ {
proxy_pass http://tomcat_server;
proxy_set_header Host $host;
}
# 靜態請求直接讀取
location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|css|js|html|min.css|min.js|mustache)$ {
expires 30d;
}
}
主要是加了一段配置：
location /wageSplit/ {
proxy_pass http://tomcat_server;
proxy_set_header Host $host;
}
意思是當用戶輸入的網址中如果包含/wageSplit/，則訪問B服務器的tomcat。
三、重啓nginx，命令：
./nginx -s reload
四、啓動wageSplit項目，端口號爲8181
我們先訪問localhost:8181/wageSplit/a/login，如下圖：
接下來，我們通過nginx訪問tomcat。如下圖：
動靜分離完成！