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

为什么要做动静分离

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

这里写图片描述

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


修改Web项目

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎进入枣面包的面包坊</title>
    <script type="text/javascript" src="js/nothing.js"></script>
</head>
<body>
    <h1>欢迎进入枣面包的面包坊</h1>
    <img src="img/photo.jpg">
</body>
</html>

项目添加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/