快捷導(dǎo)航

前端必備的一些nginx知識點(diǎn)匯總

更新時間：2023年03月18日 11:47:03 作者：客場消音器

Nginx是一個高性能的HTTP和反向代理web服務(wù)器,同時也提供了IMAP/POP3/SMTP服務(wù),下面這篇文章主要給大家匯總介紹了關(guān)于前端必備的一些nginx知識點(diǎn),文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

最近在做一個后臺項目，需要加載一個大型的的文件，一開始這個文件大概有40M，算了下處在公司比較好的網(wǎng)絡(luò)環(huán)境下瀏覽器下載下來大概得12s左右，然后加載這個文件還得7s左右，這樣理想情況下呈現(xiàn)給用戶大概得20s左右，不管loading的動畫做的多么美麗用戶肯定接受不了。上傳到OSS服務(wù)上發(fā)現(xiàn)不能自動緩存，后來只能當(dāng)做靜態(tài)資源丟到服務(wù)器上，發(fā)現(xiàn)還是緩存不了，這個時候想到了nginx可以用來配置緩存和壓縮，但是作為一個前端開發(fā)之前是沒有接觸過nginx的，更別說進(jìn)行復(fù)雜的配置了（雖然配置個緩存壓縮啥的不算復(fù)雜），但是惡補(bǔ)下nginx的知識刻不容緩了，于是這篇文章就誕生了。

nginx簡介

Nginx是一款輕量級、高性能的 Web 服務(wù)器、反向代理服務(wù)器，它具有有很多非常優(yōu)越的特性：

反向代理

與反響代理相對的肯定是正向代理，那么我們就先從正向代理開始說明

正向代理

正向代理服務(wù)器是一個位于客戶端和目標(biāo)服務(wù)器之間的服務(wù)器，為了從目標(biāo)服務(wù)器取得內(nèi)容，客戶端向代理服務(wù)器發(fā)送一個請求并指定目標(biāo)，然后代理服務(wù)器向目標(biāo)服務(wù)器轉(zhuǎn)交請求并將獲得的內(nèi)容返回給客戶端。

總之，正向代理中目標(biāo)服務(wù)器并不知道訪問它的真實用戶是誰，因為和它交互的是代理服務(wù)器。

常見的??：比如我們訪問國外的YouTube、Facebook等網(wǎng)站，就是通過代理服務(wù)器實現(xiàn)的，這個就是正向代理的過程。

反向代理

正向代理中目標(biāo)服務(wù)器不知道用戶是誰，反向代理中則相反，是用戶不知道目標(biāo)服務(wù)器是誰。

用戶將請求發(fā)送到反向代理服務(wù)器，由反向代理服務(wù)器去選擇目標(biāo)服務(wù)器獲取數(shù)據(jù)后，再返回給客戶端，這個過程中用戶并不知道真正的請求發(fā)送到哪臺服務(wù)器上了。

使用反向代理，目標(biāo)服務(wù)器可以對客戶端隱藏服務(wù)器的IP地址。

負(fù)載均衡

反向代理服務(wù)器可以做負(fù)載均衡，根據(jù)所有真實服務(wù)器的負(fù)載情況，將客戶端請求分發(fā)到不同的真實服務(wù)器上。也就是說哪個服務(wù)器沒那么忙，哪個服務(wù)器就來響應(yīng)請求。

動靜分離

在訪問服務(wù)端時，一般會請求一些靜態(tài)資源，如js、css、圖片等，這些資源可以在反向代理服務(wù)器中進(jìn)行緩存，減少服務(wù)器的壓力，而動態(tài)請求可以繼續(xù)請求服務(wù)器。

使用和配置

接下來就來看下怎么安裝并進(jìn)行一些常用的配置。

安裝

首先可以去買一臺服務(wù)器，我買的是騰訊云的，系統(tǒng)是CentOS，所以是自帶yum命令的，登錄服務(wù)器后直接執(zhí)行以下命令：

