前端必備的一些nginx知識點匯總
前言
最近在做一個後臺項目，需要加載一個大型的的文件，一開始這個文件大概有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如下:
<!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>
修改完後執行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配置，但是掌握瞭這些也可以讓你在需要的時候不那麼慌張，所以趕緊學起來吧！
到此這篇關於前端必備的一些nginx知識點匯總的文章就介紹到這瞭,更多相關前端必備nginx知識點內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！