寫在前面

作為一名前端，這幾年沒怎麼碰過後臺的東西，只能乾等著後臺小哥去排查問題，確實有點不該。如果要聊 Nginx，現階段有點力不從心，內容還是挺多的，不夠平時用的內容倒不是很複雜，簡單幾個配置，二話不說，先學了再說，下次就不用幹等，自己也能排查排查。

什麼是 Nginx？

Nginx 的應用廣泛，常見場景：

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

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。

<code>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;
  }
}
/<code>

server_name

基於名稱的虛擬主機配置

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

比如，以下代碼

<code>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;
}
/<code>

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

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

index

設置網站的默認首頁

index 指令主要有 2 個作用：

• 對請求地址沒有指明首頁的，指定默認首頁
• 對一個請求，根據請求內容而設置不同的首頁，比如：

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

location

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

今天主要講一下這段代碼

以上，簡單來說是設置 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前端
鏈接：https://www.jianshu.com/p/c5417a34f41e

我自己是一名從事了多年的前端老程序員，小編為大家準備了新出的前端編程學習資料，免費分享給大家！

如果你也想學習前端，那麼幫忙轉發一下然後再關注小編後私信【1】可以得到我整理的這些前端資料了（私信方法：點擊我頭像進我主頁有個上面有個私信按鈕）

閱讀更多 前端明澈 的文章

關鍵字: Nginx 瀏覽器 全棧