10.1 什么是动静分离
- Nginx 动静分离简单来说就是把动态跟静态请求分开,可以理解成使用 Nginx 处理静态页面/资源,Tomcat 处理动态页面/资源
- 动静分离可以减轻 Tomcat 压力,静态请求由 Nginx 处理,提供系统整体性能
- 回顾前面-示意图
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/f54b6f949e3d4f8430615e6053b01af4.png)
10.2 需求说明/图解
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/b7d07d3d3a6578d9c3bf45729c18953f.png#pic_center)
10.4 先使用传统方式实现
- 创建 tomcat\webapps\search\cal.jsp [说明:为了测试方便,在tomcat2也对应创建一份]
<%--
Created by IntelliJ IDEA.
User: 谢家升
Version: 1.0
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>hello, jsp</title>
</head>
<body>
<img src="image/cal.jpg"/>
<h1>JSP, 计算器</h1>
<%
int i = 22;
int j = 66;
int res = i + j;
out.println(i + " + " + j + " = " + res);
%>
</body>
</html>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/7a92461c19613bca1e11263b105547e4.png)
- 拷贝图片 cal.jpg 到 tomcat\webapps\search\image 目录,[说明:为了测试方便,在 tomcat2 也对应创建一份]
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/41be9abcf5a378dca31fc08dbcd0c625.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/230431ad9f3ce36aa4020f523662a398.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/b838dc3677d6ea5ad0e6e2f854721c32.png)
- 浏览器访问 http://www.xjscrm.com/search/cal.jsp 就可以看到正确页面
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/a1e1b6e8396e75d5da1a65a4bcdbe32e.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/6e9636ea504daa0e56ddffbb78adf2bd.png)
10.5 动静分离优化步骤
10.5.1 修改 安装目录\nginx.conf
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/34005d29a27ec36198367fe93b5c4da0.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/aa1162c3d332cdabf838e398b9e193c5.png)
10.5.2 创建 /usr/local/nginx/html/search/image 目录
- 创建 /usr/local/nginx/html/search/image 目录,因为图片路径其实是 ip/search/image
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/a3b0c02a21b3a1c286da196dc8c8f00e.png)
10.5.3 将 Linux 的两个 Tomcat\webapps\search\image 目录删除
- 将 Linux 的两个 Tomcat\webapps\search\image 目录删除,并在 /usr/local/nginx/html/search/image 目录下放入图片
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/49a0899b5ae65d43441e7035b539e339.png)
10.5.4 linux 防火墙打开 80 端口, 保证外网可以访问
10.6 完成测试
10.6.1 启动 或者 重新加载 Nginx
10.6.2 windows 浏览器输入 http://www.xjscrm.com/search/cal.jsp
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/48e7bf4e40e6492a8e6fea87fc344ccd.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/aab848fcf651405c599c18f422fc6afc.png)
- 这时图片就是从 Nginx 直接返回的
- 而请求 cal.jsp 才转发到对应 tomcat 完成
10.6.3 如果有 css js 文件 需要动静分离,按照规则配置即可
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/6cb155ba2cfb5f3c5c69060f7bd7d287.png)