linux下,使用nginx实现动静分离,访问图片报404

一、需求描述

  最近在开发一个微信小程序,由于微信小程序端代码包总大小限定在三四兆,所以有很多的图标资源就不能放在微信小程序中进行打包,

否则会超过微信的限制而无法打包。自己能够想到的最简单的办法就是将所有的图标放在nginx服务器上,然后在微信客户端直接访问即可。

二、需求分析

以前学习nginx的时候,还记得讲师说起过,nginx服务器可以将动态资源(如请求数据的接口)和静态资源(如图片,js文件,html文件等等)进行

分开处理,也就是大家经常听到的动静分离。这种也是最简单的方式,如果图片展示也通过服务器进行处理,然后展示,方法是可以,可是比较

耗费资源。因此自己还是打算采用nginx来直接进行访问。

三、解决方案

方案选定后,开始着手进行实现该功能。下面是自己的做法,以及遇到的一些问题。

配置文件所在目录
/usr/local/nginx/conf

ngxin安装目录
/home/software/nginx_1_16

静态文件所在位置
/home/software/nginx_1_16/html/images

后面还有有多级目录


配置方式如下//
server {
listen 10003;
server_name localhost;
#charset koi8-r;

#access_log logs/host.access.log main;

location /applets{
proxy_pass http://webservice;
}
ssl_certificate /home/software/nginx_1_16/cert/6131892_www.yilangcode.com.pem;
ssl_certificate_key /home/software/nginx_1_16/cert/6131892_www.yilangcode.com.key;
#error_page 404 /404.html;

# redirect server error pages to the static page /50x.html

location ~ .*\.(png|jpg|gif) {
root /home/software/nginx_1_16/html/images/;
}

error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}

这种方式访问不了,报404未找到。

<img src="http://www.yilangcode.com:10003/images/login/login_bg.png"/>

 

自己一步一步排查,先从简单的开始,直接放一张图片qrcode.png在目录images的目录下,

这种方式可以访问。
<html>
<head>
<title>我的第一个 HTML 页面</title>
</head>
<body>
<p>body 元素的内容会显示在浏览器中。</p>
<p>title 元素的内容会显示在浏览器的标题栏中。</p>
<img src="http://www.yilangcode.com:10003/qrcode.png"/>
</body>
</html>

 

然后修改访问目录,这种方式可以访问。

<html>
<head>
<title>我的第一个 HTML 页面</title>
</head>
<body>
<p>body 元素的内容会显示在浏览器中。</p>
<p>title 元素的内容会显示在浏览器的标题栏中。</p>
<img src="http://www.yilangcode.com:10003/login/login_bg.png"/>
</body>
</html>

 

再次测试

配置修改为相对路径,不能正常访问
location ~ .*\.(png|jpg|gif) {
root html/images/;
}

 

总结:

在使用nginx服务器做动静分离处理时,有几点注意事项。

.1.转发后的目录,比如/home/software/nginx_1_16/html/images这种写法,在访问的时候在写images这一级目录,从images后一级目录开始写,

比如像这样访问<img src="http://www.yilangcode.com:10003/login/login_bg.png"/>,否则访问结果为404.

.2.静态文件的路径配置,如果不了解相关的路径配置,则直接写全路径比较保险,否则访问报404。

linux下,使用nginx实现动静分离,访问图片报404

上一篇:开发工具使用技巧-pycharm-mac


下一篇:Linux驱动开发随笔