前端Nginx那些事

隨着前端變革，Nginx也成爲了前端開發工程師必不可少應該具有的一項技能了，那nginx到底起的是嗎做用？ 其實Nginx一直跟咱們息息相關，它既能夠做爲 Web 服務器，也能夠做爲負載均衡服務器，具有高性能、高併發鏈接等

1.負載均衡

當一個應用單位時間內訪問量激增，服務器的帶寬及性能受到影響，影響大到自身承受能力時，服務器就會宕機奔潰，爲了防止這種現象發生，以及實現更好的用戶體驗，咱們能夠經過配置Nginx負載均衡的方式來分擔服務器壓力

當有一臺服務器宕機時，負載均衡器就分配其餘的服務器給用戶，極大的增長的網站的穩定性 當用戶訪問web時候，首先訪問到的是負載均衡器，再經過負載均衡器將請求轉發給後臺服務器

1.1 負載均衡的幾種經常使用方式

• 輪詢（默認）

// nginx.config
upstream backserver {
    server 192.168.0.1;
    server 192.168.0.2;
}
複製代碼

• 權重weight

指定不一樣ip的權重，權重與訪問比成正相關，權重越高，訪問越大，適用於不一樣性能的機器

// nginx.config
upstream backserver {
    server 192.168.0.1 weight=2;
    server 192.168.0.2 weight=8;
}
複製代碼

• 響應時間來分配

公平競爭，誰相應快，誰處理，不過這種方式須要依賴到第三方插件nginx-upstream-fair，須要先安裝

// nginx.config
upstream backserver {
    server 192.168.0.1;
    server 192.168.0.2;
    fair;
}

server {
    listen 80;
    server_name localhost; 
    location / {
      proxy_pass  http://backserver;
    }
}
複製代碼

1.2 健康檢查

Nginx 自帶 ngx_http_upstream_module（健康檢測模塊）本質上服務器心跳的檢查，經過按期輪詢向集羣裏的服務器發送健康檢查請求,來檢查集羣中是否有服務器處於異常狀態

若是檢測出其中某臺服務器異常,那麼在經過客戶端請求nginx反向代理進來的都不會被髮送到該服務器上（直至下次輪訓健康檢查正常）

基本例子以下👇

upstream backserver{
    server 192.168.0.1  max_fails=1 fail_timeout=40s;
    server 192.168.0.2  max_fails=1 fail_timeout=40s;
}

server {
    listen 80;
    server_name localhost; 
    location / {
      proxy_pass http://backend;
    }
}
複製代碼

涉及兩個配置：

• fail_timeout : 設定服務器被認爲不可用的時間段以及統計失敗嘗試次數的時間段，默認爲10s
• max_fails : 設定Nginx與服務器通訊的嘗試失敗的次數，默認爲：1次

2.反向代理

反向代理指的是，當一個客戶端發送的請求,想要訪問服務器上的內容，但將被該請求先發送到一個代理服務器proxy,這個代理服務器（Nginx）將把請求代理到和本身屬於同一個局域網下的內部服務器上,而用戶經過客戶端真正想得到的內容就存儲在這些內部服務器上，此時Nginx代理服務器承擔的角色就是一箇中間人，起到分配和溝通的做用

2.1 爲何須要反向代理？

反向代理的優點主要有如下兩點

• 防火牆做用

當你的應用不想直接暴露給客戶端（也就是客戶端沒法直接經過請求訪問真正的服務器，只能經過Nginx），經過nginx過濾掉沒有權限或者非法的請求，來保障內部服務器的安全

• 負載均衡

也就上一章提到負載均衡，本質上負載均衡就是反向代理的一種應用場景，能夠經過nginx將接收到的客戶端請求"均勻地"分配到這個集羣中全部的服務器上(具體看負載均衡方式),從而實現服務器壓力的負載均衡

2.2 如何使用反向代理

咱們經過模擬內部服務器的端口啓動的nodejs項目設置反向代理到80端口訪問

// nginx.config
server  {
  listen 80;
  server_name localhost;
  location / {
    proxy_pass http://127.0.0.1:8000;（upstream）
  }
}
複製代碼

在 Nginx 反向代理是，會經過 location 功能匹配指定的 URI，而後把接收到的符合匹配 URI的請求經過 proxy_pass 轉移給以前定義好的 upstream 節點池

3.Https 配置

Nginx 經常使用來配置Https認證，主要有兩個步驟：簽署第三方可信任的 SSL 證書 和 配置 HTTPS

3.1 簽署第三方可信任的 SSL

配置 HTTPS 要用到私鑰 example.key 文件和 example.crt 證書文件，而申請證書文件的時候要用到 example.csr 文件。對於想了解更多關於SSL證書的點這裏 SSL證書介紹

