为什么 动态资源 和 静态资源分离
jsp等动态内容交由tomcat处理,nginx转发请求
静态资源文件(html、css、js、图片等)由nginx处理,速度更快。
如果静态资源也由tomcat处理,给tomcat带来不必要的负担,而且速度慢;而且nginx转发请求,显然增添不必要的步骤,速度更慢
原理
配置多个 location 块:
访问动态资源,通过反向代理转发给tomcat
访问静态资源,到静态资源路径去找相应文件
所以启动nginx docker时,需要 挂载静态资源路径
修改docker-compose.yml文件
在nginx配置中 挂载静态资源路径,如下:
version: '3'
services:
nginx:
image: nginx # 镜像
container_name: nginx # 指定容器名称
networks:
- mynet
ports: # bridge网络模式,指定映射端口
- "8000:80"
# network_mode: "host" # 指定网络模式
restart: always # 当docker服务启动时,容器总是跟着启动
volumes:
- /root/docker_nginx/conf.d:/etc/nginx/conf.d
- /root/docker_nginx/static:/nginx_static # 挂载静态资源路径
tomcat1:
image: tomcat # 镜像
container_name: tomcat1 # 指定容器名称
networks:
- mynet
ports: # bridge网络模式,指定映射端口
- "8080:8080"
restart: always # 当docker服务启动时,容器总是跟着启动
volumes:
- /root/docker_nginx/webapps1:/usr/local/tomcat/webapps
tomcat2:
image: tomcat # 镜像
container_name: tomcat2 # 指定容器名称
networks:
- mynet
ports: # bridge网络模式,指定映射端口
- "8081:8080"
restart: always # 当docker服务启动时,容器总是跟着启动
volumes:
- /root/docker_nginx/webapps2:/usr/local/tomcat/webapps
networks:
mynet:
准备静态文件
css
在 /root/docker_nginx/static路径下创建css文件夹
mkdir /root/docker_nginx/static/css
在该路径下创建 style.css 文件
vim /root/docker_nginx/static/css/style.css
内容如下:
* {
color: red;
}
js
在 /root/docker_nginx/static路径下创建js文件夹
mkdir /root/docker_nginx/static/js
在该路径下创建 1.js 文件
vim /root/docker_nginx/static/js/1.js
内容如下:
alert(1);
图片
在 /root/docker_nginx/static路径下创建imgs文件夹
mkdir /root/docker_nginx/static/imgs
上传一张图片
html
在 /root/docker_nginx/static路径下创建html文件夹
mkdir /root/docker_nginx/static/html
在该路径下创建 index.html 文件
vim /root/docker_nginx/static/html/index.html
内容如下:
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="/css/style.css">
<script type="text/javascript" src="/js/1.js"></script>
</head>
<body>
测试静态资源分离 <img src='/imgs/1.png'/>
</body>
</html>
配置
修改/root/docker_nginx/conf.d/default.conf
vim /root/docker_nginx/conf.d/default.conf
内容如下(通过url匹配):
# 增加 upstream 块,配置要负载均衡的服务
upstream tomcats { # tomcats是名字,可任意起,一般不要有下划线
server tomcat1:8080 ; # 由于使用自定义bridge网络,所以可以通过容器名通信
server tomcat2:8080 ;
}
server{
listen 80;
server_name localhost;
location /html { # 处理url:http://ip:port/html/xxx
root /nginx_static; # 设置根路径,拼装后是:/nginx_static/html
index index.html; # 默认首页是index.html
}
location /js { # 处理url:http://ip:port/js/xxx
root /nginx_static; # 设置根路径,拼装后是:/nginx_static/js
}
location /css { # 处理url:http://ip:port/css/xxx
root /nginx_static; # 设置根路径,拼装后是:/nginx_static/css
}
location /imgs { # 处理url:http://ip:port/imgs/xxx
root /nginx_static; # 设置根路径,拼装后是:/nginx_static/imgs
expires 7d; # 缓存7天
}
location / {
proxy_pass http://tomcats;
proxy_connect_timeout 2;
}
}
使配置文件生效
方法一:重启nginx docker容器
方法二:进入nginx docker容器,重新加载配置文件:
nginx -s reload
根据url后缀匹配(参考)
#图片缓存7天
location ~ .*\.(png|gif|ico|jpg|jpeg|eot|svg|svgz|mp4|ogg|ogv|webm|ttf|woff)$ {
root F:\apache-tomcat-web\ROOT;
expires 7d;
}
#js、css缓存7天
location ~ .*\.(js|css)$ {
root F:\apache-tomcat-web\ROOT;
expires 7d;
}
#html不缓存
location ~ .*\.(htm|html)$ {
root F:\apache-tomcat-web\ROOT;
add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
}
测试
访问 http://106.13.165.100:8000/html/ 能够正常显示 index.html 页面,图片、css样式、执行js脚本
访问 http://106.13.165.100:8000/test/index.html ,能够实现负载均衡,间隔显示 tomcat1、tomcat2页面
验证静态资源由nginx处理(参考)
关闭tomcat后,直接访问静态资源文件,如果能访问到,就说明nginx的静态文件分离是可行的
注意: 在地址栏中输入http://localhost 会报404错误,要输入全部路径http://localhost/index.jsp
