一、实现动静分离的优势
-
动静分离是将网站的静态资源(HTML,JavaScript,CSS,img等文件)与后台应用分开部署,提高用户访问静态代码的速度,降低对后台应用的访问
-
主要是nginx处理静态页面的效率远高于tomcat的处理能力,如果tomcat的请求量为1000次,则nginx的请求量为6000次,tomcat每秒的吞吐量为0.6M,nginx的每秒吞吐量为3.6M,可以说,nginx处理静态资源的能力是tomcat处理能力的6倍,优势可见一斑。
-
动态资源和静态资源分开,使服务器结构更清晰。
二、动静分离原理
- 服务端接收来自客户端的请求中,有一部分是静态资源的请求,例如html,css,js和图片资源等等,有一部分是动态数据的请求。因为tomcat处理静态资源的速度比较慢,所以我们可以考虑把所有静态资源独立开来,交给处理静态资源更快的服务器例如nginx处理,而把动态请求交给tomcat处理。
- 如下图所示,我们在机器上同时安装了nginx和tomcat,把所有的静态资源都放置在nginx的webroot目录下面,把动态请求的程序都放在tomcat的webroot目录下面,当客户端访问服务端的时候,如果是静态资源的请求,就直接到nginx的webroot目录下面获取资源
- 如果是动态资源的请求,nginx利用反向代理的原理,把请求转发给tomcat进行处理,这样就实现了动静分离,提高了服务器处理请求的性能。
三、案例部署
3.1 案例环境
服务类型 | IP地址 | 软件包 |
---|---|---|
Tomcat服务器 | 172.16.1.10 | jdk-8u91-linux-x64.tar.gz、apache-tomcat-8.5.16.tar.gz |
Nginx服务器 | 172.16.1.20 | nginx-1.12.2.tar.gz |
3.2 案例配置
- Nginx
# 安装依赖包
[root@nginx ~]# yum -y install gcc gcc-c++ make pcre-devel zlib-devel
# 创建名为nginx的用户,且不允许登录系统
[root@nginx ~]# useradd -M -s /sbin/nologin nginx
# 编译安装nginx软件包
[root@nginx ~]# tar xf nginx-1.12.2.tar.gz
[root@nginx ~]# cd nginx-1.12.2
[root@nginx nginx-1.12.2]# ./configure --prefix=/usr/local/nginx --user=nginx --group=nginx
[root@nginx nginx-1.12.2]# make && make install
# 编辑脚本,使用service工具,控制服务
[root@nginx ~]# vi /etc/init.d/nginx
#!/bin/bash
# chkconfig: - 99 20
# description: Nginx Service Control Script
PROG="/usr/local/nginx/sbin/nginx"
PIDF="/usr/local/nginx/logs/nginx.pid"
case "$1" in
start)
$PROG
;;
stop)
kill -s QUIT $(cat $PIDF)
;;
restart)
$0 stop
$0 start
;;
reload)
kill -s HUP $(cat $PIDF)
;;
*)
echo "Usage: $0 {start|stop|restart|reload}"
exit 1
esac
exit 0
# 添加执行权限,将脚本文件添加到服务列表中
cd /etc/init.d
[root@nginx ~]# chmod +x /etc/init.d/nginx
[root@nginx ~]# chkconfig --add nginx
[root@nginx ~]# chkconfig --level 35 nginx on
# 关闭防火墙,开启nginx服务
[root@nginx ~]# iptables -F
[root@nginx ~]# setenforce 0
[root@nginx ~]# systemctl start nginx
[root@nginx ~]# netstat -anpt | grep 80
tcp 0 0 0.0.0.0:80 0.0.0.0:* LISTEN 1436/nginx: master
# 配置nginx.conf,开启反向代理功能。
[root@nginx ~]# vi /etc/nginx
# 添加以下
server {
. . .省略. . .
location ~.*.jsp$ { #正则表达式,即任何以.jsp结尾的url
proxy_pass http://192.168.100.131:8080; #转到172.16.1.10:8080
proxy_set_header Host $host;
}
# 重启nginx
[root@nginx ~]# systemctl restart nginx
# 创建nginx的站点内容
[root@nginx ~]# vi /usr/local/nginx/html/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> #第一处添加,使之支持中文字符
<title>Welcome to nginx!</title>
<style>
body {
width: 35em;
margin: 0 auto;
font-family: Tahoma, Verdana, Arial, sans-serif;
}
</style>
</head>
<body>
<h1>静态页面!</h1> #第二处修改
<p>这是个静态页面</p> #第三处修改
</body>
</html>
[root@nginx ~]# systemctl restart nginx
- Tomcat
# 解压软件包jdk
[root@tomcat ~]# tar zxf jdk-8u91-linux-x64.tar.gz -C /usr/local/
# 配置环境变量
[root@tomcat ~]# vi /etc/profile
# 追加到最后
export JAVA_HOME=/usr/local/jdk1.8.0_91 #指定家目录
export JRE_HOME=${JAVA_HOME}/jre #java虚拟机
export CLASSPATH=.:${JAVA_HOME}/lib:${JRE_HOME}/lib #java函数库
export PATH=${JAVA_HOME}/bin:$PATH
[root@tomcat ~]# source /etc/profile
# 解压tomcat软件包
[root@tomcat ~]# tar zxf apache-tomcat-8.5.16.tar.gz -C /usr/local/
[root@tomcat ~]# mv /usr/local/apache-tomcat-8.5.16/ /usr/local/tomcat
# 建立软链接,便于服务控制
[root@tomcat ~]# ln -s /usr/local/tomcat/bin/startup.sh /usr/local/bin/tomcatup
[root@tomcat ~]# ln -s /usr/local/tomcat/bin/shutdown.sh /usr/local/bin/tomcatdown
# 关闭防火墙,开启tomcat服务
[root@tomcat ~]# iptables -F
[root@tomcat ~]# setenforce 0
[root@tomcat ~]# tomcatup
[root@tomcat ~]# netstat -anpt | grep 8080
tcp6 0 0 :::8080 :::* LISTEN 33263/java
# 修改Tomcat的server.xml文件
[root@tomcat ~]# vi /usr/local/tomcat/conf/server.xml
<Host nane="localhost" appBase="webapps"
unpackWARs="true" autoDeploy="true" >
# 添加以下行
<Context docBase="/web/webapp1" path="" reloadable="false">
</Context>
# 重启服务
[root@tomcat ~]# tomcatdown
[root@tomcat ~]# tomcatup
# 创建tomcat的站点内容
[root@tomcat ~]# mkdir -p /web/webapp1
[root@tomcat ~]# vi /web/webapp1/index.jsp
<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.util.Date" %>
<%@ page import="java.text.SimpleDateFormat" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/ html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>动态页面</title>
</head>
<body>
<h1>动态页面</h1>
<p>这是个动态页面</p>
<img src="test.jpg"/>
</body>
</html>
3.3 效果验证
-
静态
-
动态