什么是动静分离不解释了,网上说的很清楚,这里只说配置
- 目的
02虚拟机运行一个tomcat,处理动态请求,而对静态文件的访问则交给01虚拟机。 - 操作
下面是01虚拟机的配置文件内容:
server {
listen 82;
listen [::]:82;
#root /var/www/web/index;
#index index.html;
server_name localhost;
location / {
proxy_pass http://192.168.xxx.xxx:8080;
#try_files $uri $uri/ =404;
}
location /css {
root html;
index index.html index.htm;
}
location /js {
root html;
index index.html index.htm;
}
location /img {
root html;
index index.html index.htm;
}
}
首先修改proxy_pass,改为02虚拟机的tomcat地址端口,然后设置location,很好理解,访问css就去html目录下的css目录中查找,js和img同理。
- 效果
下面访问02虚拟机的端口,发现静态文件全是从01虚拟机对应的目录下去取的(前提是提前将对应的静态文件放到01虚拟机的相应目录),此时删除02虚拟机对应目录下的文件依然能够在页面上准确返回相应的内容。 - 原理
反正静态文件是不变的,经过nginx从tomcat去取,取完了返回给nginx,再给用户呈现,还不如直接把静态放到nginx,别经手tomcat,因为tomcat是处理动态请求的服务器。因此就做到了动静分离。
- 正则匹配
可以看到上面js、css、img每人一个location,有些冗余,这里可以使用正则的方法
server {
listen 82;
listen [::]:82;
#root /var/www/web/index;
#index index.html;
server_name localhost;
location / {
proxy_pass http://192.168.xxx.xxx:8080;
#try_files $uri $uri/ =404;
}
location ~*/(js|img|css) {
root html;
index index.html index.htm;
}
}
~表示开始正则。
- 我自己的项目:
项目路径是这样的:
views里面存放html,以login.html做示范。
login.html里面的静态文件路径也不复杂,分别来自上面图片里除了views以外的文件夹,也只是js、img、css这几种静态文件,然后在02虚拟机开启tomcat,并将views放到tomcat的web根目录\demo下,01虚拟机去充当nginx服务器,配置文件我是这么写的:
server {
listen 82;
listen [::]:82;
#root /var/www/web/index;
#index index.html;
server_name localhost;
location / {
proxy_pass http://192.168.xxx.xxx:8080/demo/views/login.html;
#try_files $uri $uri/ =404;
}
location ~*/(js|img|css) {
root /var/www/web ;
index index.html index.htm;
}
}
我发现,来自js、css、img这几个文件夹的静态文件确实可以获取到,但是来自layui、assembly等文件夹的静态文件获取不到。。
于是我修改配置文件:
server {
listen 82;
listen [::]:82;
#root /var/www/web/index;
#index index.html;
server_name localhost;
location / {
proxy_pass http://192.168.xxx.xxx:8080/demo/views/login.html;
#try_files $uri $uri/ =404;
}
location ~*/(js|img|css|layui|assembly) {
root /var/www/web ;
index index.html index.htm;
}
}
其实就是匹配规则里添加了这几个文件夹的名字js|img|css|layui|assembly。我之前以为这里的匹配规则匹配的是文件类型,现在才知道,匹配的是路径。。
于是就好了: