前端應該掌握的nginx知識

前言

為什麼要懂nginx?

首先，提高自己的伺服器部署能力
其次，有助於理解後端介面鏈路

ngix能幹什麼？

解決跨域問題
負載均衡
靜態伺服器
多/單頁面網站
gzip

正文

安裝 & 常見命令 & nginx配置檔案結構

安裝（以ubuntu 為例）：

$ sudo apt-get install nginx

更多：安裝NGINX

檢視版本：

$ sudo nginx -v
# 出現版本資訊表示安裝成功
nginx version: nginx/1.6.2

常見命令

啟動服務：

$ nginx

其他命令：

$ nginx -s <SIGNAL>

SIGNAL:

quit – 正常關閉服務
reload – 重新載入配置檔案執行
reopen – 開啟日誌檔案
stop – 立刻關閉服務

配置檔案

檔案結構

nginx的主配置檔案是nginx.conf。可以在主配置檔案中去include 其他位置的配置檔案。
通過上述方式安裝的來看：

預設配置檔案路徑/etc/nginx/nginx.conf
這個檔案裡可能會有引用，比如include /etc/nginx/conf.d/*.conf;那麼實際上你的專案配置檔案就是在/etc/nginx/conf.d/這個資料夾下的所有.conf檔案；
一般一個專案（域名）配一個檔案，比如你的域名是www.baidu.com，那麼你的配置檔案就可以叫/etc/nginx/conf.d/www.baidu.com.conf-

配置說明

main:nginx的全域性配置，對全域性生效。
events:配置影響nginx伺服器或與使用者的網路連線。
http：可以巢狀多個server，配置代理，快取，日誌定義等絕大多數功能和第三方模組的配置。
mail：郵箱服務配置
stream：TCP 和 UDP 配置
server：配置虛擬主機的相關引數，一個http中可以有多個server。
location：配置請求的路由，以及各種頁面的處理情況。
upstream：配置後端伺服器具體地址，負載均衡配置不可或缺的部分。

解決跨域

如果fe.server.com 訪問 be.server.com的介面存在跨域，則可以：

http{
   server {
        server_name  fe.server.com;
        listen 80;
        location /api {
            proxy_pass fe.server.com/api;
        }
    }
}

Http負載均衡

負載均衡策略： https://zhuanlan.zhihu.com/p/...

輪詢（預設）：時間順序逐一分配到不同的後端伺服器
指定權重：weight和訪問比率成正比
fair: 按後端伺服器的響應時間來分配請求，響應時間短的優先分配。
IP Hash: 按訪問ip的hash結果分配，這樣每個訪客固定訪問一個後端伺服器
Url Hash: 按後端伺服器的響應時間來分配請求，響應時間短的優先分配

配置upstream:

http{
  upstream balanceServer {
    server 10.1.22.33:12345;
    server 10.1.22.34:12345;
    server 10.1.22.35:12345;
  }
}

配置server:

http{
   server {
        server_name  fe.server.com;
        listen 80;
        location /api {
            proxy_pass http://balanceServer;
        }
    }
}

更多：

靜態伺服器

/data/static/ 提供目錄瀏覽：

server{
  listen 80 default_server; 
  server_name www.example.com;

  location ^~ /static {
    root /data/static/; # 設定訪問伺服器下的檔案目錄
    autoindex on; # 開啟目錄瀏覽
    access_log  off; # 關閉訪問日誌
    charset utf-8,gbk;     #防止中文目錄出現亂碼
    expires     10h;# 設定過期時間為10小時
  }       
}

檢視更多：[nginx 開啟目錄瀏覽功能及主題美化
](https://ld246.com/article/156...)

單頁面網站

 server {
        server_name  fe.server.com;
        listen 80;
        location / {
            root /data/www;
            index index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
    }

root：伺服器要返回的檔案/目錄地址
index：如果路徑是'/'結束，按照index 指定的順序索引 root 目錄下的檔案
try_files：對 root 的解析順序，先是作為檔案，然後作為資料夾，如果都不存在則返回/index.html 檔案

location url匹配規則


location [=|~|~*|^~|@] /uri/ {
  ...
}

= : 表示精確匹配後面的url
~ : 表示正則匹配，但是區分大小寫
~* : 正則匹配，不區分大小寫
^~ : 表示普通字元匹配，如果該選項匹配，只匹配該選項，不匹配別的選項，一般用來匹配目錄
@ : "@" 定義一個命名的 location，使用在內部定向時，例如 error_page
上述匹配規則的優先匹配順序：
= 字首的指令嚴格匹配這個查詢。如果找到，停止搜尋；
所有剩下的常規字串，最長的匹配。如果這個匹配使用 ^~ 字首，搜尋停止；
正規表示式，在配置檔案中定義的順序；
如果第 3 條規則產生匹配的話，結果被使用。否則，使用第 2 條規則的結果。

更多：url匹配規則

多頁面網站

 server {
        server_name  fe.server.com;
        listen 80;
        location ^~ /app {
            root /data/www/app;
            index index.html index.htm;
            try_files $uri $uri/ /index.html;      
        }
        location ^~ /pc {
            root /data/www/pc;
            index index.html index.htm;
            try_files $uri $uri/ /index.html;      
        }
        location ^~ /api {
            # 指向 埠8080的 api 服務
            proxy_pass: https://fe.server.com:8080/api  
        }
        location / {
            root /data/www/html;
            index index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
    }

注意事項：

location / 要寫在最後，作為兜底的選項
root 要寫在每個location 裡面

Gzip

使用Gzip實現HTTP壓縮，能改進傳輸速度和頻寬利用率。

    gzip                    on; 
    gzip_http_version       1.1;        
    gzip_comp_level         5;
    gzip_min_length         1000;
    gzip_types text/csv text/xml text/css text/plain text/javascript application/javascript application/x-javascript application/json application/xml;

gzip: 決定是否開啟gzip模組，on表示開啟，off表示關閉；
gzip_http_version: 識別http協議的版本,早起瀏覽器可能不支援gzip自解壓,使用者會看到亂碼
gzip_comp_level: 設定gzip壓縮等級，等級越底壓縮速度越快檔案壓縮比越小，反之速度越慢檔案壓縮比越大；等級1-9，最小的壓縮最快但是消耗cpu
gzip_min_length: 設定允許壓縮的頁面最小位元組(從header頭的Content-Length中獲取) ，當返回內容大於此值時才會使用gzip進行壓縮,以K為單位,當值為0時，所有頁面都進行壓縮。建議大於1k
gzip_types: 設定需要壓縮的MIME型別,非設定值不進行壓縮，即匹配壓縮型別

部署https

https://cloud.tencent.com/doc...
https 在443埠
需要1.ssl_certificate： crt證照檔案；2.ssl_certificate_key： key 私鑰檔案。放在nginx 資料夾下
在 conf.d 資料夾下新建一個ssl.conf 檔案

# 以部署 cloud.tencent.com 為例子
# 證照： 1_cloud.tencent.com_bundle.crt
# 私鑰： 2_cloud.tencent.com.key
server {
        #SSL 訪問埠號為 443
        listen 443 ssl; 
        #填寫繫結證照的域名
        server_name cloud.tencent.com; 
        #證照檔名稱
        ssl_certificate 1_cloud.tencent.com_bundle.crt; 
        #私鑰檔名稱
        ssl_certificate_key 2_cloud.tencent.com.key; 
        ssl_session_timeout 5m;
        
        #請按照以下協議配置
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2; 
        #請按照以下套件配置，配置加密套件，寫法遵循 openssl 標準。
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE; 
        ssl_prefer_server_ciphers on;
        
        location / {
           #網站主頁路徑。此路徑僅供參考，具體請您按照實際目錄操作。
           #例如，您的網站執行目錄在/etc/www下，則填寫/etc/www。
            root html; 
            # 此處不用修改
            index  index.html index.htm;
        }
    }

http 重定向到 https

http在80埠
http:// cloud.tencent.com -> https:cloud.tencent.com

server {
    listen 80;
    #填寫繫結證照的域名
    server_name cloud.tencent.com; 
    #把http的域名請求轉成https
    return 301 https://$host$request_uri; 
}

nginx 內建變數
$host: 域名
$request_uri: 完整url中刨去最前面$host剩下的部分
301 跳轉

參考文章

前端工程化/前端開發者必備的nginx知識