“谁说前端需要懂Nginx了？”

“前端凭什么要学习Nginx？”

“不用Nginx，我们前端的日子不也是照过吗？”

在找 nginx 文章的时候，经常看到类似的标题......我只想说一句——

很多前端开发者一直对 Nginx 有误会，认为 Nginx 是偏后端的知识，我们前端不需要懂，更没必要去使用它。

但是等笔者熟悉了 Nginx 之后，发现其实用好 Nginx 可以解放我们的前端生产力，用来助力我们的前端开发。（对 Nginx 不熟的点这里）

1. 快速部署静态应用

这个场景自不必说，Nginx 本身就是一个 web 服务器。

Nginx 部署静态应用只需要改一行配置，而我们前端号称“终将统一宇宙”的 Node.js 至少也需要6行代码。

这里当然不是在比较孰优孰劣的问题，只是在静态应用部署这块，Nginx 使起来确实要更快速、方便。

参考代码：

# 首尾配置暂时忽略
server {  
        listen       8080;        
        server_name  localhost;

        location / {
            # root   html; # Nginx默认路径
            root /usr/local/var/www/my-project; # 设置为个人项目的根目录路径
            index  index.html index.htm;
        }
}
# 首尾配置暂时忽略

只需要将 root 属性值改为你要部署的绝对路劲（我的是/usr/local/var/www/my-project）即可。

2. 请求过滤

设置访问白名单

当你的项目没有灰度环境，又想在功能上线后先让测试同事试用一下的时候，就需要设置访问的白名单了。

如果你的项目用上了 nginx 做代理，你就会发现这就是小菜一碟。

参考代码：

# 首尾配置暂时忽略
server {
        listen       8080;        
        server_name  localhost;

        location / {
            # IP访问限制（只允许IP是 10.81.1.11 的机器才能访问）
            allow 10.81.1.11;
            deny all;
            
            root   html;
            index  index.html index.htm;
        }
}
# 首尾配置暂时忽略

上面代码块中的IP改成你们测试同事机器的IP即可。Nginx 这种顾名思义、一目了然的配置连讲解都显得很多余。

讲到这，我脑子里突然闪过《舌尖上的中国》中的一句话：

高端的食材，往往只需要采用最简单的烹饪方式。

配置图片防盗链

笔者刚参加工作之初遇到过这个问题：

为了不等设计师出图，便想先开发完功能再替换图片。这时候我将从百度找到尺寸差不多的图片引入项目中，竟然发现图片不能正常显示，提示“该图片仅限百度内部用户交流使用”。最后不得不下载这张图片，放入项目中使用。

后来经验渐长，我明白了这是因为百度将图片做了防盗链处理，不允许别的网站以外链的方式进行引用。

那么当我们的项目也想保护自己的图片权益，设置图片防盗链的时候我们怎么实现呢？

# 首尾配置暂时忽略
server {
        listen       8080;        
        server_name  localhost;

        location / {
            root   /usr/local/var/www/my-project; # 设置为个人项目的根目录路径
            index  index.html index.htm;
        }
        
        # 图片防盗链
        location ~* \.(gif|jpg|jpeg|png|bmp|swf)$ {
            valid_referers none blocked 192.168.0.103; # 只允许本机IP外链引用
            if ($invalid_referer){
                return 403;
            }
        }
}
# 首尾配置暂时忽略

上面代码块设置了只允许本机IP外链引用图片资源，其他域名下的请求都会被403禁止访问。

3. 解决跨域

跨域是前端经常会遇到的问题，解决的方式有很多，例如：jsonp、node.js中转、CORS等。

但是使用 Nginx 来跨域简单明了，主要用到的是 Nginx 的反向代理原理。

参考代码：

# 首尾配置暂时忽略
server {
        listen       8080;        
        server_name  localhost;

        location / {
            # 跨域代理设置
            proxy_pass http://www.proxy.com; # 要实现跨域的域名
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
            add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
        }
}
# 首尾配置暂时忽略

思路就是在反向代理请求过程中，增加可以跨域访问的请求头。不得不说这个方式真香，似乎帮我们前端打开了通往跨域的新大门~

4. 适配PC和移动端

我们在开发一些门户或者对外网站的时候，经常要考虑使用移动端和PC端两套页面。因为单纯使用一个页面来做自适应，有时候总是会有些捉襟见肘。

之前我们使用的方案多数是整两个 domain，一个叫xxx.com，另一个叫m.xxx.com。亦或是搞两套路由来进行区分，移动端所有路由前面都增加一个 path，如xxx.com/login，则对用移动端的路由就设成xxx.com/m/login。

这两种方式其实都存在一个问题—— PC 和移动端所有的 url 都不一样，给用户的体验并不是太好。

最关键的是还需要处理一个逻辑，无论是每个移动端页面，还是PC端页面，在页面开始渲染的时候都要再根据 navigator.userAgent，进行一次重定向。因为要保证PC端和移动端的路由要能根据设备，互相进行跳转。每个页面都要处理这个，这显得非常的多余。

