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/;
}
自己继续改进，改为使用https+域名访问，结果报错，net::ERR_SSL_PROTOCOL_ERROR
经过反复排查后，找到问题原因，自己的域名还未备案，所以想使用https+域名进行访问，需要自己先进行备案。
总结:
在使用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的更多相关文章
- CentOS下配置Nginx实现动静分离实例
测试环境: CentOS Linux release 7.6 PHP 7.2.32 两台服务器:192.168.1.109(Nginx),192.168.1.118(Apache) 1. 安装配置19 ...
- nginx+tomcat动静分离结构
本文采用另一种策略对动静分离进行演示,它的大致结构如图 2 所示. 图 2. 本文设计的动静分离结构 在本文中,我们将静态资源放在 A 主机的一个目录上,将动态程序放在 B 主机上,同时在 A 上安装 ...
- 使用nginx实现动静分离的负载均衡集群
一.概述: LB负载均衡集群分两类: LVS (四层)和 nginx或haproxy (七层) 客户端通过访问分发器的VIP来访问网站 |现在应用更复杂,比如现在网站页面有: .php .html . ...
- Nginx的动静分离
Nginx的动静分离 在之前我们的负载均衡中,我们再jsp中设置了一个背景,这是一个静态资源,Tomcat处理静态资源的效率并没有Nginx高,我们可以通过动静分离将静态资源和动态资源分割开来,Tom ...
- Linux下的Nginx的配置+Tomcat启动
Linux下的Nginx的配置 首次如果你只仅主机模式,那么请你切换到桥接模式或者net模式. 1.安装编译工具及库文件 yum -y install make zlib zlib-devel gcc ...
- 负载均衡---在window与linux下配置nginx
最近有些时间,开始接触负载均衡方面的东西,从硬件F5再到Citrix Netscalar.不过因为硬件的配置虽然不复杂,但昂贵的价格也让一般用户望而却步(十几万到几十万),所以只能转向nginx,sq ...
- Nginx+Apache动静分离
Nginx的静态处理能力很强,但是动态处理能力不足,因此,在企业中常用动静分离技术.动静分离技术其实是采用代理的方式,在server{}段中加入带正则匹配的location来指定匹配项 针对PHP的动 ...
- Linux下配置nginx，负载IIS的页面
最近研究了下Linux下的nginx结果贴一下: 反向代理概念: 一般访问流程:a=>b,a访问b服务器, 加n来做反向代理流程:a=>n=>b 负载均衡概率:a访问B站点,B站点有 ...
- 《nginx 五》nginx实现动静分离
Nginx+Tomcat动静分离 动态页面与静态页面区别 静态资源: 当用户多次访问这个资源,资源的源代码永远不会改变的资源. 动态资源:当用户多次访问这个资源,资源的源代码可能会发送改变. 什么是动 ...
- 15 nginx反向代理实现nginx+apache动静分离
一:nginx反向代理实现nginx+apache动静分离-------------概念--------------------------- nginx反向代理服务器+负载均衡 用nginx做反向代 ...
随机推荐
- python自动化高效办公第二期，带你项目实战【二】｛数据可视化、发送邮件（定时任务监控）、python聊天机器人（基于微信、钉钉）｝
相关文章和数据源: python自动化高效办公第二期,带你项目实战[一]{excel数据处理.批量化生成word模板.pdf和ppt等自动化操作} Python自动化办公--Pandas玩转Excel ...
- C/C++ 使用CRC检测内存映像完整性
前面的那一篇文章中所使用的技术只能有效抵抗解密者直接修改硬盘文件,当我们使用动态补丁的时候,那么内存中同样不存在校验效果,也就无法抵御对方动态修改机器码了,为了防止解密者直接对内存打补丁,我们需要在硬 ...
- CE修改器入门：寻找指针基址
上一步阐述了如何使用代码替换功能对付变化位置的数据地址,但这种方法往往不能达到预期的效果,所以我们需要学习如何利用指针,在本关的 Tutorial.exe 窗口下面有两个按钮,一个会改变数值,另一个不 ...
- 又学了一招：微软科普Windows 11电脑自动清理释放硬盘
你是不是每次都等到电脑内存被占满,磁盘"红"成一片,才想起来去清理那些没用的程序or文件? 今天微软官方科普了一个小技巧:既然都用上了Windows 11 ,为什么不让电脑帮你自动 ...
- 苹果打破12年惯例：iPad一整年未更新
1月2日消息,据媒体报道,自2010年首次亮相以来,苹果一直保持着每年至少发布一款新型号的传统. 但是在过去的2023年,苹果没有发布iPad,2023年苹果发布的唯一与iPad相关的产品是USB-C ...
- Spring自带的这11个工具类，真香！
前言 最近有些小伙伴,希望我分享一些好用的工具类,帮他们提升开发效率. 今天这篇文章专门跟大家一起总结一下,Spring框架本身自带的一些好用的工具类,希望对你会有所帮助. 1 Assert 很多时候 ...
- CF1515F Phoenix and Earthquake 题解
题目链接:CF 或者 洛谷 首先基于一个事实,答案一定是生成树,显然,每次我们都需要连边,每次都会 \(-x\),那么一共会减少 \((n-1)\times x\),很显然的一个必要条件为: \[\s ...
- CF1850H The Third Letter
题目链接 题解 知识点:贪心,图论建模. 考虑对约束 a b d 建边 \(a \mathop{\to}\limits^d b\) 与 \(b \mathop{\to}\limits^{-d} a\) ...
- Educational Codeforces Round 136 (Rated for Div. 2) A-E
比赛链接 A 题解 知识点:模拟. 所有点都跑一遍即可. 另外可以不模拟, \(\geq 2*2\) 的情况都可以摆在 \((2,2)\) 这个点,其他摆在 \((1,1)\) . 时间复杂度 \(O ...
- NC15832 Most Powerful
题目链接 题目 题目描述 Recently, researchers on Mars have discovered N powerful atoms. All of them are differe ...