前端想要了解的Nginx

時間 2019-11-06

標籤前端想要瞭解 nginx 欄目 Nginx 简体版

原文原文鏈接

Nginx 是一個高性能的HTTP和反向代理服務器，同時也是一個 IMAP/POP3/SMTP 代理服務器。javascript

常見場景：css

靜態資源服務器
動態匹配
反向代理
Gzip 壓縮
負載均衡

先來看下默認的Nginx配置，我將以此爲基礎依次介紹Nginx的用法

Nginx 安裝目錄下的nginx.conf就是Nginx全局的配置文件，咱們主要修改這裏的內容。nginx.conf.default做爲配置文件的備份。html

# 設置工做進程的數量
worker_processes  1;
# 處理鏈接
events {
    # 設置鏈接數
    worker_connections  1024;
}

http {
    # 文件拓展名查找集合
    include       mime.types;
    # 當查找不到對應類型的時候默認值
    default_type  application/octet-stream;

    # 日誌格式，定義別名爲 main
    #log_format main '$remote_addr - $remote_user [$time_local] "$request" '
    # '$status $body_bytes_sent "$http_referer" '
    # '"$http_user_agent" "$http_x_forwarded_for"';

    # 指定日誌輸入目錄
    #access_log logs/access.log main;

    # 調用 sendfile 系統傳輸文件
    sendfile        on;
    #tcp_nopush on;

    # 客戶端與服務器鏈接超時時間，超時自動斷開
    #keepalive_timeout 0;
    keepalive_timeout  65;

    # 開啓gizip 壓縮
    #gzip on;

    # 虛擬主機
    server {
        listen       8080;
        server_name  localhost;

        #charset koi8-r;

        #access_log logs/host.access.log main;

        # 路由
        location / {
                root   html;
                index  index.html index.htm;
            }
    }

    # 引入其餘的配置文件
    include servers/*;
}
複製代碼

搭建靜態站點

# 虛擬主機server塊
server {
    # 端口
    listen   8080;
    # 匹配請求中的host值
    server_name  localhost;
    
    # 監聽請求路徑
    location / {
        # 查找目錄
        root /source;
        # 默認查找
        index index.html index.htm;
    }
}
複製代碼

這裏說明一下相關字段前端

server 配置虛擬主機的相關參數，能夠有多個
server_name 經過請求中的host值找到對應的虛擬主機的配置
location 配置請求路由，處理相關頁面狀況
root 查找資源的路徑

配置完成後執行 nginx -t 看是否有錯誤，若是看到的是下面這種就是成功了java

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful
複製代碼

而後執行nginx -s reload 更新Nginx配置文件webpack

這時候打開瀏覽器輸入 localhost:8080 應該就能看到你的頁面了nginx

nginx -t 檢查配置文件是否有語法錯誤
nginx -s reload 向主進程發送信號，從新加載配置文件
nginx -s stop 快速關閉
nginx -s quit 等待工做進程處理完成後關閉web

動態匹配（請求過濾）

一般在開發環境或者測試環境的時候呢咱們修改了代碼，由於瀏覽器緩存，可能不會生效，須要手動清除緩存，才能看到修改後的效果，這裏咱們作一個配置讓瀏覽器不緩存相關的資源。後端

location ~* \.(js|css|png|jpg|gif)$ {
    add_header Cache-Control no-store;
}
複製代碼

~* \.(js|css|png|jpg|gif)$ 是匹配以相關文件類型而後單獨處理。 add_header 是給請求的響應加上一個頭信息Cache-Control no-store，告知瀏覽器禁用緩存，每次都從服務器獲取效果以下：api

匹配規則

一般的形式以下

location = / {
    [ configuration A ]
}

location / {
    [ configuration B ]
}

location /documents/ {
    [ configuration C ]
}

location ^~ /images/ {
    [ configuration D ]
}

location ~* \.(gif|jpg|jpeg)$ {
    [ configuration E ]
}
複製代碼

= 表示精確匹配。只有請求的url路徑與後面的字符串徹底相等時，纔會命中（優先級最高）。
^~ 表示若是該符號後面的字符是最佳匹配，採用該規則，再也不進行後續的查找。
~ 表示該規則是使用正則定義的，區分大小寫。
~* 表示該規則是使用正則定義的，不區分大小寫。

固然咱們還能夠經過狀態碼來過濾請求就像這樣

# 經過狀態碼，返回指定的錯誤頁面
error_page 500 502 503 504 /50x.html;
location = /50x.html {
    root /source/error_page;
}
複製代碼

反向代理解決跨域

由於瀏覽器的同源策略，當前端域名與後端域名不一致的時候致使請求失敗。咱們能夠經過配置Nginx反向代理來解決。

location /api {   
    # 請求host傳給後端
    proxy_set_header Host $http_host;
    # 請求ip 傳給後端
    proxy_set_header X-Real-IP $remote_addr;
    # 請求協議傳給後端
    proxy_set_header X-Scheme $scheme;
    # 路徑重寫
    rewrite  /api/(.*)  /$1  break;
    # 代理服務器
    proxy_pass http://localhost:9000;
}
複製代碼

攔截路徑/api, 能夠經過正則匹配。
proxy_set_header 容許從新定義或添加字段傳遞給代理服務器的請求頭。
$http_host、$remote_addr、$scheme 爲Nginx內置變量。
rewrite 根據rewrite後的請求URI，將路徑重寫，如：接口路徑爲 /user, 咱們能夠請求 /api/user。（爲何須要重寫uri？由於在使用Nginx作反向代理的時候，須要匹配到跨域的接口再作轉發，爲了方便匹配，會人爲的在原接口中添加一段路徑（或標示，如例子中的api），所以須要在匹配以後、轉發以前把添加的那段去掉，所以須要rewrite。）
break 繼續本次請求後面的處理 ,中止匹配下面的location。須要注意的是與之相似的last執行過程則是中止當前這個請求，並根據rewrite匹配的規則從新發起一個請求，從上到下依次匹配location後面的規則。
proxy_pass 代理服務器。

原理：Nginx攔截到相關匹配規則, Nginx再將請求轉發到http://localhost:9000，Nginx獲得請求後再響應到前端，能夠直接請求/api/user完成請求。

配置Gzip

開發過程當中不免用到一些成熟的框架，或者插件，這些外部的依賴，有時候體積比較大，致使頁面響應緩慢，咱們能夠用打包工具(webpack, rollup)，將代碼進行壓縮，以縮小代碼體積。開啓Nginx Gzip壓縮功能。須要注意的是 Gzip 壓縮功能須要瀏覽器跟服務器都支持，即服務器壓縮，瀏覽器解析。

查看瀏覽器支持狀況，肯定 請求頭 中的Accept-Encoding字段

肯定瀏覽器支持，咱們就能夠在Nginx中配置

server {
    # 開啓gzip 壓縮
    gzip on;
    # 設置gzip所需的http協議最低版本 （HTTP/1.1, HTTP/1.0）
    gzip_http_version 1.1;
    # 設置壓縮級別，壓縮級別越高壓縮時間越長 （1-9）
    gzip_comp_level 4;
    # 設置壓縮的最小字節數， 頁面Content-Length獲取
    gzip_min_length 1000;
    # 設置壓縮文件的類型 （text/html)
    gzip_types text/plain application/javascript text/css;
}
複製代碼

查看配置是否生效，查看 響應頭 中的Content-Encoding字段，值爲 gzip

負載均衡

負載均衡是Nginx 比較經常使用的一個功能，可優化資源利用率，最大化吞吐量，減小延遲，確保容錯配置，將流量分配到多個後端服務器。

Syntax:	upstream name { ... }
Default: —
Context: stream
複製代碼

這裏舉出經常使用的幾種策略

輪詢（默認），請求過來後，Nginx 隨機分配流量到任一服務器

upstream backend {
    server 127.0.0.1:3000;
    server 127.0.0.1:3001;
}
複製代碼

weight=number 設置服務器的權重，默認爲1，權重大的會被優先分配

upstream backend {
    server 127.0.0.1:3000 weight=2;
    server 127.0.0.1:3001 weight=1;
}
複製代碼

backup 標記爲備份服務器。當主服務器不可用時，將傳遞與備份服務器的鏈接。

upstream backend {
    server 127.0.0.1:3000 backup;
    server 127.0.0.1:3001;
}
複製代碼

ip_hash 保持會話，保證同一客戶端始終訪問一臺服務器。

upstream backend {
    ip_hash;  
    server 127.0.0.1:3000 backup;
    server 127.0.0.1:3001;
}
複製代碼

least_conn 優先分配最少鏈接數的服務器，避免服務器超載請求過多。

upstream backend {
    least_conn;
    server 127.0.0.1:3000;
    server 127.0.0.1:3001;
}
複製代碼

當咱們須要代理一個集羣時候能夠經過下面這種方式實現

http {

    upstream backend {
        server 127.0.0.1:3000;
        server 127.0.0.1:3001;
    }

    ...
    server {
        listen      9000;
        server_name localhost;
        
        location / {
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Scheme $scheme;
            
            proxy_pass backend; 
        }
    }
}
複製代碼