大型网站分布式架构（七）—— Nginx整合Tomcat实现动静分离

目录
大型网站分布式架构（一）—— SpringBoot构建项目
大型网站分布式架构（二）—— Linux下Tomcat的安装和项目部署
大型网站分布式架构（三）—— 使用Apache Bench进行压力测试
大型网站分布式架构（四）—— JVisualVM远程监控Tomcat
大型网站分布式架构（五）—— Apache Bench与JVisualVM联调
大型网站分布式架构（六）—— Nginx的安装
大型网站分布式架构（七）—— Nginx整合Tomcat实现动静分离
大型网站分布式架构（八）—— Tomcat集群横向拓展 + Nginx负载均衡
大型网站分布式架构（九）—— 从Cookie机制到会话Session再到集群中Session的场景
大型网站分布式架构（十）—— Springboot + SpringSession + Redis实现Tomcat集群Session共享
大型网站分布式架构（十一）—— Keepalived+Nginx+Tomcat集群实现服务的高可用HA

前提，我们需要：

• Web项目 —— 大型网站分布式架构（一）—— SpringBoot构建项目
• Tomcat容器 —— 大型网站分布式架构（二）—— Linux下Tomcat的安装和项目部署
• Nginx服务 —— 大型网站分布式架构（六）—— Nginx的安装

---

为什么要做动静分离

• 动静分离是将网站静态资源（HTML，JavaScript，CSS，img等文件）与后台应用分开部署
• 动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则使对静态资源的请求全部交给nginx处理，而讲动态请求转发给应用服务器处理，达到动静分离的目标，从而提高网站的并发性能，达到优化网站架构的效果

下面我们将使用一台Nginx+一台Tomcat模拟实现动静分离，项目将使用博主之前构建的项目并做部分修改

---

修改Web项目

修改项目下的index.html，添加img标签和js引入，修改后的代码如下:

    
    
    


    
欢迎进入枣面包的面包坊
    

项目添加photo.jpg和nothing.js文件

将项目打包部署到之前搭建的Tomcat服务器中并启动，通过浏览器访问：

可以看到访问返回了3样东西：

• 访问接口通过模板渲染之后得到的文档：document
• 获得JavaScript标签引入的js文件：script——nothing.js
• 获得img标签请求得到的静态图片：jpeg——photo.jpg

配置nginx.conf

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    server {
        listen       80;
        server_name  localhost;

        #配置静态资源交给nginx处理，这里先只配置js和jpg
        location ~ .*\.(js|jpg) {
            root /export/data/nginx/appdemo; #静态文件目录
            expires 30d; #缓存天数
        }
        #配置除静态资源以外的交给tomcat处理
        location / {
            proxy_pass http://localhost:8080/appdemo-0.0.1-SNAPSHOT/;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

}

重启Nginx服务

[root@centos6-1 ~]# cd /usr/local/nginx/sbin/
[root@centos6-1 sbin]# ./nginx -s reload

web访问Nginx服务：192.168.214.150，情况如下：

发现访问nginx时，即变成了访问tomcat服务，这里就是用nginx进行了反向代理；但是也发现了获取不到nothing.js和photo.jpg文件，那是因为nginx配置了静态资源的路径，而该路径下没有该资源导致的，将对应资源上传到指定位置即可，在nginx.conf文件中的配置的静态资源路径为：/export/data/nginx/appdemo

上传静态资源

使用lrzsz工具上传：三种方式实现Linux的文件上传下载

[root@centos6-1 ~]# cd /export/data/nginx/appdemo/
[root@centos6-1 appdemo]# ll
total 8
drwxr-xr-x. 2 root root 4096 Aug 27 03:42 img
drwxr-xr-x. 2 root root 4096 Aug 27 03:42 js
[root@centos6-1 appdemo]# cd img/
[root@centos6-1 img]# rz
rz waiting to receive.
Starting zmodem transfer.  Press Ctrl+C to cancel.
Transferring photo.jpg...
  100%       7 KB       7 KB/sec    00:00:01       0 Errors  
[root@centos6-1 img]# ll
total 8
-rw-r--r--. 1 root root 8105 Aug 27  2018 photo.jpg
[root@centos6-1 img]# cd ..
[root@centos6-1 appdemo]# cd js
[root@centos6-1 js]# rz
rz waiting to receive.
Starting zmodem transfer.  Press Ctrl+C to cancel.
Transferring nothing.js...
Transferring nothing.js...

[root@centos6-1 js]# ll
total 0
-rw-r--r--. 1 root root 0 Aug 27  2018 nothing.js
[root@centos6-1 js]# 

浏览器访问

总结

到这里就实现了Nginx和Tomcat的集成，实现了web服务的动静分离，将静态资源交给Nginx处理，这里是将静态资源存储在本地，通过Nginx访问，当然也可以代理到其他静态服务器上；再将非静态资源的请求代理给Tomcat动态处理。这样即削减了Tomcat的压力，又发挥了Nginx高并发的能力，使web服务更加健壮。但是这里只是配置了单台Tomcat，当动态请求过多时，一台Tomcat服务器肯定是不足以处理足够多的动态请求的。后面将搭建Tomcat集群，通过横向拓展实现Tomcat的高并发。

---

参考：
https://www.cnblogs.com/xiaoblog/p/4241086.html
http://blog.brucefeng.info/post/static-backend-asolate
http://nginx.org/en/docs/