详解nginx如何代理静态资源(长搜索路径优先)

web服务器重要的的任务之一就是服务静态资源文件，比如网站的图片，还有一些静态的HTML页面，本文的例子还是来自于Nginx官网。在这个用例中我们要配置两个静态资源路径，来处理外部的静态资源请求。我们会更改配置文件中，server块下http下的location。

首先需要创建/data/www目录，然后将index.html文件，文件的内容并不重要，本例只是指引我们观察nginx如何找到和发送静态资源。然后在创建一个/data/images目录，并放置一些图片文件。

下一步打开配置文件，默认的配置文件中已经包含了一些server块，大多数已经注释掉了，官网让我们把server块都注释掉，重写写一个新的空的server块，但注意，一定不要将http注释掉，nginx通过识别它才能知道我们需要处理的是http请求。

通常，配置文件可能会包含多个server块，这些server块可以由端口号区分，也可以由server names来区分。当nginx决定由哪一个server去处理请求的时候，nginx会根据server块中location参数去测试请求头中指定的URI

现在在server块中添加location块

该location块指定了URI请求的根目录前缀，"/"。对于请求来讲，URI被添加在root路径具体指向的目标路径，如果存在的多个匹配的位置块，nginx将选择前缀最长的位置块（可能是因为更加具体）。上方的location块提供的已经是最短前缀了，也就是说，server块中所有的location块如果都没有匹配到，则该location块将会被采用。

官网的说法真的非常绕，我觉得思路就是， nginx首先会优先去具体的location块匹配资源（规则是参数越长，越优先查找），如果都查不到就去根路径查。

我们再加一个location块

这个location块会匹配以/images/开始的请求，但上一个(location块 location / 也会匹配该内容，记得吗，Nginx会先匹配长路径location块)

现在为了看的更加清楚，在加过这两部分内容之后的配置文件应该长这样

重新加载nginx之后，配置会更新，使用：

现在该配置文件已经生效了，配置在监听80端口的本地服务器上，我们可以在本地访问 http://localhost/ ，在此之后例如 http://localhost/images/example.png 这样的请求， Nginx会映射到location /images/去，如果请求的资源不存在，Nginx将返回404页面，404页面是可以定制的，一般企业也会定制属于自己的404页面。

后续的内容我还打算针对一些常见场景，记录以下nginx的配置文件针对不同场景和需求该如何去写，以及为什么这么写。Nginx一些模块的详细介绍不打算专门写，大家如果有需求可以看官方文档。

http://nginx.org/en/docs/beginners_guide.html#conf_structure

Web 服务实际上又称静态资源服务，自从前后端分离后，前端的输出趋向于静态资源的形式，什么是静态资源：就是我们通常用webpack构建输出的结果，比如：

而为了提供文件在互联网中的可访问性，前端还是需要依赖 静态资源服务 ；最常用的做法就是Node服务和Nginx服务。

Node服务最常见的，就是WebpackServer, 在前端开发联调时经常用到, 启动后我们就可以通过 http://localhost:8907/bundle.05a01f6e.js 的形式来访问构建资源；除此之外，我给大家安利另一款Node服务库： serve , 它也能快速启动一个静态资源服务。

但在生产环境，我们一般用Nginx来处理，不是Node不好，而是Nginx已经够好了。通常整个大前端会有很多前端项目，我们都将构建结果放在一台服务器上（一般有备份机器）的某个文件夹下,然后通过安装Nginx来创建一个静态资源服务供所有前端资源的访问；比如文件夹static下有A，B，C，D四个前端项目资源, 我们通过nginx配置:

我们即可通过 http://static.closertb.site/A 访问A项目，通过 http://static.closertb.site/C 访问C项目, 从而做到一鸡多吃，这种玩法在HTTPS与HTTP2的时代特别常见。

以上就是Nginx作为Web服务的简单用法，接下来我们了解一下反向代理服务

作为一个开发者，可能经常听到 代理 两字，但很多人区分不清楚正向和反向的区别：

如上图左侧所示，正向代理是用户的主动行为，如我们fq时访问goggle所做的；右侧反向代理是我们访问的服务器行为，作为用户的我们是不能控制也无需关注的。

反向代理在服务部署中，是一种非常常见的技术，比如负载均衡、容灾、缓存。

而对于前端开发来说，反向代理多用于请求转发，来处理 跨域 问题。当我们把前端静态资源服务都指向一个域名（static.closertb.site）时，与服务端请求域名（server.closertb.site）不一致，就会造成跨域。如果服务端不配合的话，那通过nginx，前端也是可以轻松做到的，在前面的配置上，我们添加：

所以当网页发出一个请求： http://static.closertb.site/a 时，实际请求地址是： http://server.closertb.site/a ，这就简单实现了一个服务代理。其原理与WebpackServer的proxy相似.

以上就是Nginx的web服务和代理服务在前端开发中的两个典型使用场景, 接下来我们说点零碎又有用的

当请求 http://static.closertb.site/site/a/logo.png )时，将会返回服务器上的/home/static/static/a/logo.png文件，即'/home/static'+'/static/a/logo.png',其 拼接的地址是匹配字符串及其以后的

而对于alias：

当请求 http://static.closertb.site/static/a/logo.png )时，将会返回服务器上的/home/static/a/logo.png文件，即'/home/static'+'/a/logo.png',其 拼接的地址是除了匹配字符串以后的地址

你可能见过A这种：

也可能见过B这种

有什么区别？

两者与root 和 alias有相似之处，只不过这种差别，只适用于：

所以当收到一个请求： http://static.closertb.site/api/user/get ) 时，配置A将会把请求代理到： http://server.closertb.site/api/user/get )配置B将会把请求代理到： http://server.closertb.site/user/get )

这个知识，在代理配置中真的相当重要

当我们下架一个前端服务，或者用户访问了某个根本不存在的页面，我们不希望用户看到的是404，而是将其引导到一个模糊正确的页面，这时候我可以用rewrite服务；反手一个配置，直接就将流量打到了网站首页

另一个比较常用的，就是网站开启https，我们需要将所有http请求重定向到https：

上面同是rewrite，但还是有不一样的 ，一个是redirect（302）, 另一个是permanent（301），这两个还是有很大区别的；

web 性能优化是前端的一门学问，好的静态资源加载速度，会显著提升用户体验，而nginx作为最常用的静态资源服务器，也是有诸多渠道来帮助我们来提升静态资源加载速度，简单来讲，可以三个方面，直接上配置：

``if ( ) {

expires 365d

add_header Cache-Control max-age=31536000

}</pre>

expires与max-age两种配置方式都可以达到告诉浏览器资源一年以后过期的目的，更多关于http缓存的可以 看这一篇文章 ；

---