3.2 Nginx配置https

要開啓 HTTPS 服務，在配置文件信息塊(server)，必須使用監聽命令 listen 的 ssl 參數和定義服務器證書文件和私鑰文件，以下所示：

server {
   #ssl參數
   listen              443 ssl; //監聽443端口，由於443端口是https的默認端口。80爲http的默認端口
   server_name         example.com;
   #證書文件
   ssl_certificate     example.com.crt;
   #私鑰文件
   ssl_certificate_key example.com.key;
}
複製代碼

• ssl_certificate:證書的絕對路徑
• ssl_certificate_key: 密鑰的絕對路徑;

4.經常使用的配置

除了上述的這些，前端還能夠用Nginx作些什麼，多着呢～下面依依給你講

4.1 IP白名單

能夠配置nginx的白名單，規定有哪些ip能夠訪問你的服務器，防爬蟲必備

• 簡單配置

server {
        location / {
                deny  192.168.0.1; // 禁止該ip訪問
                deny  all; // 禁止全部
            }
  }
複製代碼

• 白名單配置

創建白名單

vim /etc/nginx/white_ip.conf
 ...
192.168.0.1 1; 
 ...
複製代碼

修改nginx配置(nginx.conf)

geo $remote_addr $ip_whitelist{
    default 0;
    include ip.conf;
}
// geo 指令主要是能夠根據指定變量的值映射出一個新變量。 若是不指定變量，默認爲$remote_addr
複製代碼

爲匹配項作白名單設置

server {
    location / {
        if ( $ip_whitelist = 0 ){
            return 403; //不在白名單返回 403
        }
        index index.html;
        root /tmp;
    }
}
複製代碼

4.2 適配PC與移動環境

當用戶從移動端打開PC端baidu.com的場景時，將自動跳轉指移動端m.baidu.com，本質上是Nginx能夠經過內置變量$http_user_agent，獲取到請求客戶端的userAgent，從而知道當前用戶當前終端是移動端仍是PC，進而重定向到H5站仍是PC站

server {
 location / {
        //移動、pc設備agent獲取
        if ($http_user_agent ~* '(Android|webOS|iPhone)') {
            set $mobile_request '1';
        }
        if ($mobile_request = '1') {
            rewrite ^.+ http://m.baidu.com;
        }
    } 
}
複製代碼

4.3 配置gzip

開啓Nginx gzip，壓縮後,靜態資源的大小會大大的減小,從而能夠節約大量的帶寬,提升傳輸效率,帶來更好的響應和體驗

server{
    gzip on; //啓動
    gzip_buffers 32 4K;
    gzip_comp_level 6; //壓縮級別，1-10，數字越大壓縮的越好
    gzip_min_length 100; //不壓縮臨界值，大於100的才壓縮，通常不用改
    gzip_types application/javascript text/css text/xml;
    gzip_disable "MSIE [1-6]\."; // IE6對Gzip不友好，對Gzip
    gzip_vary on;
}
複製代碼

4.4 Nginx配置跨域請求

當出現403跨域錯誤的時候，還有 No 'Access-Control-Allow-Origin' header is present on the requested resource報錯等，須要給Nginx服務器配置響應的header參數：

location / {  
    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';

    if ($request_method = 'OPTIONS') {
        return 204;
    }
} 

複製代碼

5.如何使用Nginx

經過在本地使用Nginx，從啓動、更改、重啓等環節來介紹Nginx的基本使用

• 如何啓動 sudo nginx
• 修改nginx.conf 配置 (具體看你配置位置) vim /usr/local/etc/nginx/nginx.conf
• 檢查語法是否正常 sudo nginx -t
• 重啓nginx sudo nginx -s reload
• 建立軟連接(便於管理多應用nginx)

當咱們須要管理多個網站的nginx，nginx文件放在一塊兒是最好的管理方式，通常都存在/nginx/conf.d/，咱們須要把配置文件丟到 /etc/nginx/conf.d/ 文件夾下，怎樣才能使這個配置文件既在程序文件夾下，又在 /etc/nginx/conf.d/文件夾下呢？

假如咱們在程序文件夾下有一個 ngxin 配置文件：/home/app/app.nginx.conf 咱們須要給這個文件建立一個軟連接到 /etc/nginx/conf.d/ 下：
ln -s /home/app/app.example.com.nginx.conf /etc/nginx/conf.d/app.nginx.conf
這樣操做以後，當咱們改應用配置文件，/etc/nginx/conf.d/ 下與之對應的配置文件也會被修改，修改後重啓 nginx 就可以使新的 ngxin 配置生效了。