Nginx实现动静分离(Nginx图片服务器及404问题解决) |
您所在的位置：网站首页 › nginx访问不到静态资源 › Nginx实现动静分离(Nginx图片服务器及404问题解决) |
Nginx实现动静分离(Nginx图片服务器及404问题解决)
|
这一篇记录下Nginx作为图片服务器动静分离及访问的时候404的问题解决方式，各位看到此博客的小伙伴，如有不对的地方请及时通过私信我或者评论此博客的方式指出，以免误人子弟。多谢！ 目录 动静分离的好处 需求 实现步骤 准备测试项目 静态资源放入Nginx 配置Nginx的静态资源与动态资源的访问 测试 Nginx作为图片服务器 补充 root 和 alias 区别 访问图片404问题 动静分离的好处通常我们部署项目都是部署在Tomcat中的，但是Tomcat的效率本就不高，如果再加上项目中大量的静态资源的加载，肯定是不太好的，但是Nginx在处理静态资源的时候，效率是非常高的，而且Nginx的并发访问量也是名列前茅，所以把静态资源交个Nginx后，可以减轻Tomcat服务器的访问压力并提高静态资源的访问速度。 另外，动静分离以后，降低了动态资源和静态资源的耦合度。如动态资源宕机了也不影响静态资源的展示。 需求
如上，我只是把图片、js、css、html等静态资源放到了Nginx中。 实现步骤 准备测试项目准备一个项目打成war包，放到Tomcat的webapps目录下，并启动Tomcat，并确保项目中的测试方法可以正常访问，比如我的测试方法如下，Tomcat端口8080，确保访问 http://190.118.52.56:8080/getDatas 可以返回数据。 @RestController public class TestController { @GetMapping("/getDatas") public String getDatas(){ return "123456"; } }如果你是使用Springboot创建的项目，注意要把默认内嵌的Tomcat移除再打包，具体步骤参考 SpringBoot 项目移除内嵌Tomcat 静态资源放入Nginx在Nginx的html目录下我创建了一个app目录，并将图片、js和首页index.html放入app目录，结构如下：
index.html页面的内容如下： Title $(function(){ $.get('http://190.118.52.56/api/getDatas',function(data){ $("#msg").html(JSON.stringify(data)); }); });
获取到的动态数据：
配置Nginx的静态资源与动态资源的访问
upstream webservice {
server 190.118.52.56:8080;
}
server {
listen 80;
server_name localhost;
location / {
root html/app;
index index.html index.htm;
}
# 静态资源
location ~/.*\.(jpg|png|js){
root html/app;
}
# 动态数据
location /api {
proxy_pass http://webservice/;
}
}
测试
访问 http://190.118.52.56/ 结果如下，可以看到静态数据和动态数据都已经正常加载。
作为图片服务器，其实也就是动静分离的一种，上面的示例中我们将js、图片和html页面都放到了Nginx中实现了动静分离，作为图片服务器，其实就只是将图片放到Nginx中就好了。 比如在nginx的 /usr/local/images 目录下有一个profile.png文件，配置一下Nginx： location /nginx_img { alias /usr/local/images; }这时候我们重启nginx后，浏览器访问 http://190.118.52.56/nginx_img/profile.png 就可以访问到图片，而在项目中，我们保存图片的访问路径的时候就可以将其保存为 http://190.118.52.56/nginx_img/**.png。 补充 root 和 alias 区别root响应的路径：配置的路径（root指向的路径）+完整访问路径(location的路径）+静态文件 alias响应的路径：配置路径+静态文件(去除location中配置的路径) 一般情况下，在location /中配置root，在location /other中配置alias。 访问图片404问题配置之后明明图片存在，访问的时候一直404,可能的原因之一是配置路径问题，参考上面说的root和alias的区别，另外一个原因可能是你存储图片的路径访问权限的问题，比如上面的/usr/local/images 路径，你可以通过 chmod 777 -R /usr/local/images 命令赋予权限，然后在访问就不会404啦。 |
【本文地址】
今日新闻 |
推荐新闻 |