1. 程式人生 > 實用技巧 >前端需要掌握的Nginx知識

前端需要掌握的Nginx知識

什麼是 Nginx?

Nginx是一款輕量級的Web 伺服器/反向代理伺服器及電子郵件(IMAP/POP3)代理伺服器。——抄百度百科的~

總之呢,Nginx 的應用廣泛,常見場景:

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

今天呢,肯定學不完全部的啦,先學學一些現學現用的簡單配置。

Nginx配置檔案結構

nginx.conf 檔案中主要有三個結構:

1.Global: nginx 執行相關

全域性塊:配置影響nginx全域性的指令。一般有執行nginx伺服器的使用者組,nginx程序pid存放路徑,日誌存放路徑,配置檔案引入,允許生成worker process數等。

2.events: 與使用者的網路連線相關,events塊:配置影響nginx伺服器或與使用者的網路連線。有每個程序的最大連線數,選取哪種事件驅動模型處理連線請求,是否允許同時接受多個網路連線,開啟多個網路連線序列化等。

3.http塊:可以巢狀多個server,配置代理,快取,日誌定義等絕大多數功能和第三方模組的配置。如檔案引入,mime-type定義,日誌自定義,是否使用sendfile傳輸檔案,連線超時時間,單連線請求數等。


server

瞭解了以上Nginx配置檔案結構後,今天主要學習http塊中的 server。server塊,用於配置虛擬主機的相關引數,一個http中可以有多個server。

server {
  # 配置網路監聽
  # 監聽所有的 80
  listen 80;
  
  # 基於名稱的虛擬主機配置
  server_name design.luweitech.cn;

  # 配置請求的根目錄
  # Web 伺服器收到請求後,首先要在服務端指定的目錄中尋找請求資源
  root /xxx/abc;

  # 設定網站
的預設首頁 index index.html; location / { proxy_pass http://localhost:埠號; } location /favicon.ico { # 過期時間設定 12 小時 expires 12h; } location ~ .*\.(js|css)?$ { # proxy_pass http://localhost:埠號; expires 12h; } }

server_name

基於名稱的虛擬主機配置

server_name 是虛擬伺服器的識別路徑,不同的域名會通過請求頭中的HOST欄位,匹配到特定的server塊,轉發到對應的應用伺服器中去。

比如,以下程式碼

server {
  listen  80;
  server_name www.xxx.com;
  location / {
    proxy_pass http://localhost:6002;
  }
}
 
server {
  listen 80;
  server_name www.xxx.*;
  location / {
    proxy_pass http://localhost:6003;
}

訪問www.xxx.comNginx會轉發到http://localhost:6002

訪問www.xxx.orgNginx會轉發到http://localhost:6003

廣州vi設計http://www.maiqicn.com 我的007辦公資源網站https://www.wode007.com

index

設定網站的預設首頁

index 指令主要有 2 個作用:

對請求地址沒有指明首頁的,指定預設首頁對一個請求,根據請求內容而設定不同的首頁,比如:
location ~ ^/luwei/(.+)/web/$ {
    index index.$1.html index.htm;
}

location

location ~ .*\.(js|css)?$ {
  # proxy_pass http://localhost:埠號;
  expires 12h;
}

今天主要講一下這段程式碼

以上,簡單來說是設定 js、css 檔案的過期時間(注意,是註釋了proxy_pass後的作用),這樣原本是沒有問題的,問題在於,如果這麼一寫,因為註釋了proxy_pass,所以一旦瀏覽器訪問js、css 檔案,Nginx 會預設去上面配置的root中找,然而,我們使用的是 node 服務,js、css 不是單純的靜態檔案,不直接在root中,結果瀏覽器就訪問不了。

對於 js、css 不是靜態檔案的情況,有兩種處理辦法:

第一種是解開proxy_pass http://localhost:埠號;這句的註釋,讓其回到 node 提供的服務中第二種是把location ~ .*\.(js|css)?$整個都註釋掉,這樣請求的 js、css 檔案會匹配上面的location /,回到 node 提供的服務中