【运维知识进阶篇】集群架构-Nginx动静分离详解

2023-08-10 67

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 【运维知识进阶篇】集群架构-Nginx动静分离详解

我们先前将静态资源放到NFS，动态资源放到MySQL，一是为了提高我们Web服务器性能，减轻它的压力，另一面如果Web宕机了，我们的静态和动态资源还可以访问到。但是之前方式不管是静态还是动态文件，都是走的代码文件，通过代码文件调取的资源，那么我们越过代码文件去访问我们的资源，效率不是更高吗，如果服务器没出问题，但是代码出了问题，我们依旧可以访问到我们的资源。

本篇文章介绍Nginx动静分离，通过中间件将动态请求和静态请求进行分离，减少不必要的请求和请求时长，这样做提升了服务器运行效率，即使动态服务不可用了，但是静态资源不会收到影响。

使用Web01配置静态资源的文件

1. [root@Web01 wordpress]# vim /etc/nginx/conf.d/jing.conf
2. server {
3.         listen 80;
4.         server_name jing.koten.com;
5.         root /code;
6. index index.html;
7. 
8. location ~* .*\.(jpg|png|gif)$ {
9.                 root /code/images;
10.         }
11. }
12. ~                                                  
13. ~                                                  
14. ~                                                  
15. ~                                                  
16. ~                                                  
17. ~                                                  
18. <g.conf" [New] 10L, 199C written 
19. [root@Web01 wordpress]# nginx -t
20. nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
21. nginx: configuration file /etc/nginx/nginx.conf test is successful
22. [root@Web01 wordpress]# systemctl restart nginx
23. [root@Web01 wordpress]# echo 'Web01' > /code/index.html
24. [root@Web01 wordpress]# mkdir /code/images/
25. [root@Web01 wordpress]# cd /code/images/
26. [root@Web01 images]# rz
27. 
28. [root@Web01 images]#

使用Web02配置动态资源的文件

1. [root@web02 ~]# yum install -y tomcat
2. [root@web02 ~]# mkdir /usr/share/tomcat/webapps/ROOT
3. [root@web02 ~]# cat /usr/share/tomcat/webapps/ROOT/java_test.jsp
4. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
5. <HTML>
6. <HEAD>
7. <TITLE>koten JSP Page</TITLE>
8. </HEAD>
9. <BODY>
10. <%
11. Random rand = new Random();
12.             out.println("<h1>随机数:<h1>");
13.             out.println(rand.nextInt(99)+100);
14.         %>
15. </BODY>
16. </HTML>
17. 
18. [root@web02 webapps]# systemctl start tomcat

LB01负载均衡上调度静态文件和动态文件的配置文件

1. [root@LB01 conf.d]# vim proxy_jingdong.conf 
2. upstream webs {
3.  server 172.16.1.7;
4. }
5. 
6. upstream static {
7.         server 172.16.1.7:80;
8. }
9. 
10. upstream java {
11.         server 172.16.1.8:8080;
12. }
13. 
14. server {
15.         listen 80;
16.         server_name jingdong.koten.com;
17. 
18.       location / {
19.         proxy_pass http://webs;
20.       }
21. 
22. location ~* \.(jpg|png|gif)$ {
23.                 proxy_pass http://static;
24.                 proxy_set_header Host $http_host;
25.         }
26. 
27. location ~ \.jsp {
28.                 proxy_pass http://java;
29.                 proxy_set_header Host $http_host;
30.         }
31. }
32. 
33. 
34. [root@lb01 conf.d]# nginx -t
35. nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
36. nginx: configuration file /etc/nginx/nginx.conf test is successful
37. [root@lb01 conf.d]# systemctl restart nginx

修改本地hosts后测试

修改LB01的配置文件并在LB01上整合动态和静态的html文件

