寫(xiě)在前面
作為一名前端，這幾年沒(méi)怎么碰過(guò)后臺(tái)的東西，只能干等著后臺(tái)小哥去排查問(wèn)題，確實(shí)有點(diǎn)不該。如果要聊 Nginx，現(xiàn)階段有點(diǎn)力不從心，內(nèi)容還是挺多的，不夠平時(shí)用的內(nèi)容倒不是很復(fù)雜，簡(jiǎn)單幾個(gè)配置，二話不說(shuō)，先學(xué)了再說(shuō)，下次就不用干等，自己也能排查排查。
什么是 Nginx？
圖片來(lái)源：百度
Nginx 的應(yīng)用廣泛，常見(jiàn)場(chǎng)景：
- 靜態(tài)資源服務(wù)器
- 動(dòng)態(tài)匹配
- 反向代理
- Gzip 壓縮
- 負(fù)載均衡
今天呢，肯定學(xué)不完全部的啦，先學(xué)學(xué)一些現(xiàn)學(xué)現(xiàn)用的簡(jiǎ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)路連接，開(kāi)啟多個(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)聽(tīng) # 監(jiān)聽(tīng)所有的 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)首頁(yè) index index.html; location / { proxy_pass http://localhost:端口號(hào); } location /favicon.ico { # 過(guò)期時(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ì)通過(guò)請(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;}
訪問(wèn) www.xxx.com Nginx會(huì)轉(zhuǎn)發(fā)到 http://localhost:6002
訪問(wèn) www.xxx.org Nginx會(huì)轉(zhuǎn)發(fā)到 http://localhost:6003
index
設(shè)置網(wǎng)站的默認(rèn)首頁(yè)
index 指令主要有 2 個(gè)作用：
- 對(duì)請(qǐng)求地址沒(méi)有指明首頁(yè)的，指定默認(rèn)首頁(yè)
- 對(duì)一個(gè)請(qǐng)求，根據(jù)請(qǐng)求內(nèi)容而設(shè)置不同的首頁(yè)，比如：
location ~ ^/luwei/(.+)/web/$ { index index.$1.html index.htm;}
location
location ~ .*.(js|css)?$ { # proxy_pass http://localhost:端口號(hào); expires 12h;}
今天主要講一下這段代碼
以上，簡(jiǎn)單來(lái)說(shuō)是設(shè)置 js、css 文件的過(guò)期時(shí)間（注意，是注釋了proxy_pass后的作用），這樣原本是沒(méi)有問(wèn)題的，問(wèn)題在于，如果這么一寫(xiě)，因?yàn)樽⑨屃藀roxy_pass，所以一旦瀏覽器訪問(wèn)js、css 文件，Nginx 會(huì)默認(rèn)去上面配置的 root 中找，然而，我們使用的是 node 服務(wù)，js、css 不是單純的靜態(tài)文件，不直接在root 中，結(jié)果瀏覽器就訪問(wèn)不了。
對(duì)于 js、css 不是靜態(tài)文件的情況，有兩種處理辦法：
- 第一種是解開(kāi) proxy_pass http://localhost:端口號(hào); 這句的注釋，讓其回到 node 提供的服務(wù)中
- 第二種是把 location ~ .*.(js|css)?$ 整個(gè)都注釋掉，這樣請(qǐng)求的 js、css 文件會(huì)匹配上面的 location /，回到 node 提供的服務(wù)中
開(kāi)篇說(shuō)的坑點(diǎn)也在這里，不是什么大問(wèn)題，只是需要留意細(xì)節(jié)
前端出身，還是需要搞搞后臺(tái)地，有錯(cuò)誤歡迎直接指出
作者：廣州蘆葦科技web前端
鏈接：https://www.jianshu.com/p/c5417a34f41e
