前端也要知道的 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 配置生效了。

專注分享當下最實用的前端技術。關注前端達人，與達人一起學習進步！

長按關注"前端達人"