如果使用 Nginx 处理这个，就显得再适合不过了。

参考代码：

# 首尾配置暂时忽略
server {
        listen       8080;        
        server_name  localhost;

        location / {
            # 适配移动端/PC端配置
            set $type "pc";
            if ($http_user_agent ~* (mobile|nokia|iphone|ipad|android|samsung|htc|blackberry)) {
                set $type "mobile";
            }
            root /usr/local/var/www/my-project/$type; # 根据设备类型选择设定根目录文件夹名（pc/mobile）
            index  index.html index.htm;
        }
}
# 首尾配置暂时忽略

这个配置稍微多一点，主要思路也是通过判断浏览器的 useragent 来取对应的静态页面资源。

如果我们的前端应用部署后是有服务的怎么办呢？那就不取对应的静态页面，而是 proxy_pass 代理到对应的页面路由上即可。

5. Gzip 压缩

这个功能基于 ngx_http_gzip_module 模块，该模板是nginx内置的

日常开发中，我们经常遇到前端静态资源比较大导致页面响应变慢的问题。通常我们的做法是将静态资源放入CDN服务中。

但是对于有些不适合接或者来不及接CDN的，我们就可以开启 Nginx 的gzip功能，快速完成队 html、css、js 等静态资源的压缩。要注意的是，图片资源压缩前后区别不大，gzip压缩图片还会白白消耗服务器资源，得不偿失。

开启 Nginx 的gzip功能，参考配置如下：

http {
    # 配置gzip压缩
    gzip  on;
    gzip_min_length 1000; # 设定压缩的临界点
    gzip_comp_level 3; # 压缩级别
    gzip_types      text/plain application/xml; # 要压缩的文件类别
}

没开启 gzip 压缩之前（该html是598kb）：

开启 gzip 压缩后（该html是517kb）：

如图二中的红框标识，能看到响应头带上了Content-Encoding: gzip 标识，就说明你配置的gzip压缩功能起效果了。

6. 合并请求

从这个部分开始，需要使用 Nginx 第三方扩展模块了，故需要使用编译版的 Nginx（传送门 Mac OS下安装及配置nginx）。

web前端性能优化中很重要的一条就是减少 http 请求数。而通过淘宝开发的 nginx-http-concat 第三方模块，我们可以实现多请求的合并。

配置好 Nginx 的合并请求功能后，前端就可以用一种特殊的 url 请求规则（例如example.com/??1.js,2.js,3.js ）向 Nginx 发起请求。

此时，Nginx 会将前端想要的多个资源请求合并成一个请求返回给前端，极大的减少了网络请求时间的开销。

参考配置如下：

server {
    ......
    # 新增一个 location，static 为静态资源目录
    location /static/ {
        concat on; # 是否打开资源合并开关
        concat_types application/javascript; # 允许合并的资源类型
        concat_unique off; # 是否允许合并不同类型的资源
        concat_max_files 20; # 允许合并的最大资源数目
    }
}

7. 图片处理

需要第三方模块 ngx_http_image_filter_module 支持

主要是可以帮助前端完成一些对图片裁剪/缩放/旋转/图片品质等参数的调整。

参考配置如下：

Nginx 配置好这个模块之后，你只需要访问类似 http://127.0.0.1:8080/img/weiciyun.jpeg?w=100&h=100 这种url，就可以拿到你想要的图片资源。针对是极大的丰富了我们的前端生产力。

8. 修改网页内容

Nginx 内置了但是没有默认启用的 Module ngx_http_sub_module 模块，能让 Nginx 具备替换页面代码块的能力。

参考配置如下：

location / {
    ......
    # 在 <body> 中插入一段 html 片段
    sub_filter '</body>' '<p>好嗨哟~我是插入的html片段</p></body>'
}

引入第三方模块 nginx-http-footer-filter 后，可以实现直接向页面底部插入代码块的能力。

Nginx 引入了这两个模块后直接给前端赋能，这给我们前端提供了无限的可能。比如：

快速切换开发环境（将域名访问替换掉ip访问，实现不同环境的切换）
移动页面增加二维码方便扫描访问（增加页面网址生成二维码的js，手机扫一扫就能进入你的移动页面）
js文件底部插入sourceMappingURL方便debug线上问题
......

这个应用场景看起来应该是是最贴近前端开发，直接跟我们最熟悉的 html/js/css 打交道，这对我们前端来说有一种久违的熟悉感。非常推荐大家去试一试。

总结

Nginx 助力前端开发的场景应该远远不止本文中的8个，笔者这里权当抛砖引玉，更多、更好的用法还在等着大家去探索和发现。

最后，有两句话想送给大家——

在技术上不要自我局限，我们首先是工程师，其次才是前端工程师。

前端只是你的一个发力点，而不要让前端成为你的边界。