5.5 配置动静分离

5.5.1 动静分离需求分析

Nginx动静分离简单来说就是把动态和静态请求分开，不能理解成只是单纯的把动态页面和静态页面物理分离。严格意义上说应该是动态请求和静态请求分开，可以理解成使用Nginx处理静态请求，Tomcat处理动态请求。

动静分离从目前实现方式大致分为两种：

一是纯粹的把静态文件独立成单独的域名，放在独立的服务器上，也是目前主流推崇的方案。

二是动态和静态文件混合在一起发布，通过nginx分开。通过location指定不同的后缀名实现不同的请求转发。

5.5.2 动静分离具体实现

1.index.jsp修改

tomcat1

xxxxxxxxxx
[root@node2 ~]# vim /opt/tomcat1/webapps/ROOT/index.jsp 
<link rel="stylesheet" type="text/css" href="/css/index.css">
<img src="/image/logo.jpg" ><br/>
<font class="myfont">from 192.168.20.102:8080 </font>

tomcat2

xxxxxxxxxx
[root@node2 ~]# vim /opt/tomcat2/webapps/ROOT/index.jsp 
<link rel="stylesheet" type="text/css" href="/css/index.css">
<img src="/image/logo.jpg" ><br/>
<font class="myfont">from 192.168.20.102:9090 </font>

2.从node1克隆node5,启动node5，并修改主机名和ip地址

xxxxxxxxxx
[root@node5 ~]#vim /etc/hostname
node5
[root@node5 ~]# vim /etc/sysconfig/network-scripts/ifcfg-ens33
IPADDR=192.168.20.105
[root@node2 ~]# reboot

重启虚拟机后，XShell中配置连接，并使用XShell连接node5，接收并保存 秘钥。

2.在node5服务器上创建目录 /data/image和/data/css，然后将logo.jpg和index.css上传到对应的目录

xxxxxxxxxx
[root@node5 ~]# mkdir -p /data/image  /data/css
[root@node5 ~]# cd /data
[root@node5 data]# ls
css  image
#上传logo.jpg到image目录下，上传index.css到css目录
[root@node5 data]# ls -R ./
./:
css  image
./css:
index.css
./image:
logo.jpg

3.并修改node5服务器上的nginx.conf配置文件，并重启nginx

xxxxxxxxxx
[root@node5 ~]# vim /usr/local/nginx/conf/nginx.conf
server {
   listen  80;
   server_name 192.168.20.105;
   location /image {
       root /data;
   }
   location /css {
       root /data;
   }
}
[root@node5 ~]# systemctl restart nginx

4.修改node1服务器上的nginx.conf配置文件

xxxxxxxxxx
server {
   listen  80;
   server_name www.bjsxt.cn;
   location / {
       proxy_pass http://rss/;
   }
   location /image/ {
       proxy_pass http://192.168.20.105;
   }
   location /css/ {
       proxy_pass http://192.168.20.105;
   }
}

5.然后重新加载nginx,浏览器测试http://www.bjsxt.cn