动静分离简述
# nginx动静分离基本概述
动静分离，通过中间件将动静分离和静态请求进行分离；
通过中间件将动态请求和静态请求分离，可以建上不必要的请求消耗，同事能减少请求的延时。
# 动静分离好处
动静分离后，即使动态服务不可用，但静态资源不会受到影响。
# 部署tomcat作用
存放后端编写JAVA代码的动态页面，tomcat作为解析JAVA代码，交由nginx处理，比tomcat稍微高级点的同类软件还有resin
动静分离实验
要求
# 实验要求
后端使用java代码，使用tomcat作为中间件，使用负载服务器，实现动静分离，动态请求（访问JAVA代码）发送到tomacat服务器中，静态请求（访问图片资源信息）发送到另外一条服务器中。
# 说明
实现动静分离主要依靠lb中的index页面代码，当用户访问lb的网站时=访问/code/index.html,然后index.html中写入代码为AJAX，所以实现动静效果主要依靠index文件中AJAX内容
环境准备
| 主机名 |
外网ip |
内网ip |
角色 |
| lb01 |
10.0.0.5 |
172.16.1.5 |
负载服务器 |
| web01 |
10.0.0.7 |
172.16.1.7 |
tomcat/动态页面 |
| web02 |
10.0.0.8 |
172.16.1.8 |
nginx/静态页面 |
操作流程
web02静态页面安装配置
# 1.nginx安装
[root@web02 ~]# yum install -y nginx
# 2.编辑nginx配置文件
[root@web02 /]# vim /etc/nginx/conf.d/static.conf
server {
listen 80;
server_name static.com;
root /code;
index index.html;
location ~* \.(jpg|gif|jpeg|png|mp4) { # 访问结尾为jpg，gif，jpeg，png，mp4（不区分大小写）结尾全部访问/root/images下图片
root /code/images;
}
}
# 3.检测配置文件语法并且启动服务
[root@web02 /]# nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful
[root@web02 /]# systemctl start nginx
# 4.根据配置文件创建对应目录
[root@web02 /]# mkdir /code/images -p
# 5.上传图片至/code/images目录下
[root@web02 images]# rz
[root@web02 images]# ll
total 20
-rw-r--r-- 1 root root 18869 May 22 07:26 88.jpg
web01动态页面安装配置
# 1.安装tomcat
[root@web01 ~]# yum install -y tomcat # 安装tomcat实现动态页面
# 2.进入tomcat的站点目录
[root@web01 ~]# cd /usr/share/tomcat/webapps/
# 3.创建ROOT目录（注意要大写）
[root@web01 webapps]# mkdir ROOT # 此目录为tomcat动态页面，ROOT需要手动创建
# 4.进入ROOT目录书写JAVA文件
[root@web01 ROOT]# vim java.jsp # JAVA代码nginx不认识，需要安装tomcat来帮助nginx认识
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<HTML>
<HEAD>
<TITLE>TCY Page</TITLE>
</HEAD>
<BODY>
<%
Random rand = new Random();
out.println("<h1>TCY:<h1>");
out.println(rand.nextInt(99)+100);
%>
</BODY>
</HTML>
# 5.启动tomcat服务
[root@web01 ROOT]# systemctl start tomcat
# 6.检测端口是否开启 # tomcat启动端口为9000，但同时会启动好几个端口，只是检测用9000来检测
[root@web01 ROOT]# netstat -lntup|grep 8080
tcp6 0 0 :::8080 :::* LISTEN 7172/java
lb代理配置
# 1. 安装nginx
[root@lb01 ~]# yum install -y nginx
# 2. 修改nginx配置文件
[root@lb01 ~]# vim /etc/nginx/conf.d/java_static.conf
server {
listen 80;
server_name www.static.com;
location / {
root /code;
index index.html;
}
location ~* \.(jpg|png|gif)$ { # 一旦用户访问以此结尾就走下面172.16.1.8里，并且带上头部去访问用户
proxy_pass http://172.16.1.8;
proxy_set_header Host $http_host;
}
location ~ \.jsp { # 一旦用户访问.jsp结尾（动态页面）则找172.16.1.7：8080，也就是tomcat处理
proxy_pass http://172.16.1.7:8080;
proxy_set_header Host $http_host;
}
}
# 3.配置AJAX页面，实现前后端分离
[root@lb01 ~]# mkdir /code
[root@lb01 code]# vim /code/index.html # 访问域名默认找此页面，主要里面的内容帮助实现前后端分离效果
<html lang="en"> # 想要看懂就去看一下AJAX
<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.static.com/java.jsp",
success: function(data){
$("#get_data").html(data)
},
error: function() {
alert("哎呦喂,失败了,回去检查你服务去~");
}
});
});
</script>
<body>
<h1>帅的一匹测试动静分离</h1>
<img src="http://www.static.com/88.jpg">
<div id="get_data"></div>
</body>
</html>
# 4.检测配置文件语法并且启动服务
[root@lb01 code]# 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 code]# systemctl start nginx
# 5.浏览器测试
· 浏览器直接访问lb负载均衡服务器即可，并且不需要输入uri
http://www.static.com/
tomcat实现动静分离（AJAX）