前言

最近在做一個後臺專案，需要載入一個大型的的檔案，一開始這個檔案大概有40M，算了下處在公司比較好的網路環境下瀏覽器下載下來大概得12s左右，然後載入這個檔案還得7s左右，這樣理想情況下呈現給使用者大概得20s左右，不管loading的動畫做的多麼美麗使用者肯定接受不了。 上傳到OSS服務上發現不能自動快取，後來只能當做靜態資源丟到伺服器上，發現還是快取不了，這個時候想到了nginx可以用來配置快取和壓縮，但是作為一個前端開發之前是沒有接觸過nginx的，更別說進行復雜的配置了（雖然配置個快取壓縮啥的不算複雜），但是惡補下nginx的知識刻不容緩了，於是這篇文章就誕生了。

nginx簡介

Nginx是一款輕量級、高效能的 Web 伺服器 、反向代理伺服器，它具有有很多非常優越的特性：

反向代理

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

• 正向代理

正向代理伺服器是一個位於客戶端和目標伺服器之間的伺服器，為了從目標伺服器取得內容，客戶端向代理伺服器傳送一個請求並指定目標，然後代理伺服器向目標伺服器轉交請求並將獲得的內容返回給客戶端。

總之，正向代理中目標伺服器並不知道訪問它的真實使用者是誰，因為和它互動的是代理伺服器。

常見的🌰：比如我們訪問國外的YouTube、Facebook等網站，就是通過代理伺服器實現的，這個就是正向代理的過程。

• 反向代理

正向代理中目標伺服器不知道使用者是誰，反向代理中則相反，是使用者不知道目標伺服器是誰。

使用者將請求傳送到反向代理伺服器，由反向代理伺服器去選擇目標伺服器獲取資料後，再返回給客戶端，這個過程中使用者並不知道真正的請求傳送到哪臺伺服器上了。

使用反向代理，目標伺服器可以對客戶端隱藏伺服器的IP地址。

負載均衡

反向代理伺服器可以做負載均衡，根據所有真實伺服器的負載情況，將客戶端請求分發到不同的真實伺服器上。也就是說哪個伺服器沒那麼忙，哪個伺服器就來響應請求。

動靜分離

在訪問服務端時，一般會請求一些靜態資源，如js、css、圖片等，這些資源可以在反向代理伺服器中進行快取，減少伺服器的壓力，而動態請求可以繼續請求伺服器。

使用和配置

接下來就來看下怎麼安裝並進行一些常用的配置。

安裝

首先可以去買一臺伺服器，我買的是騰訊雲的，系統是CentOS，所以是自帶yum命令的，登入伺服器後直接執行以下命令：

yum install nginx

安裝完成後，就可以啟動nginx服務了，直接執行：

nginx # 直接會啟動nginx服務

然後在瀏覽器訪問伺服器的IP，就會出現下面的頁面：

這就說明nginx服務已經被啟動了。

常用命令

• 啟動nginx服務的命令

[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服務

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

• 停止nginx服務

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

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

配置

nginx的預設配置檔案通常是/etc/nginx/nginx.conf，我們跳到/etc/nginx目錄中執行cat nginx.conf可以檢視配置檔案的內容，下面我copy了重要的部分先來分析：

user root; ​ ... ​ http { ​ ... ​ server {   listen       80 default_server;       # 預設在80埠啟動nginx服務   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 / {                         # 訪問伺服器跟路徑   } ​   error_page 404 /404.html;             # 訪問的時候路徑404       location = /40x.html {           # 404時訪問的html   } ​   error_page 500 502 503 504 /50x.html; # 伺服器內部錯誤       location = /50x.html {           # 5xx時訪問的html   } } }

上面的配置的意思是我們訪問服務的80埠時會自動載入/usr/share/nginx/html目錄下的html檔案，所以我們通過IP訪問會返回我們之前看到的頁面，我們切換到/usr/share/nginx/html目錄下，修改其中的index.html如下:

```

                                ​            

hello nginx!

    ```

修改完後執行nginx -s reload重啟命令，然後重新整理頁面，頁面就變成如下所示：

專案部署配置

這就是nginx最簡單的配置。但是我們在專案開發時一般會用vue或者react框架，開發完後打包再去部署到伺服器上，這個時候nginx能幫什麼忙呢？接下來，我就簡單的去講解下如何用nginx部署前端服務。

首先我們建立一個react專案或者vue專案，如何建立專案就不再說明了，我是用vite建立的vue3的專案。 建立好後直接npm run build進行打包，打包好後執行下面的命令：

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

然後輸入密碼，就可以把打包的整個dist檔案上傳到服務的/root/www/website/這個目錄下了。

伺服器的對應目錄如下：

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

現在，我們就成功的將靜態資源部署到伺服器上了，接下來就只需要修改nginx的配置就可以了，也就是修改/etc/nginx/nginx.conf這個檔案的內容，修改後檔案如下（還是隻展示重要部分內容）：

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; # 訪問跟路徑時對應訪問的目錄快取我們上傳靜態資原始檔的目錄     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 /下面加上訪問的檔案目錄路徑和檔案型別就可以了，修改好後執行nginx -s reload重啟，回到頁面重新整理就會看到如下頁面：

這個是最簡單的前端專案部署的過程了。

快取配置

前端經常有一些圖片還有其他靜態資原始檔基本上不會再被修改了，就比如說我做上一個專案的時候的那個大的檔案，那這個時候就可以快取到本地，防止下次請求再從伺服器上拉取，這樣是很耗費時間和伺服器頻寬的，接下來我們就來看下如何使用nginx配置快取。

server { ​ ... ​ location / {   root /root/www/website/dist;   index   index.html     index.htm; ​   location ~ .*.(?:jpg|jpeg|png|svg)$ { # 匹配靜態資源的檔案字尾     expires   7d; # 7天后過期   } } ​ ... }

上面的配置是對一些圖片資源進行的快取配置，快取時間為7天，修改好重啟後重新整理頁面，找到關於圖片資源的請求，然後就會發現請求第二次的時候就會從本地快取中獲取，並且響應頭顯示快取過期時間是7天后：

這是對圖片的快取，其他資原始檔也是同理。

跨域配置

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

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

gzip壓縮配置

如果存在靜態資源過大，可能會導致服務端響應過慢，儘管配置了快取，但是第一次在獲取資源的情況下並沒有快取，只能從伺服器上獲取，這個時候就可以考慮開啟gzip壓縮，這樣可以節省伺服器的頻寬，接下來就來看看如何配置gzip壓縮的。

server { ​ ... ​ # 開啟gzip壓縮，同理，關閉為off gzip on; # 壓縮的級別，一般取2-6，級別越高，壓縮的越小，但越耗費伺服器的cpu gzip_comp_level 6; # 超過1K的檔案才進行壓縮 gzip_min_length 1k; # 檔案型別 gzip_types image/png image/jpeg image/gif image/svg+xml; # 在響應頭中新增 Vary gzip_vary on; ​ location / {   root /root/www/website/dist;   index   index.html     index.htm; } ​ ... }

修改好後重啟，開啟頁面，開啟前這個logo的svg檔案大小為1.9k：

開啟gzip後，大小變為1.2k：

並且響應頭上也有gzip的標識了：

總結

以上就是對於nginx的一些常用配置進行的介紹，作為一個前端開發，雖然很多時候不需要自己進行nginx配置，但是掌握了這些也可以讓你在需要的時候不那麼慌張，所以趕緊學起來吧！