不懂 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

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