现在的项目一般都是将css、js、image等静态资源放在nginx服务器上,可以减小tomcat的压力。下面演示一下怎么将静态资源放在nginx上,html中引用这些静态资源还不会出错。
还是之前负载均衡时的代码,只是在html中加一行:
<img src="img/001.jpg" alt="loading failed...">
但是在项目中我们不加img文件夹,而是在nginx服务器上加:
![](https://cdn.jsdelivr.net/gh//Fushier/ImgCloud@main/data/20210201143157.png)
注意这里的路径。这个时候如果不改之前的配置,只是把两台虚拟机上的jar包运行起来,肯定是访问不到这张图片的,需要在nginx.conf中加几行配置,告诉nginx当遇到静态资源请求时,映射到这个目录下:
location ~ .*/(css|js|img|images|image) {
root /software/static
}
- ~ 表示正则表达式的开始,$ 表示正则表达式的结束,这里我们不用结束正则匹配,只要路径中有css、js等就会匹配到
- . 表示任意字符
- * 表示一个或多个字符
然后reload一下nginx,在浏览器中访问,就可以正常访问,图片也可以加载出来:
![](https://cdn.jsdelivr.net/gh//Fushier/ImgCloud@main/data/20210201144948.png)
![](https://cdn.jsdelivr.net/gh//Fushier/ImgCloud@main/data/20210201145014.png)
看一下图片的地址:
![](https://cdn.jsdelivr.net/gh//Fushier/ImgCloud@main/data/20210201145138.png)
会发现是192.168.3.28/bootweb/img/001.jpg,这次配置location没有配置index,所以只会替换根路径,把http://192.168.3.28:80这个根替换成root,也就是/software/static,再加上访问路径/bootweb/img/001.jpg,就组成了我们刚刚放图片的完整路径。