不懂 Nginx 的前端不是好前端

廣州蘆葦科技web前端發表於2019-12-19
Nginx前端

不懂 Nginx 的前端不是好前端

這週上線企業的設計業務新官網（還沒優化完，我自己都覺得有點醜醜的，努力優化），上線那晚，被 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
    • 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.com Nginx會轉發到 http://localhost:6002

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

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 不是靜態檔案的情況，有兩種處理辦法：

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

開篇說的坑點也在這裡，不是什麼大問題，只是需要留意細節

前端出身，還是需要搞搞後臺地，有錯誤歡迎直接指出

【吳勤發】 蘆葦科技web前端開發工程師、COO 擅長網站建設、公眾號開發、微信小程式開發、小遊戲、公眾號開發，專注於前端框架、服務端渲染、SEO技術、互動設計、影像繪製、資料分析等研究，有興趣的小夥伴來撩撩我們~ web@talkmoney.cn

訪問 www.luweitech.cn/ 瞭解更多

相關文章