Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,并在一个BSD-like 协议下发行。其特点是占有内存少,并发能力强,事实上nginx的并发能力确实在同类型的网页服务器中表现较好。
Nginx在前端开发中也常常会用到,他的绝大部分功能用node.js也可以实现,但是node主要是处理具体的业务逻辑,而nginx比较擅长静态资源处理,反向代理,负载均衡等。下面对几个常用场景做点介绍:

1.适配PC与移动端


通过浏览器的useragent自动切换pc和移动站点是常见需求,可以Nginx轻松实现。

location / {
    # 移动、pc设备适配
    if ($http_user_agent ~* '(Android|webOS|iPhone|iPod|BlackBerry)') {
        set $mobile_request '1';
    }
    if ($mobile_request = '1') {
        rewrite ^.+ http://mysite-base-H5.com;
    }
}

2.合并请求


合并请求可以减少前端请求数,可以优化前端性能。利用淘宝的第三方模块nginx-http-concat可以实现。

# get url/static/js??a.js,b.js,c.js
location /static/js/ {
    concat on; # 合并开关
    concat_types application/javascript; # 资源类型
    concat_unique off; # 是否允许合并不同类型的资源
    concat_max_files 5; # 允许合并最大数目
}

3.反向代理


反向代理后端接口,可以实现https,负载均衡,gzip,插入额外的js,css等。

server {
        listen 80;
        server_name www.adress.com; # 外部地址
        # 重定向到https
        rewrite ^ https://$http_host$request_uri? permanent; 

}

server
    {
        listen 443 ssl http2;
        #listen [::]:443 ssl http2;
         server_name www.adress.com;
    # https
    ssl on;
        ssl_certificate /usr/local/nginx/conf/ssl/fishliu.com/fullchain.cer;
        ssl_certificate_key /usr/local/nginx/conf/ssl/fishliu.com/fishliu.com.key;
        ssl_session_timeout 5m;
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
        ssl_prefer_server_ciphers on;
        ssl_ciphers "EECDH+CHACHA20:EECDH+CHACHA20-draft:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES256:EECDH+3DES:RSA+3DES:!MD5";
        ssl_session_cache builtin:1000 shared:SSL:10m;
        # openssl dhparam -out /usr/local/nginx/conf/ssl/dhparam.pem 2048
        ssl_dhparam /usr/local/nginx/conf/ssl/dhparam.pem;
        # gzip
        gzip on;
        gzip_min_length 1k;
        gzip_buffers 4 16k;
        #gzip_http_version 1.0;
        gzip_comp_level 2;
        gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
        gzip_vary off;
        gzip_disable "MSIE [1-6]\.";

     location / {
                proxy_pass http://127.0.0.1:5000;
                proxy_redirect     off;
                proxy_set_header   Host                 $http_host;
                proxy_set_header   X-Real-IP            $remote_addr;
                proxy_set_header   X-Forwarded-For      $proxy_add_x_forwarded_for;
                proxy_set_header   X-Forwarded-Proto    $scheme;
        }
      

        access_log  /home/wwwlogs/www.adress.com.log;
    }

4.图片处理


利用 ngx\_http\_image\_filter\_module 模块可以实现对图片的简单处理。

location ~* /img/(.+)$ {
    alias static/image/$1; #图片服务端储存地址
    set $width 100; #图片宽度默认值
    set $height 100; #图片高度默认值
    if ($arg_width != "") {
        set $width $arg_width;
    }
    if ($arg_height != "") {
        set $height $arg_height;
    }
    image_filter resize $width $height; #设置图片宽高
    image_filter_buffer 10M;   #设置Nginx读取图片的最大buffer。
    image_filter_interlace on; #是否开启图片图像隔行扫描
    error_page 415 = 415.png; #图片处理错误提示图,例如缩放参数不是数字
}

总结


这只是一些非常简单的例子,nginx的功能非常强大,尤其是在linux环境下,还需要多多熟悉和学习。

Last modification:June 30, 2021
如果觉得我的文章对你有用,请随意赞赏