一、需求描述

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

否则会超过微信的限制而无法打包。自己能够想到的最简单的办法就是将所有的图标放在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的更多相关文章

  1. CentOS下配置Nginx实现动静分离实例

    测试环境: CentOS Linux release 7.6 PHP 7.2.32 两台服务器:192.168.1.109(Nginx),192.168.1.118(Apache) 1. 安装配置19 ...

  2. nginx+tomcat动静分离结构

    本文采用另一种策略对动静分离进行演示,它的大致结构如图 2 所示. 图 2. 本文设计的动静分离结构 在本文中,我们将静态资源放在 A 主机的一个目录上,将动态程序放在 B 主机上,同时在 A 上安装 ...

  3. 使用nginx实现动静分离的负载均衡集群

    一.概述: LB负载均衡集群分两类: LVS (四层)和 nginx或haproxy (七层) 客户端通过访问分发器的VIP来访问网站 |现在应用更复杂,比如现在网站页面有: .php .html . ...

  4. Nginx的动静分离

    Nginx的动静分离 在之前我们的负载均衡中,我们再jsp中设置了一个背景,这是一个静态资源,Tomcat处理静态资源的效率并没有Nginx高,我们可以通过动静分离将静态资源和动态资源分割开来,Tom ...

  5. Linux下的Nginx的配置+Tomcat启动

    Linux下的Nginx的配置 首次如果你只仅主机模式,那么请你切换到桥接模式或者net模式. 1.安装编译工具及库文件 yum -y install make zlib zlib-devel gcc ...

  6. 负载均衡---在window与linux下配置nginx

    最近有些时间,开始接触负载均衡方面的东西,从硬件F5再到Citrix Netscalar.不过因为硬件的配置虽然不复杂,但昂贵的价格也让一般用户望而却步(十几万到几十万),所以只能转向nginx,sq ...

  7. Nginx+Apache动静分离

    Nginx的静态处理能力很强,但是动态处理能力不足,因此,在企业中常用动静分离技术.动静分离技术其实是采用代理的方式,在server{}段中加入带正则匹配的location来指定匹配项 针对PHP的动 ...

  8. Linux下配置nginx，负载IIS的页面

    最近研究了下Linux下的nginx结果贴一下: 反向代理概念: 一般访问流程:a=>b,a访问b服务器, 加n来做反向代理流程:a=>n=>b 负载均衡概率:a访问B站点,B站点有 ...

  9. 《nginx 五》nginx实现动静分离

    Nginx+Tomcat动静分离 动态页面与静态页面区别 静态资源: 当用户多次访问这个资源,资源的源代码永远不会改变的资源. 动态资源:当用户多次访问这个资源,资源的源代码可能会发送改变. 什么是动 ...

  10. 15 nginx反向代理实现nginx+apache动静分离

    一:nginx反向代理实现nginx+apache动静分离-------------概念--------------------------- nginx反向代理服务器+负载均衡 用nginx做反向代 ...

随机推荐

  1. Python 使用sigthief签发证书

    Windows 系统中的一些非常重要文件通常会被添加数字签名,其目的是用来防止被篡改,能确保用户通过互联网下载时能确信此代码没有被非法篡改和来源可信,从而保护了代码的完整性.保护了用户不会被病毒.恶意 ...

  2. Gin 响应方式

    响应 1. 字符串方式 r.GET("/user/save", func(ctx *gin.Context) { ctx.String(http.StatusOK, "t ...

  3. 基于AvaloniaUI开发跨平台.NET三维应用：环境搭建

    本文介绍在Vistual Studio 2022中使用Avalonia和集成AnyCAD AvaloniaUI三维控件的的过程. 目录 0 初始化环境 1 创建项目 2 集成AnyCAD Avalon ...

  4. 苹果新一代“超级芯片”曝光：M3 Ultra最高可达32核CPU

    近日,据外媒消息,苹果计划在2024年推出新一代"超级芯片"M3 Ultra. 据悉,M3 Ultra将大幅增加CPU核心数量,同时GPU核心数量也将适度增加. 具体来说,M3 U ...

  5. TF-VAEGAN：添加潜在嵌入(Latent Embedding)的VAEGAN处理零样本学习

    前面介绍了将VAE+GAN解决零样本学习的方法:f-VAEGAN-D2,这里继续讨论引入生成模型处理零样本学习(Zero-shot Learning, ZSL)问题.论文"Latent Em ...

  6. Odoo16—即时通信模块discuss

    odoo中自带的discuss模块是一个简易版的即时通信系统,虽然简单,但是功能还是挺强劲的.可以发送图文消息,可以语音,可以视频,也可以共享屏幕,看下效果吧! PC端效果 手机端效果 重点说明 没错 ...

  7. P10033 题解

    不喜欢特判?不喜欢分讨?不喜欢被卡 corner?不喜欢证明?不喜欢动脑子? 那就看这篇题解! 感性思路 首先感性地感受一下题目宽泛的限制条件题解区各种花式的构造方法就不难想出,符合条件的序列实在很多 ...

  8. MySQL8 查询优化新工具 Explain Analyze

    1.什么是Explain Analyze? Explain 是我们常用的查询分析工具,可以对查询语句的执行方式进行评估(并非实际的执行情况,可能与实际情况存在较大差距),给出很多有用的线索. Expl ...

  9. 开源.NetCore通用工具库Xmtool使用连载 - OSS文件上传篇

    [Github源码] <上一篇> 介绍了Xmtool工具库中的图像处理类库,今天我们继续为大家介绍其中的OSS文件上传类库. 将本地文件上传到服务器是软件系统经常会遇到的需求,例如:设置用 ...

  10. 一文总结 C++ 常量表达式、constexpr 和 const

    TLDR 修饰变量的时候,可以把 constexpr 对象当作加强版的 const 对象:const 对象表明值不会改变,但不一定能够在编译期取得结果:constexpr 对象不仅值不会改变,而且保证 ...