一、需求描述

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

否则会超过微信的限制而无法打包。自己能够想到的最简单的办法就是将所有的图标放在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. 史上最大电池！小米智能家庭屏Pro 8图赏

    今天小米智能家庭屏 Pro 8正式开售,集智能家居中控,智能网关以及娱乐教育三大功能为一体,首发749元. 它是一款全新的智能生态产品中控屏,配备了7500mAh大容量电池以及通用性更好的USB Ty ...

  2. Webpack基础学习（一） （未完结）

    一.Webpack介绍与基本使用 1.1.Webpack是什么? Webpack 是一个静态资源打包工具. 它会以一个或多个文件作为打包的入口,将我们整个项目所有文件编译组合成一个或多个文件输出出去. ...

  3. 【实用小技巧】RSA非对称加解密及XML&PEM格式互换方案

    ​ 最近因考虑接口安全问题,有实现给WEB API实现统一的参数鉴权功能,以防止请求参数被篡改或重复执行,参数鉴权方法基本与常见的鉴权思路相同,采用(timestamp+sign),而我为了防止tim ...

  4. (python)做题记录||2024.2.4||题目是codewars的【 All Balanced Parentheses】

    题目链接:https://www.codewars.com/kata/5426d7a2c2c7784365000783/python 我的解决方案: def balanced_parens(n): # ...

  5. KVM环境：Active console session exists for this domain

    做测试过程中被迫换电脑,但没有关掉原电脑的连接,所以用其他电脑连接测试环境时,发现之前的kvm测试环境因没有断开,无法连接: error: operation failed: Active conso ...

  6. 【OpenVINO™】在 MacOS 上使用 OpenVINO™ C# API 部署 Yolov5

    在 MacOS 上使用 OpenVINO C# API 部署 Yolov5 项目介绍 YOLOv5 是革命性的 "单阶段"对象检测模型的第五次迭代,旨在实时提供高速.高精度的结果, ...

  7. AdoQuery 多列 查询 定位方法

    frmClientDm.TopItemSkuShow_adoq.Locate('top_outer_iid;top_outer_sid', VarArrayOf([top_outer_iid,top_ ...

  8. 《ASP.NET Core 微服务实战》-- 读书笔记（第3章）

    第 3 章 使用 ASP.NET Core 开发微服务 微服务定义 微服务是一个支持特定业务场景的独立部署单元.它借助语义化版本管理.定义良好的 API 与其他后端服务交互.它的天然特点就是严格遵守单 ...

  9. Series基础

    目录 创建Series对象 1) 创建一个空Series对象 2) ndarray创建Series对象 3) dict创建Series对象 4) 标量创建Series对象 访问Series数据 1) ...

  10. 使用yum 报错 ：This system is not registered with RHN

    解决办法:(假定你已安装yum,且网络畅通)更改yum的源, 即更换/etc/yum.repos.d/rhel-debuginfo.repo 这个文件.首先备份,如下所示: [root@localho ...