抱怨自己三个月了，三个月没写东西，连儿媳妇都忍不住说：“我觉得你今年不是很有动力。”，我回答：“要自信，摆脱感觉。”四月忙于婚礼，五月充满要求，六月悠闲一点，正好赶上NBA季后赛和欧洲杯，所以我没有太多时间学习，就躺下了，其实从我刚入行开始，就陆续接触过Nginx，学习安装，学习配置，学习使用解决前端管理不了的前端问题，百度查了很多知识，一直没记住，所以...关于Nginx如果你对Nginx还没有概念，推荐你去看看百度百科上的nginx；记得一句话：Nginx是一个非常强大的高性能web和反向代理服务，它有很多非常优越的特性；高性能Web服务Web服务其实也叫静态资源服务。由于前端和后端分离，前端的输出往往是静态资源的形式。什么是静态资源：是用webpack构建输出的结果，例如：为了提供文件在互联网上的可访问性，前端还是需要依赖静态资源服务；最常用的方法是Node服务和Nginx服务。最常见的Node服务是WebpackServer，在前端开发联调中经常用到。启动后，我们可以通过http://localhost:8907/bundle.05a01f6e.js访问构建资源；另外，再给大家安利一个Node服务库：serve，也可以快速启动一个静态资源服务。但是在生产环境中，我们一般使用Nginx来处理。不是Node不好，而是Nginx足够好。通常整个大前端会有很多前端项目。我们将构建结果放在一台服务器（一般有备机）上的某个文件夹中，然后通过安装Nginx创建一个静态资源服务供所有前端资源访问；比如static文件夹下有A、B、C、D四个前端项目资源，我们通过nginx配置：server{listen80;听[::]:80;服务器名称static.closertb.site；#加载默认服务器块的配置文件。包括/etc/nginx/default.d/*.conf；位置/{别名/home/static/;自动索引；如果($request_uri~.*\.(css|js|png|jpg)$){#etagon;365天后到期；#add_headerCache-Controlmax-age=31536000;我们可以通过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轻松搞定。在前面的配置中，我们添加：server{listen80;听[::]:80;服务器名称static.closertb.site；location/api/{proxy_passhttp://server.closertb.site;proxy_set_header主机$host;proxy_set_headerX-Real-IP$remote_addr;proxy_set_headerX-Forwarded-For$proxy_add_x_forwarded_for;}location/{....}所以当网页发送请求时：http://static.closertb.site/a...，实际请求地址为：http://server.closertb.site/a...，它只是实现了一个服务代理。它的原理类似于WebpackServer的代理。以上是前端开发中Nginx的web服务和代理服务的两种典型使用场景。接下来说说一些零散有用的Nginx配置。进阶知识来源：http://nginx.org/en/docs/http...rootvsaliasroot和alias的主要区别在于nginx如何解释location后面的uri，即把请求路径映射到服务器文件以不同的方式，例如：location^~/static{root/home/static;}当请求http://static.closertb.site/s...时，/home/static/static/a/logo会返回服务器上的.png文件，即'/home/static'+'/static/a/logo.png'，拼接后的地址就是匹配字符串及其后面。对于别名：location^~/static{root/home/static;}当请求http://static.closertb时。site/s...，会返回服务器上的/home/static/a/logo.png文件，即'/home/static'+'/a/logo.png'，拼接地址是除了匹配字符串后面有'/'或没有'/'的地址位置。你可能见过A:location/api{proxy_passhttp://server.closertb.site;}你可能见过B:location/api/{proxy_passhttp://server.closertb.site;}有什么区别？两者与root和alias有相似之处，但这种区别仅适用于：如果位置由以斜杠字符结尾的前缀字符串定义，并且请求由proxy_pass、fastcgi_pass、uwsgi_pass、scgi_pass、memcached_pa??ss或其中之一定义grpc_pass，进行特殊处理。为了响应URI等于此字符串但没有尾部斜杠的请求，代码301的永久重定向将返回到请求的URI并附加斜杠，因此当收到请求时：http://static.closertb。site/a...，配置A将请求代理到：http://server.closertb.site/a...；配置B会将请求代理到：http://server.closertb.site/u...这个知识在代理配置中真的很重要请求重定向当我们关闭一个前端服务，或者用户访问一个页面时根本不存在，我们不希望用户看到404，但是会导致一个模糊而正确的页面。这时候我就可以使用rewrite服务了；反手一个配置，直接把流量打到网站首页；location/404.html{rewrite^.*$/redirect;}另外一个比较常用的，就是网站开启了https，我们需要把所有的http请求重定向到https:server{listen80default_server;server_nameclosertb.site；包括/etc/nginx/default.d/*.conf；rewrite^(.*)$https://$host$1permanent;}上面是rewrite，但是还是有区别的，一个是redirect(302)，一个是permanent(301)，这两个还是有很大区别的；帮助web性能体验优化web性能优化是一门前端学问。良好的静态资源加载速度将显着提升用户体验。作为最常用的静态资源服务器，nginx也有很多渠道可以帮助我们提高静态资源加载速度。简单来说就是直接在三个方面配置即可：启用资源缓存：因为我们当前资源的文件名除了.刷新页面时立即加载资源；如果($request_uri~.*\.(css|js|png|jpg|gif)$){过期365d;add_headerCache-Controlmax-age=31536000;}expires和max-age配置可以达到告诉浏览器资源将在一年后过期的目的。有关http缓存的更多信息，您可以阅读这篇文章；enablehttp2:随着HTTP2的不断成熟，以及其他的多路复用特性，可以大大提高页面上依赖多种资源的首屏加载速度。其实开启http2更大的工作量就是开启https，然后加上一个http2的标识。网上文章很多，随便搜一篇：nginx配置ssl实现https访问；#监听443ssldefault_server；听443sslhttp2default_server；启用gzip：http2解决了同时请求数，资源缓存提高了资源二次加载的速度，那么gzip从根本上减少了要确定这个资源在网络中传输的大小，可以直接在http级别启用gzip配置;http{gzip上;gzip_disable"msie6";gzip_min_length10k;gzip_vary开启；#gzip_proxied任何；gzip_comp_level3；gzip_buffers168k；gzip_typestext/plaintext/cssapplication/jsonapplication/javascripttext/xmlapplication/xmlapplication/xml+rsstext/javascript;}拉叉的总结。拖延症和球赛打败了我。又写了一周，终于写完了。知识很简单，有点零散。我希望它对你有用。伟大的新一代意大利左后卫昨晚受伤了，真是可惜。