yum install nginx

安裝完成后，就可以啟動nginx服務(wù)了，直接運(yùn)行：

nginx # 直接會啟動nginx服務(wù)

然后在瀏覽器訪問服務(wù)器的IP，就會出現(xiàn)下面的頁面：

這就說明nginx服務(wù)已經(jīng)被啟動了。

常用命令

啟動nginx服務(wù)的命令

[root@VM-0-14-centos ~]# nginx

檢查配置的命令，一般用于在修改配置后檢查下配置是否合法

[root@VM-0-14-centos ~]# nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

重啟命令，修改完配置后需要重啟nginx服務(wù)

[root@VM-0-14-centos ~]# nginx -s reload

停止nginx服務(wù)

[root@VM-0-14-centos ~]# nginx -s stop

對于前端來說，掌握這幾個命令就夠夠的了

配置

nginx的默認(rèn)配置文件通常是/etc/nginx/nginx.conf，我們跳到/etc/nginx目錄中執(zhí)行cat nginx.conf可以查看配置文件的內(nèi)容，下面我copy了重要的部分先來分析：

user root;
?
...
?
http {
?
  ...
?
  server {
    listen       80 default_server;       # 默認(rèn)在80端口啟動nginx服務(wù)
    listen       [::]:80 default_server;
    server_name  _;                       # 綁定的域名
    root         /usr/share/nginx/html;   # 根目錄，會加載這個目錄下的html文件
?
    # Load configuration files for the default server block.
    include /etc/nginx/default.d/*.conf;  # 可以引入其他配置文件
?
    location / {                          # 訪問服務(wù)器跟路徑
    }
?
    error_page 404 /404.html;             # 訪問的時候路徑404
        location = /40x.html {            # 404時訪問的html
    }
?
    error_page 500 502 503 504 /50x.html; # 服務(wù)器內(nèi)部錯誤
        location = /50x.html {            # 5xx時訪問的html
    }
  }
}

上面的配置的意思是我們訪問服務(wù)的80端口時會自動加載/usr/share/nginx/html目錄下的html文件，所以我們通過IP訪問會返回我們之前看到的頁面，我們切換到/usr/share/nginx/html目錄下，修改其中的index.html如下:

<!DOCTYPE html>
<html>
    <head>
        <title>Hello nginx</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <style type="text/css">
        </style>
    </head>
?
    <body>
        <h1>hello nginx!</h1>
    </body>
</html>

修改完后執(zhí)行nginx -s reload重啟命令，然后刷新頁面，頁面就變成如下所示：

項目部署配置

這就是nginx最簡單的配置。但是我們在項目開發(fā)時一般會用vue或者react框架，開發(fā)完后打包再去部署到服務(wù)器上，這個時候nginx能幫什么忙呢？接下來，我就簡單的去講解下如何用nginx部署前端服務(wù)。

首先我們創(chuàng)建一個react項目或者vue項目，如何創(chuàng)建項目就不再說明了，我是用vite創(chuàng)建的vue3的項目。創(chuàng)建好后直接npm run build進(jìn)行打包，打包好后運(yùn)行下面的命令：

scp -r ./dist root@你的IP:/root/www/website/

然后輸入密碼，就可以把打包的整個dist文件上傳到服務(wù)的/root/www/website/這個目錄下了。

服務(wù)器的對應(yīng)目錄如下：

注意：在真實的開發(fā)過程中部署項目肯定不是手動，一般會用一些ci工具，下次可以專門針對前端部署再寫一篇文章。

現(xiàn)在，我們就成功的將靜態(tài)資源部署到服務(wù)器上了，接下來就只需要修改nginx的配置就可以了，也就是修改/etc/nginx/nginx.conf這個文件的內(nèi)容，修改后文件如下（還是只展示重要部分內(nèi)容）：

user root; # 這里一定是root，如果報403就是這里沒修改
?
...
?
http {
  
  ...
?
  server {
    listen       80 default_server;
    listen       [::]:80 default_server;
    server_name  _;
    root         /usr/share/nginx/html;
?
    include /etc/nginx/default.d/*.conf;
?
    location / {
      root  /root/www/website/dist; # 訪問跟路徑時對應(yīng)訪問的目錄緩存我們上傳靜態(tài)資源文件的目錄
      index   index.html      index.htm; # 文件類型
    }
?
    error_page 404 /404.html;
      location = /40x.html {
    }
?
    error_page 500 502 503 504 /50x.html;
      location = /50x.html {
    }
  }
}

其實我們只需要在location /下面加上訪問的文件目錄路徑和文件類型就可以了，修改好后執(zhí)行nginx -s reload重啟，回到頁面刷新就會看到如下頁面：

這個是最簡單的前端項目部署的過程了。

緩存配置

前端經(jīng)常有一些圖片還有其他靜態(tài)資源文件基本上不會再被修改了，就比如說我做上一個項目的時候的那個大的文件，那這個時候就可以緩存到本地，防止下次請求再從服務(wù)器上拉取，這樣是很耗費(fèi)時間和服務(wù)器帶寬的，接下來我們就來看下如何使用nginx配置緩存。

server {
?
  ...
?
  location / {
    root  /root/www/website/dist;
    index   index.html      index.htm;
?
    location ~ .*.(?:jpg|jpeg|png|svg)$ { # 匹配靜態(tài)資源的文件后綴
      expires   7d; # 7天后過期
    }
  }
?
  ...
}

上面的配置是對一些圖片資源進(jìn)行的緩存配置，緩存時間為7天，修改好重啟后刷新頁面，找到關(guān)于圖片資源的請求，然后就會發(fā)現(xiàn)請求第二次的時候就會從本地緩存中獲取，并且響應(yīng)頭顯示緩存過期時間是7天后：

這是對圖片的緩存，其他資源文件也是同理。

跨域配置

跨域是開發(fā)過程中或者面試過程中經(jīng)常會碰到的問題，面試的時候一般會回答jsonp或者服務(wù)端加響應(yīng)頭等方式，今天我們看看nginx如何去配置跨域。下面就是常見的跨域配置：

server {
?
  ...
?
  add_header Access-Control-Allow-Origin *; # 表示允許所有域名域跨域調(diào)用
  add_header Access-Control-Allow-Methods *; # 表示允許所有請求方法跨域
  if ($request_method = OPTIONS) { # 檢查請求的類型是不是預(yù)檢命令
    return 200;
  }
?
  location / {
    root  /root/www/website/dist;
    index   index.html      index.htm;
?
  }
?
  ...
}

gzip壓縮配置

如果存在靜態(tài)資源過大，可能會導(dǎo)致服務(wù)端響應(yīng)過慢，盡管配置了緩存，但是第一次在獲取資源的情況下并沒有緩存，只能從服務(wù)器上獲取，這個時候就可以考慮開啟gzip壓縮，這樣可以節(jié)省服務(wù)器的帶寬，接下來就來看看如何配置gzip壓縮的。

server {
?
  ...
?
  # 開啟gzip壓縮，同理，關(guān)閉為off
  gzip on;
  # 壓縮的級別，一般取2-6，級別越高，壓縮的越小，但越耗費(fèi)服務(wù)器的cpu
  gzip_comp_level 6;
  # 超過1K的文件才進(jìn)行壓縮
  gzip_min_length 1k;
  # 文件類型
  gzip_types image/png image/jpeg image/gif image/svg+xml;
  # 在響應(yīng)頭中添加 Vary
  gzip_vary on;
?
  location / {
    root  /root/www/website/dist;
    index   index.html      index.htm;
  }
?
  ...
}

修改好后重啟，打開頁面，開啟前這個logo的svg文件大小為1.9k：