Nginx的应用之动静分离

最新推荐文章于 2024-09-24 10:23:17 发布

weixin_30588729

最新推荐文章于 2024-09-24 10:23:17 发布

阅读量122

点赞数

文章标签：运维 java 开发工具

原文链接：http://www.cnblogs.com/Smbands/p/11415727.html

版权

Nginx 的动静分离

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

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

应用实例

1、准备环境

系统	角色	主机名	IP	服务
CentOS 7.2	反向代理	Nginx_Proxy	192.168.1.10	Nginx：v1.16.1
CentOS 7.2	静态资源	Nginx_Static	192.168.1.11	Nginx：v1.16.1
CentOS 7.2	动态资源	Tomcat_Server	192.168.1.12	Tomcat/7.0.76

2、配置服务器

2.1、在Nginx Static主机中配置静态资源（以图片为例）

[root@Nginx_Static]# vim /etc/nginx/conf.d/static.conf
server {
        listen 80;
        server_name static.com;
        root /data/www/static;
        index index.html;

        location ~* .*\.(png|jpg|gif)$ {
                root /data/www/static/images;
        }
}
#准备存放图片的目录及图片
[root@Nginx_Static]# mkdir -pv /data/www/static/images
[root@Nginx_Static]# wget -O /data/www/static/images/nginx.png http://nginx.org/nginx.png
[root@Nginx_Static]# systemctl restart nginx

2.2、在 Tomcat_Server主机中配置动态资源（以随机数为例）

#安装Tomcat，并编辑随机数的jsp文件
[root@Tomcat_Server]# yum -y install tomcat
[root@Tomcat_Server]# mkdir /usr/share/tomcat/webapps/ROOT
[root@Tomcat_Server]# vim /usr/share/tomcat/webapps/ROOT/java.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>

#重启tomcat服务
[root@Tomcat_Server]#

2.3、在Nginx_Proxy主机上配置代理，实现访问jsp和png

[root@Nginx_Proxy]# vim /etc/nginx/conf.d/proxy.conf
upstream static {
    server 192.168.1.11:80;
}
upstream java {
    server 192.168.1.12:8080;
}

server {
    listen 80;
    server_name proxy.com;
    location / {
        root /data/www/whole;
        index index.html;
    }
    location ~ .*\.(png|jpg|gif)$ {
        proxy_pass http://static;
    }
    location ~ .*\.jsp$ {
        proxy_pass http://java;
    }
}
#重启nginx
[root@Nginx_Proxy]# systemctl restart nginx

2.4、通过代理服务器测试访问动态及静态资源

2.5、在Nginx_Proxy主机上将动态和静态资源合并为html文件

[root@Nginx_Proxy]# mkdir /data/www/whole
[root@Nginx_Proxy]# vim /data/www/whole/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://proxy.com/java.jsp",
        success: function(data) {
                $("#get_data").html(data)
        },
        error: function() {
                alert("fail!!,请刷新再试!");
        }
        });
});
</script>
        <body>
                <h1>测试动静分离</h1>
                <img src="http://proxy.com/nginx.png">
                <div id="get_data"></div>
        </body>
</html>