动静分离,通过中间件将动态请求和静态请求进行分离;
通过中间件将动态请求和静态请求分离,可以建上不必要的请求消耗,同事能减少请求的延时。
通过中间件将动态请求和静态请求分离,逻辑图如下:
动静分离只有好处:动静分离后,即使动态服务不可用,但静态资源不会受到影响。
主机名 | 角色 | 软件 | 外网IP | 内网IP |
---|---|---|---|---|
lb01 | 负载均衡 | nginx | 10.0.0.5 | 172.16.1.5 |
web01 | 静态资源网站 | nginx | 10.0.0.7 | 172.16.1.7 |
web02 | 动态资源网站 | nginx | 10.0.0.8 | 172.16.1.8 |
# 1.修改nginx配置文件 [root@web01 /zy/pc]# vim /etc/nginx/conf.d/jing.conf server { listen 80; server_name www.dj.com; location / { root /dj; index index.html; } location ~* \.(jpg|jpeg|gif|mp4|mp3|avi|png)$ { root /dj/static; } location ~ \.jsp { proxy_pass http://10.0.0.8:8080; proxy_set_header Host $http_host; } } [root@web01 /zy/pc]# vim /etc/nginx/conf.d/jing.conf server { listen 80; server_name www.dj.com; location / { root /dj; index index.html; } location ~* \.(jpg|jpeg|gif|mp4|mp3|avi|png)$ { root /dj/static; } location ~ \.jsp { proxy_pass http://10.0.0.8:8080; proxy_set_header Host $http_host; } } # 2.创建一个静态页面 [root@web01 ~]# mkdir /dj [root@web01 ~]# echo 'tangzong lsp' > /dj/index.html # 3.创建静态资源目录 [root@web01 ~]# mkdir /dj/static # 4.放入静态资源,视屏...图片... [root@web01 /dj/static]# ll -rw-r--r-- 1 root root 149503 Jul 7 17:14 1.jpg # 5.打开浏览器访问http:/www.dj.com
# 1.安装tomcat [root@web02 ~]# yum install -y tomcat # 2.创建默认站点目录 /usr/share/tomcat/webapps [root@web02 ~]# mkdir /usr/share/tomcat/webapps/ROOT # 3.部署java代码 [root@web02 ~]# vi /usr/share/tomcat/webapps/ROOT/dong.jsp <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <HTML> <HEAD> <TITLE>曾老湿JSP Page</TITLE> </HEAD> <BODY> <% Random rand = new Random(); out.println("<h1>曾老湿随机数:<h1>"); out.println(rand.nextInt(99)+100); %> </BODY> </HTML> # 4.重启tomcat [root@web02 ~]# systemctl restart tomcat # 5.在浏览器里访问http://10.0.0.8:8080/dong.jsp
[root@web01 /dj]# vim /etc/nginx/conf.d/jing.conf server { listen 80; server_name www.dj.com; location / { root /dj; index index.html; } location ~* \.(jpg|jpeg|gif|mp4|mp3|avi|png)$ { root /dj/static; } location ~ \.jsp { proxy_pass http://10.0.0.8:8080; proxy_set_header Host $http_host; } } # 修改代码 [root@web01 /dj]# vim index.html <html lang="en"> <head> <meta charset="UTF-8" /> <title>曾老湿测试ajax和跨域访问</title> <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> </head> <script type="text/javascript"> $(document).ready(function(){ $.ajax({ type: "GET", url: "http://www.dj.com/dong.jsp", success: function(data){ $("#get_data").html(data) }, error: function() { alert("哎呦喂,失败了,回去检查你服务去~"); } }); }); </script> <body> <h1>曾老湿带你测试动静分离</h1> <img src="http://www.dj.com/1.jpg"> <div id="get_data"></div> </body> </html>
[root@web01 /dj]# vim /etc/nginx/conf.d/zy.conf server { listen 9000; location / { root /zy/android; index index.html; } } server { listen 9001; location / { root /zy/iphone; index index.html; } } server { listen 9002; location / { root /zy/pc; index index.html; } } # 创建站点目录 [root@web01 dj]# mkdir /zy/{android,iphone,pc} -p # 这个步骤是开发的活(写不同资源的前端页面) [root@web01 dj]# echo 'anzhuo' > /zy/android/index.html [root@web01 dj]# echo 'iphone' > /zy/iphone/index.html [root@web01 dj]# echo 'pc' > /zy/pc/index.html
[root@lb01 ~]# vim /etc/nginx/conf.d/zy.conf upstream android { server 172.16.1.7:9000; # server 172.16.1.8:9000; } upstream iphone { server 172.16.1.7:9001; } upstream pc { server 172.16.1.7:9002; } server { listen 80; server_name www.zy.com; location / { if ($http_user_agent ~* "Android") { proxy_pass http://android; } if ($http_user_agent ~* "Iphone") { proxy_pass http://iphone; } if ($http_user_agent ~* "MSIE") { return 403; } proxy_pass http://pc; } }