不懂 Nginx 的前端不是好前端

這周上線企業(yè)的設(shè)計(jì)業(yè)務(wù)新官網(wǎng)（還沒優(yōu)化完，我自己都覺得有點(diǎn)丑丑的，努力優(yōu)化），上線那晚，被 Nginx 卡了一下，作為一名前端，這幾年沒怎么碰過后臺(tái)的東西，只能干等著后臺(tái)小哥去排查問題，確實(shí)有點(diǎn)不該。如果要聊 Nginx，現(xiàn)階段有點(diǎn)力不從心，內(nèi)容還是挺多的，不夠平時(shí)用的內(nèi)容倒不是很復(fù)雜，簡單幾個(gè)配置，二話不說，先學(xué)了再說，下次就不用干等，自己也能排查排查。

什么是 Nginx？

Nginx是一款輕量級(jí)的Web 服務(wù)器/反向代理服務(wù)器及電子郵件（IMAP/POP3）代理服務(wù)器?！俣劝倏频膥

總之呢，Nginx 的應(yīng)用廣泛，常見場景：

• 靜態(tài)資源服務(wù)器
• 動(dòng)態(tài)匹配
• 反向代理
• Gzip 壓縮
• 負(fù)載均衡

今天呢，肯定學(xué)不完全部的啦，先學(xué)學(xué)一些現(xiàn)學(xué)現(xiàn)用的簡單配置。

Nginx配置文件結(jié)構(gòu)

nginx.conf 文件中主要有三個(gè)結(jié)構(gòu)：

1. Global: nginx 運(yùn)行相關(guān)
   • 全局塊：配置影響nginx全局的指令。一般有運(yùn)行nginx服務(wù)器的用戶組，nginx進(jìn)程pid存放路徑，日志存放路徑，配置文件引入，允許生成worker process數(shù)等。
2. events: 與用戶的網(wǎng)絡(luò)連接相關(guān)
   • events塊：配置影響nginx服務(wù)器或與用戶的網(wǎng)絡(luò)連接。有每個(gè)進(jìn)程的最大連接數(shù)，選取哪種事件驅(qū)動(dòng)模型處理連接請(qǐng)求，是否允許同時(shí)接受多個(gè)網(wǎng)路連接，開啟多個(gè)網(wǎng)絡(luò)連接序列化等。
3. http
   • http塊：可以嵌套多個(gè)server，配置代理，緩存，日志定義等絕大多數(shù)功能和第三方模塊的配置。如文件引入，mime-type定義，日志自定義，是否使用sendfile傳輸文件，連接超時(shí)時(shí)間，單連接請(qǐng)求數(shù)等。

server

了解了以上Nginx配置文件結(jié)構(gòu)后，今天主要學(xué)習(xí)http塊中的 server。server塊，用于配置虛擬主機(jī)的相關(guān)參數(shù)，一個(gè)http中可以有多個(gè)server。

server {
  # 配置網(wǎng)絡(luò)監(jiān)聽
  # 監(jiān)聽所有的 80
  listen 80;
  
  # 基于名稱的虛擬主機(jī)配置
  server_name design.luweitech.cn;

  # 配置請(qǐng)求的根目錄
  # Web 服務(wù)器收到請(qǐng)求后，首先要在服務(wù)端指定的目錄中尋找請(qǐng)求資源
  root /xxx/abc;

  # 設(shè)置網(wǎng)站的默認(rèn)首頁
  index index.html;

  location / {
    proxy_pass http://localhost:端口號(hào);
  }

  location /favicon.ico {
    # 過期時(shí)間設(shè)置 12 小時(shí)
    expires 12h;
  }

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

server_name

基于名稱的虛擬主機(jī)配置

server_name 是虛擬服務(wù)器的識(shí)別路徑，不同的域名會(huì)通過請(qǐng)求頭中的HOST字段，匹配到特定的server塊，轉(zhuǎn)發(fā)到對(duì)應(yīng)的應(yīng)用服務(wù)器中去。

比如，以下代碼

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會(huì)轉(zhuǎn)發(fā)到 http://localhost:6002

訪問 www.xxx.org Nginx會(huì)轉(zhuǎn)發(fā)到 http://localhost:6003

index

設(shè)置網(wǎng)站的默認(rèn)首頁

index 指令主要有 2 個(gè)作用：

• 對(duì)請(qǐng)求地址沒有指明首頁的，指定默認(rèn)首頁
• 對(duì)一個(gè)請(qǐng)求，根據(jù)請(qǐng)求內(nèi)容而設(shè)置不同的首頁，比如：

location ~ ^/luwei/(.+)/web/$ {
    index index.$1.html index.htm;
}

location

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

今天主要講一下這段代碼

以上，簡單來說是設(shè)置 js、css 文件的過期時(shí)間（注意，是注釋了proxy_pass后的作用），這樣原本是沒有問題的，問題在于，如果這么一寫，因?yàn)樽⑨屃?code>proxy_pass，所以一旦瀏覽器訪問js、css 文件，Nginx 會(huì)默認(rèn)去上面配置的 root 中找，然而，我們使用的是 node 服務(wù)，js、css 不是單純的靜態(tài)文件，不直接在root 中，結(jié)果瀏覽器就訪問不了。

對(duì)于 js、css 不是靜態(tài)文件的情況，有兩種處理辦法：

1. 第一種是解開 proxy_pass http://localhost:端口號(hào); 這句的注釋，讓其回到 node 提供的服務(wù)中
2. 第二種是把 location ~ .*\.(js|css)?$ 整個(gè)都注釋掉，這樣請(qǐng)求的 js、css 文件會(huì)匹配上面的 location /，回到 node 提供的服務(wù)中

開篇說的坑點(diǎn)也在這里，不是什么大問題，只是需要留意細(xì)節(jié)

前端出身，還是需要搞搞后臺(tái)地，有錯(cuò)誤歡迎直接指出

吳勤發(fā)
蘆葦科技web前端開發(fā)工程師、COO
擅長網(wǎng)站建設(shè)、公眾號(hào)開發(fā)、微信小程序開發(fā)、小游戲、公眾號(hào)開發(fā)，專注于前端框架、服務(wù)端渲染、SEO技術(shù)、交互設(shè)計(jì)、圖像繪制、數(shù)據(jù)分析等研究，有興趣的小伙伴來撩撩我們~ web@talkmoney.cn

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