Nginx配置实例—动静分离_LoveIT的博客

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 动静资源正常加载