前端開發者必備的Nginx知識！(附自己錄製的web前端資料集合)

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

常見場景：

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

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

Nginx 安裝目錄下的nginx.conf就是Nginx全局的配置文件，我們主要修改這裡的內容。nginx.conf.default作為配置文件的備份。

# 設置工作進程的數量
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 看是否有錯誤，如果看到的是下面這種就是成功了

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配置文件

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

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

動態匹配（請求過濾）

通常在開發環境或者測試環境的時候呢我們修改了代碼，因為瀏覽器緩存，可能不會生效，需要手動清除緩存，才能看到修改後的效果，這裡我們做一個配置讓瀏覽器不緩存相關的資源。

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

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

匹配規則

通常的形式如下

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:\tupstream 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;
 }
 }
}

最後

Nginx 的功能還有很多，這裡只介紹了幾個比較基礎、常用的，供大家學習和參考，快速入門，搭建出一套可用的環境。

---

想要學好web前端的小夥伴們，小編給大家整理了最新web前端資料大全！這些資料都是JD架構師Sonia老師熬夜錄製的，下面的所有錄製的每一個免費課程Sonia老師都要精心準備3-5小時，Sonia老師作為每天敲8小時以上代碼的一線程序員，所有課程都是她每天下班回家和早上4:30起來錄製的。所有的視頻，一共花了3個月的時間，後續Sonia老師還會每天堅持給大家錄製免費視頻！請大家支持一下Sonia老師！

本著為廣大讀者服務的初心，下面所以Sonia老師錄製的視頻資料完全是免費贈送的，感興趣的只需要添加小編WX: 18672945276 ,就能領取到需要的資料！