Nginx与Tomcat实现动静分离
一、动静分离的含义.
动静分离是将网站静态资源（HTML，JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。 动静分离的做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目的。
1、动静分离的优缺点
优点：
- api接口服务化：动静分离之后，后端应用更为服务化，只需要通过提供api接口即可，可以为多个功能模块甚至是多个平台的功能使用，可以有效的节省后端人力，更便于功能维护。
- 前后端开发并行：前后端只需要关心接口协议即可，各自的开发相互不干扰，并行开发，并行自测，可以有效的提高开发时间，也可以有效减少联调时间。
- 减轻后端服务器压力，提高静态资源访问速度：后端不用再将模板渲染为html返回给用户端，且静态服务器可以采用更为专业的技术提高静态资源的访问速度。
缺点：
- 不利于网站SEO（搜索引擎优化）：搜索引擎的网络爬虫一般是根据url访问页面，获取页面的内容后去掉没用的信息例如：CSS，JavaScript，然后分析剩下的文本内容；动静分离架构模式前端数据即在是由JavaScript来完成，这就会导致网络爬虫得到的信息部分丢失。在开发中可以采用前端缓存不经常变化数据的方式来解决，只有哪些经常发生变化的数据才每次向后端请求。
- 开发量变大，前后端交流成本升高：后端api返回的数据，往往是有自身逻辑在内的。
- 在业务高速发展时需要慎重考虑：因为开发量变大，如果在业务开始阶段，缺乏前端又要求开发速度很快，就需要慎重考虑这种方式，实现成本对业务发展的影响。
二：实验过程
1、实验环境
-
VMwareWorkstation软件
-
一台centos7系统作为nginx服务器，IP地址：192.168.48.128
-
一台centos7系统作为Tomcat服务器，IP地址：192.168.48.137
-
一台客户端作为验证
-
所需软件包自行提取：
链接：https://pan.baidu.com/s/17rOvCuvSxvJ7ae5HihakAA
提取码：lbrt
2、实验目的
由于Tomcat本身处理静态效率不高，还会带来资源消耗，因此使用动静分离，将静态请求交由Nginx处理，动态请求交由Tomcat处理。
Nginx根据客户端请求的url来判断请求的是否是静态资源，如果请求的url包含jpg、png，则由Nginx处理；如果请求的url是.php或者.jsp等，则被认为是动态的，将转发tomcat处理。即Nginx通过url来区分请求的类型，并且转发给不同的服务端。
3、实验步骤
部署nginx服务器
（1）挂载并解压nginx软件包
[root@nginx1 ~]# mkdir /abc
[root@nginx1 ~]# mount.cifs //192.168.0.107/share /abc '挂载所需文件夹'
[root@nginx1 abc]# tar zxvf nginx-1.12.2.tar.gz -C /opt
（2）安装相关软件包，添加nginx用户
[root@nginx1 opt]# yum install pcre-devel zlib-devel gcc gcc-c++ make -y
[root@nginx1 opt]# useradd -M -s /sbin/nologin nginx
（3）编译安装nginx
[root@nginx1 opt]# cd nginx-1.12.2/
[root@nginx1 nginx-1.12.2]# ./configure \
--prefix=/usr/local/nginx \
--user=nginx \
--group=nginx \
--with-http_stub_status_module
[root@nginx1 nginx-1.12.2]# make && make install
[root@nginx1 nginx-1.12.2]# ln -s /usr/local/nginx/sbin/nginx /usr/local/sbin/ ‘创建nginx命令软连接’
[root@nginx1 nginx-1.12.2]# nginx -t ‘检查语法’
（4）创建nginx启动脚本
[root@nginx nginx-1.12.2]# vim /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
（5）增加执行权限，添加到service管理
[root@nginx nginx-1.12.2]# chmod +x /etc/init.d/nginx
[root@nginx nginx-1.12.2]# chkconfig --add nginx
（6）开启nginx，关闭防火墙
[root@nginx nginx-1.12.2]# service nginx start
[root@nginx nginx-1.12.2]# netstat -ntap |grep 80
tcp 0 0 0.0.0.0:80 0.0.0.0:* LISTEN 66115/nginx: master
[root@nginx1 nginx-1.12.2]# systemctl stop firewalld.service
[root@nginx1 nginx-1.12.2]# setenforce 0
（7）在client客户端测试
输入nginx服务器的IP地址
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-o2uizXxK-1586271038466)(C:\Users\xumin\AppData\Roaming\Typora\typora-user-images\1586247868379.png)]](https://i-blog.csdnimg.cn/blog_migrate/70d35a0a9ff6a0b28e81fc347ffdee7c.png)
搭建Tomcat
（1）挂载相关软件包并解压
[root@tomcat ~]# mkdir /abc
[root@tomcat ~]# mount.cifs //192.168.0.107/share /abc
[root@tomcat abc]# tar zxvf jdk-8u91-linux-x64.tar.gz -C /usr/local
（2）配置环境变量
[root@tomcat Tomcat]# vim /etc/profile
‘末行添加’
export JAVA_HOME=/usr/local/jdk1.8.0_231
export JRE_HOME=${JAVA_HOME}/jre
export CLASSPATH=.:${JAVA_HOME}/lib:${JRE_HOME}/lib
export PATH=${JAVA_HOME}/bin:$PATH
[root@tomcat Tomcat]# source /etc/profile ‘使得环境变量运行’
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KYGIqjsS-1586271038468)(C:\Users\xumin\AppData\Roaming\Typora\typora-user-images\1586269020349.png)]](https://i-blog.csdnimg.cn/blog_migrate/e00ee73722aba50431cfe06852df4d20.png)
（3）解压tomcat软件包，修改文件名便于操作
[root@tomcat Tomcat]# tar zxvf apache-tomcat-8.5.16.tar.gz -C /usr/local
[root@tomcat Tomcat]# cd /usr/local
[root@tomcat local]# mv apache-tomcat-8.5.16/ tomcat/
（4）建立软链接
[root@tomcat local]# cd tomcat/bin
[root@tomcat bin]# ln -s /usr/local/tomcat/bin/shutdown.sh /usr/local/bin
[root@tomcat bin]# ln -s /usr/local/tomcat/bin/startup.sh /usr/local/bin
（5）关闭防火墙，开启服务
[root@tomcat bin]# systemctl stop firewall
[root@tomcat bin]# setenforce 0
[root@tomcat bin]# startup.sh
[root@tomcat ~]# netstat -ntap | grep 8080
tcp6 0 0 :::8080 :::* LISTEN 2805/java
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2fDYmf9v-1586271038468)(C:\Users\xumin\AppData\Roaming\Typora\typora-user-images\1586269339296.png)]](https://i-blog.csdnimg.cn/blog_migrate/425b33f836498b456b81993b7691e6b2.png)
（6）网页测试
在客户端上输入tomcat服务器的网址和端口号
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dXo8dwx5-1586271038469)(C:\Users\xumin\AppData\Roaming\Typora\typora-user-images\1586269390607.png)]](https://i-blog.csdnimg.cn/blog_migrate/865593ff976bbb15c3dbf551a3826d30.png)
配置动静分离
-
在nginx服务器上
（1） 设置动态请求交由Tomcat处理
[root@nginx nginx-1.12.2]# cd /usr/local/nginx/conf/
[root@nginx conf]# vim nginx.conf
‘这一段添加内容’
server {
listen 80;
server_name localhost;
location ~.*.jsp$ { '添加上'
proxy_pass http://192.168.48.137:8080; '修改为Tomcat服务器地址'
proxy_set_header Host $host;
}
#charset koi8-r;
...省略内容
（2）设置静态网页内容
[root@nginx conf]# vim /usr/local/nginx/html/index.html
<!DOCTYPE html>
<html>
<head>
<title>静态页面</title> '修改标题'
<meta http-equiv="content-type" content="text/html;charset=utf-8"> '设置支持中文字符集'
<style>
body {
width: 35em;
margin: 0 auto;
font-family: Tahoma, Verdana, Arial, sans-serif;
}
</style>
</head>
<body>
<h1>欢迎来到静态网站</h1> '修改内容主题'
<p>If you see this page, the nginx web server is successfully installed and
working. Further configuration is required.</p>
<p>For online documentation and support please refer to
<a href="http://nginx.org/">nginx.org</a>.<br/>
Commercial support is available at
<a href="http://nginx.com/">nginx.com</a>.</p>
<p><em>谢谢.</em></p> '设置页尾内容'
</body>
</html>
重启服务
[root@nginx html]# service nginx stop
[root@nginx html]# service nginx start
（3）在客户端进行网页测试
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8CvPKYEq-1586271038469)(C:\Users\xumin\AppData\Roaming\Typora\typora-user-images\1586270064404.png)]](https://i-blog.csdnimg.cn/blog_migrate/fd3b8784c51bc9b34c23d3bad24e9ea1.png)
-
在tomcat服务器上
（1）设置被访问的动态网页内容
[root@tomcat local]# mkdir /usr/local/tomcat/webapps/test
[root@tomcat local]# vim /usr/local/tomcat/webapps/test/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>
<div>动态页面</div>
</body>
</html>
（2）网页测试
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7mU11GB4-1586271038470)(C:\Users\xumin\AppData\Roaming\Typora\typora-user-images\1586270314611.png)]](https://i-blog.csdnimg.cn/blog_migrate/44aaa70392a13e9a93d51bb958576b98.png)
（3）动静分离的测试
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6u3ZjPhr-1586271038470)(C:\Users\xumin\AppData\Roaming\Typora\typora-user-images\1586270440935.png)]](https://i-blog.csdnimg.cn/blog_migrate/b803c52d40360245be2cc8fdf92a4412.png)
（1）tomcat 配置，添加静态图片
[root@tomcat local]# vim /usr/local/tomcat/webapps/test/index.jsp
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-M7ChDTVO-1586271038470)(C:\Users\xumin\AppData\Roaming\Typora\typora-user-images\1586270604626.png)]](https://i-blog.csdnimg.cn/blog_migrate/936859fc4c59ebe60698f6504390705c.png)
（2）nginx配置
[root@localhost ~]# cd /usr/local/nginx/conf
[root@localhost conf]# vim nginx.conf
‘修改内容’
server {
listen 80;
server_name localhost;
location ~.*\.(gif|jpg|jpeg|png|bmp|swf|css)$ { '添加此段内容，匹配这些类型的文件'
root html; 'html站点目录'
expires 30d; '缓存时间30天'
}
location ~.*.jsp$ {
proxy_pass http://192.168.48.137:8080;
proxy_set_header Host $host;
}
...省略内容
[root@nginx conf]# cd /usr/local/nginx/html
[root@nginx html]# mkdir test
[root@nginx html]# cd /abc
[root@nginx abc]# cp dog.jpg /usr/local/nginx/html/test/
[root@nginx abc]# cd /usr/local/nginx/html/test/
[root@nginx test]# ls
dog.jpg
[root@nginx test]# service nginx stop
[root@nginx test]# service nginx start
（3）在客户机上进行访问测试
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vWFZLKMm-1586271038471)(C:\Users\xumin\AppData\Roaming\Typora\typora-user-images\1586270976805.png)]](https://i-blog.csdnimg.cn/blog_migrate/6f17fdf6ebf36fab483b846c0ecfb5fc.png)
扫一扫
1697
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
