快捷導(dǎo)航

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

更新時(shí)間：2023年03月18日 11:47:03 作者：客場(chǎng)消音器

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

前言

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

nginx簡(jiǎn)介

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

反向代理

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

正向代理

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

總之，正向代理中目標(biāo)服務(wù)器并不知道訪問它的真實(shí)用戶是誰(shuí)，因?yàn)楹退换サ氖谴矸?wù)器。

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

反向代理

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

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

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

負(fù)載均衡

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

動(dòng)靜分離

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

使用和配置

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

安裝

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

yum install nginx

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

nginx # 直接會(huì)啟動(dòng)nginx服務(wù)

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

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

常用命令

啟動(dò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

對(duì)于前端來(lái)說(shuō)，掌握這幾個(gè)命令就夠夠的了

配置

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

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

上面的配置的意思是我們?cè)L問服務(wù)的80端口時(shí)會(huì)自動(dòng)加載/usr/share/nginx/html目錄下的html文件，所以我們通過(guò)IP訪問會(huì)返回我們之前看到的頁(yè)面，我們切換到/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重啟命令，然后刷新頁(yè)面，頁(yè)面就變成如下所示：

項(xiàng)目部署配置

這就是nginx最簡(jiǎn)單的配置。但是我們?cè)陧?xiàng)目開發(fā)時(shí)一般會(huì)用vue或者react框架，開發(fā)完后打包再去部署到服務(wù)器上，這個(gè)時(shí)候nginx能幫什么忙呢？接下來(lái)，我就簡(jiǎn)單的去講解下如何用nginx部署前端服務(wù)。

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

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

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

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

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

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

user root; # 這里一定是root，如果報(bào)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; # 訪問跟路徑時(shí)對(duì)應(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 {
    }
  }
}

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

這個(gè)是最簡(jiǎn)單的前端項(xiàng)目部署的過(guò)程了。

緩存配置

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

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

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

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

跨域配置

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

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

gzip壓縮配置

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

server {
?
  ...
?
  # 開啟gzip壓縮，同理，關(guān)閉為off
  gzip on;
  # 壓縮的級(jí)別，一般取2-6，級(jí)別越高，壓縮的越小，但越耗費(fèi)服務(wù)器的cpu
  gzip_comp_level 6;
  # 超過(guò)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;
  }
?
  ...
}

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