共计 4215 个字符，预计需要花费 11 分钟才能阅读完成。
吐槽一下本人
三个月了，三个月没写过货色了，连媳妇都忍不住说：”感觉往年你不是很上进啊“，我回了一句：” 自信点，去掉感觉 ”。
四月忙婚礼，五月需要成山，六月略微闲点，刚巧赶上又 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 月底，党过百岁生日收回来的，但迁延症与球赛又将我战胜了。写了一周，终于写完了，常识很简略，也有点系统，心愿对你有用。
昨晚新一代平凡的意大利左后卫受伤了，惋惜啦。