Nginx配置实例—动静分离

1、动静分离概念重温

Nginx动静分离可以简单的理解为把动态跟静态分离开来,不能理解成只是单纯的把动态页面和静态页面物理上的分离。严格意义上来说应该是把动态请求和静态请求分离,即nginx处理静态页面,tomcat等应用服务器处理动态页面。动静分离从目前的实现角度来讲大致分为两类:一种是纯粹把静态文件放在一个独立的服务器上,有一个独立的域名,也是目前主流推崇的方案另一种是动态文件和静态文件混在一起发布,通过nginx分离开来,通过location配置不同的后缀名实现不同的请求转发

2、Nginx动静分离实战配置

2.1 准备静态资源

首先在Liunx系统根目录下新建一个文件夹/resources/static用于存放静态文件

[root@localhost /]# cd static
[root@localhost static]# mkdir images
[root@localhost static]# wget -o images http://nginx.org/nginx.png
2.2 准备动态资源

在tomcat的webapps/ROOT目录下新建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>
2.3 在nginx中配置对静态请求和动态请求的处理逻辑

完成资源文件的准备后,启动两个tomcat,分别监听8080和8081,之后在nginx的配置文件做如下简单配置:

http {
    #配置两个tomcat,让nginx均衡负载
    upstream tomcatserver{
       server 192.168.92.128:8080;
       server 192.168.92.128:8081;
    }

    server {
        listen       80;
        server_name  192.168.92.128;

        charset utf-8;

        #对静态资源的配置,使用Nginx进行处理响应
        location ~ .*\.(js|css|ico|png|jpg|eot|svg|ttf|woff)$ {
            #root目录指向的就是静态资源所在的路径
            root  /static/images/;
        }
       
        #对动态请求,由nginx转发到tomcat等应用服务器进行处理 
        location  ~ .*\.jsp$ {
           proxy_pass http://tomcatserver;
        }
    }
}

配置好后重启nginx,然后在浏览器地址栏中输入www.123.com/nginx.png ,能看到nginx的Logo图,说明对静态资源的配置没有问题;之后再输入www.123.com/test.jsp,能看到Random number:xxx,说明对动态请求的配置也能正常工作,运行截图如下:


图 1 nginx处理静态请求


图 2 nginx处理动态请求

整合动态资源和静态资源

上面通过一个简单的小测试体验了一下nginx的动静分离的效果,测试结果达到了预期效果。接下来我们来把他们整合在一起,即在一个页面中即有动态的也有静态的资源,通过nginx中配置帮我们完成对资源的请求,而我们所需做的就是输入www.123.com 这个地址即可。
(1)在/rsources目录下新建目录template,并在template中新建文件: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.123.com/test.jsp",
        success: function(data) {
                $("#get_data").html(data)
        },
        error: function() {
                alert("fail!!,请刷新再试!");
        }
        });
});
</script>
        <body>
                <h1>测试动静分离</h1>
                <img src="http://www.123.com/nginx.png">
                <div id="get_data"></div>
        </body>
</html>

保存文件之后修改nginx配置文件如下:

http {
    #配置两个tomcat,让nginx均衡负载
    upstream tomcatserver{
       server 192.168.92.128:8080;
       server 192.168.92.128:8081;
    }

    server {
        listen       80;
        server_name  192.168.92.128;

        charset utf-8;
   
        location / {
          root /resources/template/;
          index index.html;
        }

        #对静态资源的配置,使用Nginx进行处理响应
        location ~ .*\.(js|css|ico|png|jpg|eot|svg|ttf|woff)$ {
            #root目录指向的就是静态资源所在的路径
            root  /resources/static/images/;
        }
       
        #对动态请求,由nginx转发到tomcat等应用服务器进行处理 
        location  ~ .*\.jsp$ {
           proxy_pass http://tomcatserver;
        }
    }
}

配置好后重启nginx,然后在浏览器地址栏中输入www.123.com,如果在网页上能看到如下图所示内容表示配置成功,运行截图如下:


图 3 动静资源正常加载

留言区

还能输入500个字符