吐槽一下本人
三个月了，三个月没写过货色了，连媳妇都忍不住说：”感觉往年你不是很上进啊“，我回了一句："自信点，去掉感觉"。
四月忙婚礼，五月需要成山，六月略微闲点，刚巧赶上又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 { listen 80; listen [::]:80; server_name static.closertb.site; # Load configuration files for the default server block. include /etc/nginx/default.d/*.conf; location / { alias /home/static/; autoindex on; if ($request_uri ~ .*\.(css|js|png|jpg)$) { #etag on; expires 365d; #add_header Cache-Control max-age=31536000; } } }咱们即可通过http://static.closertb.site/A... 拜访A我的项目，通过http://static.closertb.site/C... 拜访C我的项目, 从而做到一鸡多吃，这种玩法在HTTPS与HTTP2的时代特地常见。
以上就是Nginx作为Web服务的简略用法，接下来咱们理解一下反向代理服务
反向代理服务
作为一个开发者，可能常常听到代理两字，但很多人区分不清楚正向和反向的区别：
如上图左侧所示，正向代理是用户的被动行为，如咱们翻墙时拜访goggle所做的；右侧反向代理是咱们拜访的服务器行为，作为用户的咱们是不能管制也无需关注的。
反向代理在服务部署中，是一种十分常见的技术，比方负载平衡、容灾、缓存。
而对于前端开发来说，反向代理多用于申请转发，来解决跨域问题。当咱们把前端动态资源服务都指向一个域名（static.closertb.site）时，与服务端申请域名（server.closertb.site）不统一，就会造成跨域。如果服务端不配合的话，那通过nginx，前端也是能够轻松做到的，在后面的配置上，咱们增加：
server { listen 80; listen [::]:80; server_name static.closertb.site; location /api/ { proxy_pass http://server.closertb.site; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } location / { .... }所以当网页收回一个申请：http://static.closertb.site/a...时，理论申请地址是：http://server.closertb.site/a...，这就简略实现了一个服务代理。其原理与WebpackServer的proxy类似.
以上就是Nginx的web服务和代理服务在前端开发中的两个典型应用场景, 接下来咱们说点系统又有用的
Nginx 配置精进
常识起源：http://nginx.org/en/docs/http...
root vs alias
root与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',其拼接的地址是匹配字符串及其当前的
而对于alias：
location ^~ /static { root /home/static;}当申请http://static.closertb.site/s...时，将会返回服务器上的/home/static/a/logo.png文件，即'/home/static'+'/a/logo.png',其拼接的地址是除了匹配字符串当前的地址
location带'/'与不带'/'
你可能见过A这种：
location /api { proxy_pass http://server.closertb.site;}也可能见过B这种
location /api/ { proxy_pass http://server.closertb.site;}有什么区别？
两者与root 和 alias有相似之处，只不过这种差异，只实用于：
如果location是由以斜杠字符结尾的前缀字符串定义，并且申请由 proxy_pass、fastcgi_pass、uwsgi_pass、scgi_pass、memcached_pass 或 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 { listen 80 default_server; server_name closertb.site; include /etc/nginx/default.d/*.conf; rewrite ^(.*)$ https://$host$1 permanent;}下面同是rewrite，但还是有不一样的 ，一个是redirect（302）, 另一个是permanent（301），这两个还是有很大区别的；
助力web性能体验优化
web 性能优化是前端的一门学识，好的动态资源加载速度，会显著晋升用户体验，而nginx作为最罕用的动态资源服务器，也是有诸多渠道来帮忙咱们来晋升动态资源加载速度，简略来讲，能够三个方面，间接上配置：
- 开启资源缓存：因为目前资源除.html外，咱们文件名都采纳了hash形式，所以咱们能够对除html文件以外的文件做短暂缓存，这样能保障用户刷新页面时资源霎时加载实现；
if ($request_uri ~ .*\.(css|js|png|jpg|gif)$) { expires 365d; add_header Cache-Control max-age=31536000;}expires与max-age两种配置形式都能够达到通知浏览器资源一年当前过期的目标，更多对于http缓存的能够看这一篇文章；
- 开启http2：随着HTTP2的一直成熟，以及其多路复用个性，能够大大的晋升页面多资源依赖的首屏加载速度, 其实开启http2更多的工作量是在于开启https，而后加一个http2标识，网上文章很多，轻易搜了一篇：nginx配置ssl实现https拜访；
# listen 443 ssl default_server; listen 443 ssl http2 default_server;- 开启gzip：http2解决了同一时间申请的个数，资源缓存晋升了资源二次加载的速度，那么gzip就从根本上，缩小了这个资源在网络中传输的大小, 间接在http这一级开启gzip配置即可；
http { gzip on; gzip_disable "msie6"; gzip_min_length 10k; gzip_vary on; # gzip_proxied any; gzip_comp_level 3; gzip_buffers 16 8k; gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;}拉跨的总结
原本文章是打算在6月底，党过百岁生日收回来的，但迁延症与球赛又将我战胜了。写了一周，终于写完了，常识很简略，也有点系统，心愿对你有用。
昨晚新一代平凡的意大利左后卫受伤了，惋惜啦。