zoukankan      html  css  js  c++  java
  • Linux架构之Nginx 动静分离

    案例No.51:Nginx动静分离

    1、web01配置静态资源

    [root@web01 ~]# cd /etc/nginx/conf.d/
    #配置静态资源
    [root@web01 conf.d]# cat dj_oldboy.conf
    server{
    listen 80;
          server_name pic.drz.com;
          root /code;
          index index.html;

          location ~* .*.(jpg|png|gif)$ {
                  root /code/images;
          }
    }

    #配置一个主页
    [root@web01 conf.d]# echo "zls_test_web01" > /code/index.html
    #创建图片目录
    [root@web01 conf.d]# mkdir -p /code/images/
    [root@web01 conf.d]# cd /code/images/

    #上传一个静态文件
    [root@web01 images]# rz cjk.gif

    修改域名解析文件,hosts,10.0.0.7   pic.drz.com  

    [root@web01 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@web01 conf.d]# nginx -s reload


    打开浏览器,访问http://pic.drz.com,页面跳转至静态页面。

      

    打开浏览器,访问http://pic.drz.com/pic5.gif,页面显示动态图。

     

     

    2、接下来做动静分离,将.jsp、.php、.java等内容写在web02上,web02配置动态资源

    [root@web02 ~]# yum install -y tomcat
    [root@web02 ~]# mkdir -p /usr/share/tomcat/webapps/ROOT
    [root@web02 ~]# cat /usr/share/tomcat/webapps/ROOT/java_test.jsp
    <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
    <HTML>
      <HEAD>
          <TITLE>曾老湿JSP Page</TITLE>
      </HEAD>
      <BODY>
          <%
              Random rand = new Random();
              out.println("<h1>曾老湿随机数:<h1>");
              out.println(rand.nextInt(99)+100);
          %>
      </BODY>
    </HTML>

    [root@web02 webapps]# systemctl start tomcat

    打开浏览器,访问http://10.0.0.8:8080/java_test.jsp,页面显示静态页面,是一个随机数。

    3、在负载均衡上调度

    [root@lb01 conf.d]# cat proxy_ds.conf 
    upstream static {
          server 172.16.1.7:80;
    }

    upstream java {
          server 172.16.1.8:8080;
    }

    server {
          listen 80;
          server_name pic.drz.com;

          location ~* .(jpg|png|gif)$ {
                  proxy_pass http://static;
                  proxy_set_header Host $http_host;
          }

          location ~ .jsp {
                  proxy_pass http://java;
                  proxy_set_header Host $http_host;
          }
    }


    修改域名解析文件,hosts,10.0.0.5   pic.drz.com ,通过负载访问动态与静态资源


    [root@lb01 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@lb01 conf.d]# nginx -s reload

     

    打开浏览器,访问http://pic.drz.com/pic5.gif,页面显示动态图。

     

     

    打开浏览器,访问http://pic.drz.com/java_test.jsp,页面显示静态页面。

     

    4、负载均衡上整合动态和静态的html文件,写html文件使动态资源和静态资源显示在同一个页面中。

    #编辑配置文件
    [root@lb01 ~]# cat /etc/nginx/conf.d/proxy_ds.conf
    upstream static {
          server 172.16.1.7:80;
    }

    upstream java {
          server 172.16.1.8:8080;
    }

    server {
          listen 80;
          server_name pic.drz.com;
           
          location / {
              root /code;
              index index.html;
          }
           
          location ~* .(jpg|png|gif)$ {
                  proxy_pass http://static;
                  proxy_set_header Host $http_host;
          }

          location ~ .jsp {
                  proxy_pass http://java;
                  proxy_set_header Host $http_host;
          }
    }

    [root@lb01 ~]# mkdir -p /code

    #编辑整合后的index.html
    [root@lb01 ~]# cat /code/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://pic.drz.com/java_test.jsp",
          success: function(data){
                  $("#get_data").html(data)
          },
          error: function() {
                  alert("哎呦喂,失败了,回去检查你服务去~");
          }
          });
    });
    </script>
          <body>
                  <h1>曾老湿带你测试动静分离</h1>
                  <img src="http://pic.drz.com/cjk.gif">
                  <div id="get_data"></div>
          </body>
    </html>


    修改域名解析文件,hosts,10.0.0.5   pic.drz.com ,通过负载访问动态与静态资源


    [root@lb01 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@lb01 conf.d]# nginx -s reload

     

  • 相关阅读:
    js 修改 title keywords description
    添加第一次进入网站动画
    懒加载
    一些正则
    对图片进行剪切,保留原始比例
    JS判断是否是微信页面,判断手机操作系统(ios或android)并跳转到不同下载页面
    判断网页是否再微信内置浏览器打开
    数字转汉字大写
    java 反射机制 之 getConstructor获取有参数构造函数 然后newInstance执行有参数的构造函数
    web实训项目(快递e栈)-----04项目实现的基本流程
  • 原文地址:https://www.cnblogs.com/dabai-wang09/p/11426046.html
Copyright © 2011-2022 走看看