前端須要瞭解的nginx

簡述

Nginx是一款輕量級的http服務器,採用事件驅動的異步非阻塞處理方式,具備較好的IO性能,時經常使用於服務端的反向代理和負載失衡

nginx優點

• IO多路複用: 多個描述的IO操做能夠在一個線程裏併發交替順利完成,複用線程
• CPU親和: 一種CPU核心和Nginx工做進程綁定方式,把每一個worker進程固定在一個cpu核上執行
• sendfile: 零拷貝傳輸模式 不須要通過用戶空間

nginx做用

gzip壓縮

gzip on;  # 開啓gzip壓縮 默認僅支持html文件
gzip_http_version 1.1; # 壓縮版本
gzip_min_length 1k;  # 啓用gzip壓縮的最小文件，小於設置值的文件將不會壓縮
gzip_comp_level 2; # 壓縮級別，1-9，數字越大壓縮的越好，也越佔用CPU時間
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;  # 進行壓縮的文件類型
gzip_disable "MSIE [1-6]\."; # 禁用IE 6 gzip
複製代碼

能夠在請求頭中的Accept-Encoding來查看是都開啓gzip壓縮。

適配pc環境與移動環境

用於實現根據用戶的瀏覽環境自動切換站點。Nginx能夠經過內置變量$http_user_agent識別出用戶是pc端仍是移動端，進而控制重定向到H5站仍是PC站。 配置以下：

location / {
    if ($http_user_agent ~* '(Android|webOS|iPhone|iPod)') {
        set $mobile_request '1';
    }
    if ($mobile_request = '1') {
        rewrite ^.+ http://mysite-base-H5.com; # 重定向
    }
}
複製代碼

代理和跨域

在server1.com向server2.com發起請求時,能夠配置代理,或者經過設置請求頭解決跨域.配置以下:

server {
    listen 80; # 監聽端口
    server_name  http://server1.com; ## 當前服務器名稱
    location / {
        proxy_pass http://server2.com; # 進行服務器代理,也可依次實現跨域
        add_header Access-Control-Allow-Origin *; # 設置請求頭實現跨域
    }
}
複製代碼

負載均衡

nginx負載均衡策略:

• 輪詢(默認):每一個請求按照時間順序逐一分配到不一樣的後端服務器,若是服務器down掉,能夠自動剔除

upstream balanceServer {
    server  10.1.22.33:12345;
    server  10.1.22.34:12345;
}
複製代碼

• ip_hash:給每一個訪問ip指定hash,根據hash固定訪問某個服務器,由此能夠解決session不能跨域的問題

upstream balanceServer {
    ip_hash;
    server 10.1.22.33:12345;
    server 10.1.22.34:12345;
}
複製代碼

• weight:加權輪詢,weight和訪問比率成正比,用於後端服務器性能不均

upstream balanceServer {
    server  10.1.22.33:12345 weight=2;
    server  10.1.22.34:12345 weight=1;
}
複製代碼

• least_conn:最小鏈接數 哪一個鏈接少就分配給誰

upstream balanceServer {
    least_conn;
    server 10.1.22.33:12345;
    server 10.1.22.34:12345;
}
複製代碼

圖片文件防盜鏈

校驗refer實現,配置以下:

location ~ .\.(jpg|png)$ {
    valid_referers none blocked http://39.107.64.34; # 默認協議和指定域名能夠打開
    if ($invalid_referer) { # 無權限訪問時 返回403
        return 403;
        #rewrite ^/ http://XXXX/403.gif; # 這個圖片不能被防盜鏈，否則顯示不正常。除非把上面的GIF過濾刪除。
    }
}
複製代碼

對於源爲none(源爲空 )、blocked(不爲空，可是裏面的值被代理或者防火牆刪除)、指定源如http://39.107.64.34,則內置變量$invalid_referer爲0,能夠訪問該站點圖片.不然爲1,不能訪問,進行查看403頁面 提示: 若是用戶直接在瀏覽器輸入你的圖片地址,那麼圖片顯示正常，由於它符合none這個規則

其餘

• 進行移動端調試
• 對頁面文件訪問權限的處理等

參考文獻:

• 配置Nginx實現負載均衡 www.cnblogs.com/qlqwjy/p/85…
• 前端開發者必備的Nginx知識 juejin.im/post/5c85a6…
• Nginx與前端開發 juejin.im/post/5bacbd…
• 客戶端內實時調試H5方案——nginx反向代理的使用 www.jianshu.com/p/4751d47dd…