[转帖]Nginx动静分离详解以及配置

nginx,动静,分离,详解,以及,配置 · 浏览次数 : 0

小编点评

**Nginx 静态分离** **简介** nginx 静态分离是一种技术，通过中间件将动态请求和静态请求进行分离，从而减少请求延迟和资源消耗。 **应用案例** * 静态资源，如图像和字体，可以被静态分离以提高性能。 * 动态资源，如应用程序代码，可以缓存以减少请求。 **配置步骤** 1. 创建动静分离配置文件 `ds.conf`。 2. 编译并安装 Tomcat。 3. 配置动态资源。 4. 配置动静分离负载均衡。 **配置文件示例 (ds.conf)** ```nginx listen 80; server_name ds.com; location / { root /web; index index.html; } location ~* .*\\.(png|jpg|gif)$ { root /web/images; } ``` **整合静态分离** 1. 在 `index.html` 中嵌入静态图片和 JavaScript。 2. 使用 jQuery 或其他 JavaScript 库发送 GET 请求获取动态页面。 **效果** 静态资源不会受到动态请求的影响，而静态页面将按照正常方式加载。如果动态服务不可用，但静态资源可访问，则静态资源不会受到影响。

正文

https://developer.aliyun.com/article/885602?spm=a2c6h.24874632.expert-profile.314.7c46cfe9h5DxWK

简介： 1.Nginx动静分离概念动静分离，通过中间件将动态请求和静态请求进行分离，分离资源，减少不必要的请求消耗，减少请求延时。好处：动静分离后，即使动态服务不可用，但静态资源不会受到影响通过中间件可以将动态请求和静态请求进行分离

1.Nginx动静分离概念

动静分离，通过中间件将动态请求和静态请求进行分离，分离资源，减少不必要的请求消耗，减少请求延时。

好处：动静分离后，即使动态服务不可用，但静态资源不会受到影响

通过中间件可以将动态请求和静态请求进行分离

2.Nginx动静分离应用案例2.1.环境规划2.2.配置静态资源

1.创建动静分离配置文件
[root@localhost ~]# cd /etc/nginx/conf.d/
[root@localhost conf.d]# vim ds.conf
#动静分离
server {
  listen 80;
  server_name ds.com;
  
  location / {
    root /web;
    index index.html;
  }
  
  location ~* .*\.(png|jpg|gif)$ {
    root /web/images;
  }
}

2.重载Nginx
[root@localhost conf.d]# nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful
[root@localhost conf.d]# systemctl reload nginx

3.准备图片
[root@localhost conf.d]# mkdir /web/images
[root@localhost conf.d]# wget -O /web/images/nginx.png http://nginx.org/nginx.png

2.3.配置动态资源

1.编译安装tomcat
[root@localhost soft]# tar xf apache-tomcat-7.0.92.tar.gz  -C /application/

2.写入动态文件
[root@localhost soft]# cd /application/
[root@localhost application]# vim apache-tomcat-7.0.92/webapps/ROOT/java_test.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<HTML>
    <HEAD>
        <TITLE>JSP Test Page</TITLE>
    </HEAD>
    <BODY>
      <%
        Random rand = new Random();
        out.println("<h1>Random number:</h1>");
        out.println(rand.nextInt(99)+100);
      %>
    </BODY>
</HTML>

3.启动服务
[root@localhost application]# cd apache-tomcat-7.0.92/
[root@localhost apache-tomcat-7.0.92]# ./bin/startup.sh

2.4.整合动静分离

2.4.1.配置动静分离负载均衡

[root@localhost conf.d]# vim lb_ds.conf
#整合动静分离
upstream static_photo {
        server 172.16.1.20:80;
}

upstream java {
        server 172.16.1.30:8080;
}

server {
        listen 80;
        server_name ds.com;
        access_log /nginx_log/lb_ds_access.log main;

        location / {
                root /web/ds;
                index index.html;
        }

        location ~* .*\.(jpg|png|gif)$ {
                proxy_pass http://static_photo;
                proxy_set_header HOST $http_host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }

        location ~* .jsp$ {
                proxy_pass http://java;
                proxy_set_header HOST $http_host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
}

2.4.2.编写整合动静分离代码

[root@localhost conf.d]# vim /web/ds/index.html
<html lang="en">
<head>
        <meta charset="UTF-8" />
        <title>测试动静分离</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://ds.com/java_test.jsp",
        success: function(data) {
                $("#get_data").html(data)
        },
        error: function() {
                alert("fail!!,请刷新再试");
        }
        });
});
</script>
        <body>
                <h1>测试动静分离</h1>
                <h1>上面为静态图片，下面为动态页面</h1>
                <img src="http://ds.com/nginx.png">
                <div id="get_data"></div>
        </body>
</html>

2.5.效果

看着是一个页面实则不同机器在做处理