1. [root@LB01 ~]# cat /etc/nginx/conf.d/proxy_jingdong.conf 
2. upstream static {
3.         server 172.16.1.7:80;
4. }
5. 
6. upstream java {
7.         server 172.16.1.8:8080;
8. }
9. 
10. server {
11.         listen 80;
12.         server_name jingdong.koten.com;
13. 
14.   location / {
15.     root /code;
16.     index index.html; 
17.   }
18. 
19. location ~* \.(jpg|png|gif)$ {
20.                 proxy_pass http://static;
21.                 proxy_set_header Host $http_host;
22.         }
23. 
24. location ~ \.jsp {
25.                 proxy_pass http://java;
26.                 proxy_set_header Host $http_host;
27.         }
28. }
29. [root@LB01 ~]# systemctl restart nginx
30. [root@LB01 ~]# cat /code/index.html
31. <html lang="en">
32. <head>
33. <meta charset="UTF-8" />
34. <title>测试ajax和跨域访问</title>
35. <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
36. </head>
37. <script type="text/javascript">
38. $(document).ready(function(){
39.         $.ajax({
40. type: "GET",
41.         url: "http://jingdong.koten.com/java_test.jsp",
42.         success: function(data){
43.                 $("#get_data").html(data)
44.         },
45. error: function() {
46.                 alert("哎呦喂,失败了,回去检查你服务去~");
47.         }
48.         });
49. });
50. </script>
51. <body>
52. <h1>测试动静分离</h1>
53. <img src="http://jingdong.koten.com/小兔.jpg">
54. <div id="get_data"></div>
55. </body>
56. </html>

动静分离测试

关闭Web01的静态资源服务，查看动态资源是否收到影响

[root@Web01 code]# systemctl stop nginx

关闭Web02的动态资源服务，查看静态资源是否收到影响

1. [root@Web01 code]# systemctl start nginx
2. [root@Web02 conf.d]# systemctl stop tomcat

Nginx负载均衡实现手机和PC调度至不同的后端节点

1、准备一台LB01（10.0.0.5、172.16.1.5）一台Web01（172.16.1.7）开发9090、9091、9092端口分别为安卓、苹果、电脑提供服务。

2、配置Web的Nginx文件

1. [root@Web01 ~]# cat /etc/nginx/conf.d/phone.conf
2. server {
3.         listen 9090;
4. location / {
5.                 root /code/android;
6. index index.html;
7.         }
8. }
9. 
10. server {
11.         listen 9091;
12. location / {
13.                 root /code/iphone;
14. index index.html;
15.         }
16. }
17. 
18. server {
19.         listen 9092;
20. location / {
21.                 root /code/pc;
22. index index.html;
23.         }
24. }
25. [root@Web01 ~]# systemctl restart nginx

3、在Web上创建对应网站目录及代码

1. [root@Web01 ~]# mkdir /code/{android,iphone,pc}
2. [root@Web01 ~]# echo '我是安卓' > /code/android/index.html
3. [root@Web01 ~]# echo '我是苹果' > /code/iphone/index.html
4. [root@Web01 ~]# echo '我是电脑' > /code/pc/index.html

4、配置负载均衡服务

1. [root@LB01 ~]# cat /etc/nginx/conf.d/proxy_phone.conf
2. upstream android {
3.         server 172.16.1.7:9090;
4. }
5. 
6. upstream iphone {
7.         server 172.16.1.7:9091;
8. }
9. 
10. upstream pc {
11.         server 172.16.1.7:9092;
12. }
13. 
14. server {
15.         listen 80;
16.         server_name phone.koten.com;
17.         charset 'utf-8';
18. 
19. location / {
20. 
21.                 #如果客户端来源是Android则跳转到Android的资源；
22. if ($http_user_agent ~* "Android") {    #只要是日志里的都可以进行判断
23.                         proxy_pass http://android;
24.                 }
25. 
26.                 #如果客户端来源是Iphone则跳转到Iphone的资源；
27. if ($http_user_agent ~* "Iphone") {
28.                         proxy_pass http://iphone;
29.                 }
30. 
31.                 #如果客户端是IE浏览器则返回403错误；
32. if ($http_user_agent ~* "Edg") {
33. return 403;
34.                 }
35. 
36.                 #默认跳转pc资源；
37.                 proxy_pass http://pc;
38.         }
39. }

也可以进行如下设置

1. server {
2.         listen 80;
3.         server_name   www.koten.com;
4. if ($http_user_agent ~* "Android|Iphone") {
5. rewrite ^/$ http://m.koten.com redirect;
6.         }       
7. }