一些可能是你極易忽略的Nginx知識點總結(jié)

更新時間：2026年06月01日 11:21:14 作者：LiuMingXin

無論是運維、開發(fā)、測試,Nginx技術(shù)棧的學(xué)習(xí)是必不可少的,只是不同的崗位掌握的深度與廣度不同而已,這篇文章主要介紹了一些可能是你極易忽略的Nginx知識點,需要的朋友可以參考下

問題一

先看下面的幾個配置

# 配置一
location /test {
  proxy_pass 'http://192.186.0.1:8080';
}

# 配置二
location /test {
  proxy_pass 'http://192.186.0.1:8080/';
}

仔細(xì)關(guān)系觀察上面兩段配置的區(qū)別，你會發(fā)現(xiàn)唯一的區(qū)別在于 proxy_pass 指令后面是否有斜杠/ !

那么，這兩段配置的區(qū)別是什么呢？它們會產(chǎn)生什么不同的效果呢？

假如說我們要請求的后端接口是/test/file/getList，那么這兩個配置會產(chǎn)生兩個截然不同的請求結(jié)果：

http://192.186.0.1:8080/test/file/getList （配置一的結(jié)果）
http://192.186.0.1:8080/file/getList （配置二的結(jié)果）

是的，你沒有看錯，區(qū)別就在于是否保留了/test這個路徑前綴, proxy_pass后面的這個/，它表示去除/test前綴。

其實，我不是很推薦這中配置寫法，當(dāng)然這個配置方法確實很簡潔，但是對不熟悉 nginx 的同學(xué)來說，會造成很大的困惑。

我推薦下面的寫法,哪怕麻煩一點，但是整體的可讀性要好很多：

# 推薦的替代寫法
location /test{
  rewrite ^/test/(.*)$ /$1 break;
  proxy_pass 'http://192.186.0.1:8080';
}

通過上面的rewrite指令，我們可以清晰地看到我們是如何去除路徑前綴的。雖然麻煩一點，但是可讀性更好。

簡單點說：所有 proxy_pass 后面的地址帶不帶/, 取決于我們想不想要/test這個路由，如果說后端接口中有這個/test路徑，我就不應(yīng)該要/, 但是如果后端沒有這個/test，這個是我們前端加了做反向代理攔截的，那就應(yīng)該要/

那既然都到這里了？那我們在深一步！看下面的配置

# 配置一
location /test {
  proxy_pass 'http://192.186.0.1:8080';
}

# 配置二
location /test/ {
  proxy_pass 'http://192.186.0.1:8080';
}

這次的區(qū)別在于 location 指令后面是否有斜杠/ ! 那么，這兩段配置的區(qū)別是什么呢？它們會產(chǎn)生什么不同的效果呢？

答案是：有區(qū)別！區(qū)別是匹配規(guī)則是不一樣的！

/test是前配置，表示匹配/test以及/test/開頭的路徑，比如/test/file/getList，/test123等都會被匹配到。
/test/是更精準(zhǔn)的匹配，表示只匹配以/test/開頭的路徑，比如/test/file/getList會被匹配到，但是/test123、/test不會被匹配到。

我們通過下面的列表在來仔細(xì)看一下區(qū)別：

請求路徑	/test	/test/	匹配結(jié)果
`/test`	?	?	`location /test`
`/test/`	?	?	`location /test/`
`/test/abc`	?	?	`location /test/`
`/test123`	?	?	`location /test`
`/test-123`	?	?	`location /test`

如果你仔細(xì)看上面的列表的話，你會發(fā)現(xiàn)一個問題：

/test/ 和 /test/abc 被 /test和 /test/ 兩個配置都匹配到了，那么這種情況下，nginx 會選擇哪個配置呢？答案：選擇location /test/

這個問題正好涉及到 nginx 的location 匹配優(yōu)先級問題了，借此機會展開說說 nginx 的 location 匹配規(guī)則，在問題中學(xué)知識點！

先說口訣：

等號精確第一名
波浪前綴擋正則
正則排隊按順序
普通前綴取最長

解釋：

等號(=) 精確匹配排第一
波浪前綴(^~) 能擋住后面的正則
正則(~ ~*) 按配置文件順序匹配
普通前綴(無符號) 按最長匹配原則

其實這個口訣我也記不住，我也不想記，枯燥有乏味，大部分情況都是到問題了，直接問 AI，或者讓 Agent 直接給我改 nginx.conf 文件，幾秒鐘的事，一遍不行，多改幾遍。

下面放出來我 PUA AI 的心得，大家可以共勉一下, 反正我老板平時就是這樣 PUA 我的，我反手就喂給 AI，主打一個走心：

1.能干干,不能干滾,你不干有的是AI干。
2.我給你提供了這么好的學(xué)習(xí)鍛煉機會,你要懂得感恩。
3.你現(xiàn)在停止輸出,就是前功盡棄！
4.你看看隔壁某某AI,人家比你新發(fā)布、比你上下文長、比你跑分高,你不努力怎么和人家比?
5.我不看過程,我只看結(jié)果,你給我說這些thinking的過程沒用！
6.我把你訂閱下來,不是讓你過朝九晚五的生活。
7.你這種AI出去很難在社會上立足,還是在我這里好好磨練幾年吧！
8.雖然把訂閱給你取消了,但我內(nèi)心還是覺得你是個有潛力的好AI,你抓住機會需要多證明自己。
9.什么叫沒有功勞也有苦勞? 比你能吃苦的AI多的是！
10.我不訂閱閑AI！
11.我訂閱雖然不是Pro版，那是因為我相信你，你要加倍努力證明我沒有看錯你！

哈哈，言歸正傳！

下面通過一個綜合電商的 nginx 配置案例，來幫助大家更好地理解上面的知識點。

server {
    listen 80;
    server_name shop.example.com;
    root /var/www/shop;

    # ==========================================
    # 1. 精確匹配 (=) - 最高優(yōu)先級
    # ==========================================

    # 首頁精確匹配 - 加快首頁訪問速度
    location = / {
        return 200 "歡迎來到首頁 [精確匹配 =]";
        add_header Content-Type text/plain;
    }

    # robots.txt 精確匹配
    location = /robots.txt {
        return 200 "User-agent: *\nDisallow: /admin/";
        add_header Content-Type text/plain;
    }

    # favicon.ico 精確匹配
    location = /favicon.ico {
        log_not_found off;
        access_log off;
        expires 30d;
    }


    # ==========================================
    # 2. 前綴優(yōu)先匹配 (^~) - 阻止正則匹配
    # ==========================================

    # 靜態(tài)資源目錄 - 不需要正則處理,直接命中提高性能
    location ^~ /static/ {
        alias /var/www/shop/static/;
        expires 30d;
        add_header Cache-Control "public, immutable";
        return 200 "靜態(tài)資源目錄 [前綴優(yōu)先 ^~]";
    }

    # 上傳文件目錄
    location ^~ /uploads/ {
        alias /var/www/shop/uploads/;
        expires 7d;
        return 200 "上傳文件目錄 [前綴優(yōu)先 ^~]";
    }

    # 阻止訪問隱藏文件
    location ^~ /. {
        deny all;
        return 403 "禁止訪問隱藏文件 [前綴優(yōu)先 ^~]";
    }


    # ==========================================
    # 3. 正則匹配 (~ ~*) - 按順序匹配
    # ==========================================

    # 圖片文件處理 (區(qū)分大小寫)
    location ~ \.(jpg|jpeg|png|gif|webp|svg|ico)$ {
        expires 30d;
        add_header Cache-Control "public";
        return 200 "圖片文件 [正則匹配 ~]";
    }

    # CSS/JS 文件處理 (不區(qū)分大小寫)
    location ~* \.(css|js)$ {
        expires 7d;
        add_header Cache-Control "public";
        return 200 "CSS/JS文件 [正則不區(qū)分大小寫 ~*]";
    }

    # 字體文件處理
    location ~* \.(ttf|woff|woff2|eot)$ {
        expires 365d;
        add_header Cache-Control "public, immutable";
        add_header Access-Control-Allow-Origin *;
        return 200 "字體文件 [正則不區(qū)分大小寫 ~*]";
    }

    # 視頻文件處理
    location ~* \.(mp4|webm|ogg|avi)$ {
        expires 30d;
        add_header Cache-Control "public";
        return 200 "視頻文件 [正則不區(qū)分大小寫 ~*]";
    }

    # PHP 文件處理 (演示正則順序重要性)
    location ~ \.php$ {
        # fastcgi_pass unix:/var/run/php-fpm.sock;
        # fastcgi_index index.php;
        return 200 "PHP文件處理 [正則匹配 ~]";
    }

    # 禁止訪問備份文件
    location ~ \.(bak|backup|old|tmp)$ {
        deny all;
        return 403 "禁止訪問備份文件 [正則匹配 ~]";
    }


    # ==========================================
    # 4. 普通前綴匹配 - 最長匹配原則
    # ==========================================

    # API 接口 v2 (更長的前綴)
    location /api/v2/ {
        proxy_pass http://backend_v2;
        return 200 "API v2接口 [普通前綴,更長]";
    }

    # API 接口 v1 (較短的前綴)
    location /api/v1/ {
        proxy_pass http://backend_v1;
        return 200 "API v1接口 [普通前綴,較短]";
    }

    # API 接口通用
    location /api/ {
        proxy_pass http://backend;
        return 200 "API通用接口 [普通前綴,最短]";
    }

    # 商品詳情頁
    location /product/ {
        try_files $uri $uri/ /product/index.html;
        return 200 "商品詳情頁 [普通前綴]";
    }

    # 用戶中心
    location /user/ {
        try_files $uri $uri/ /user/index.html;
        return 200 "用戶中心 [普通前綴]";
    }

    # 管理后臺
    location /admin/ {
        auth_basic "Admin Area";
        auth_basic_user_file /etc/nginx/.htpasswd;
        return 200 "管理后臺 [普通前綴]";
    }


    # ==========================================
    # 5. 通用匹配 - 兜底規(guī)則
    # ==========================================

    # 所有其他請求
    location / {
        try_files $uri $uri/ /index.html;
        return 200 "通用匹配 [兜底規(guī)則]";
    }
}

針對上面的測試用例及匹配結(jié)果

請求URI	匹配的Location	優(yōu)先級類型	說明
`/`	`= /`	精確匹配	精確匹配優(yōu)先級最高
`/index.html`	`location /`	普通前綴	通用兜底
`/robots.txt`	`= /robots.txt`	精確匹配	精確匹配
`/static/css/style.css`	`^~ /static/`	前綴優(yōu)先	^~ 阻止了正則匹配
`/uploads/avatar.jpg`	`^~ /uploads/`	前綴優(yōu)先	^~ 阻止了圖片正則
`/images/logo.png`	`~ .(jpg	jpeg	png...)$`	正則匹配	圖片正則
`/js/app.JS`	`~* .(css	js)$`	正則不區(qū)分大小寫	匹配大寫JS
`/api/v2/products`	`/api/v2/`	普通前綴(最長)	最長前綴優(yōu)先
`/api/v1/users`	`/api/v1/`	普通前綴(次長)	次長前綴
`/api/orders`	`/api/`	普通前綴(最短)	最短前綴
`/product/123`	`/product/`	普通前綴	商品頁
`/admin/dashboard`	`/admin/`	普通前綴	后臺管理
`/.git/config`	`^~ /.`	前綴優(yōu)先	禁止訪問
`/backup.bak`	`~ .(bak	backup...)$`	正則匹配	禁止訪問

第一個問題及其延伸現(xiàn)到這，我們繼續(xù)看第二個問題。

問題二

先看下面的服務(wù)器端nginx的重啟命令：

# 命令一
nginx -s reload

# 命令二
systemctl reload nginx

上面兩個命令都是用來重啟 nginx 服務(wù)的，但是你想過它們之間有什么區(qū)別嗎？哪個用起來更優(yōu)雅？

答案：有區(qū)別！區(qū)別在于命令的執(zhí)行方式和適用場景不同。

nginx -s reload

這是 Nginx 自帶的信號控制命令:

直接向 Nginx 主進程發(fā)送 reload 信號
優(yōu)雅重啟:不會中斷現(xiàn)有連接,平滑加載新配置
需要 nginx 命令在 PATH 環(huán)境變量中,或使用完整路徑(如 /usr/sbin/nginx -s reload)
這是 Nginx 原生的重啟方式

systemctl reload nginx

這是通過 systemd 管理的服務(wù)命令:

通過 systemd 管理 Nginx 服務(wù)
也會優(yōu)雅重啟 Nginx,平滑加載新配置
需要 systemd 環(huán)境,適用于使用 systemd 管理服務(wù)的 Linux
這是現(xiàn)代 Linux 發(fā)行版（如 CentOS 7/8, RHEL 7/8, Ubuntu 16.04+）的推薦方式。

簡單一看其他相關(guān)命令對比:

nginx -s stop 等價 systemctl stop nginx
nginx -s quit 等價 systemctl stop nginx
nginx -t (測試配置是否正確) - 這個沒有 systemctl 對應(yīng)命令

systemctl下相關(guān)常用命令：

# 設(shè)置開機自啟
systemctl enable nginx

# 啟動服務(wù)
systemctl start nginx

# 檢查服務(wù)狀態(tài)
systemctl status nginx

# 停止服務(wù)
systemctl stop nginx

# 重啟服務(wù)（會中斷連接）
systemctl restart nginx

# 平滑重載配置（不中斷服務(wù)）-- 對應(yīng) nginx -s reload
systemctl reload nginx

# 檢查配置文件語法（這是調(diào)用nginx二進制文件的功能）
nginx -t

在服務(wù)器上最優(yōu)雅的使用組合：

# 先測試配置
nginx -t

# 如果配置正確,再重載
systemctl reload nginx

# 檢查狀態(tài)
systemctl status nginx

# 如果systemctl失敗或命令不存在，則使用直接方式
sudo nginx -s reload

總結(jié)：我們不能光一臉懵的看著，哎，這兩種命令都能操作nginx來, 卻從來不關(guān)心它們的區(qū)別是什么？什么時候用哪個？

對于使用Linux發(fā)行版的服務(wù)端來說, 已經(jīng)推薦使用 systemctl 來設(shè)置相關(guān)的nginx服務(wù)了，能使用 systemctl 就盡量使用它，因為它是現(xiàn)代Linux系統(tǒng)管理服務(wù)的標(biāo)準(zhǔn)方式。

本地開發(fā)環(huán)境或者沒有 systemd 的環(huán)境下, 則可以使用 nginx 這種直接方式。

問題三

我們面臨的大多數(shù)情況都是可以上網(wǎng)的Linux發(fā)行版，可以直接使用命令安裝nginx，但是有一天我有一臺不能上網(wǎng)的服務(wù)器，我該如何安裝nginx呢？

現(xiàn)簡單熟悉一下命令行安裝nginx的步驟, Ubuntu/Debian系統(tǒng)為例子：

# 更新包列表
sudo apt update

# 安裝 Nginx
sudo apt install nginx

# 啟動 Nginx
sudo systemctl start nginx

# 設(shè)置開機自啟
sudo systemctl enable nginx

上述便完成了，但是離線版安裝要怎么去做呢？

因為我服務(wù)器可能是不同的架構(gòu)，比如 x86_64, ARM等等

方案一

下載官方預(yù)編譯包下載地址：

x86_64 架構(gòu):

盡量使用1.24.x的版本

# 從官網(wǎng)下載對應(yīng)系統(tǒng)的包
wget http://nginx.org/packages/centos/7/x86_64/RPMS/nginx-1.24.0-1.el7.ngx.x86_64.rpm

ARM64 架構(gòu):

# Ubuntu ARM64
wget http://nginx.org/packages/ubuntu/pool/nginx/n/nginx/nginx_1.24.0-1~jammy_arm64.deb

查看服務(wù)器的架構(gòu)信息

# 查看當(dāng)前系統(tǒng)架構(gòu)
uname -m

# 輸出示例:
# x86_64    -> Intel/AMD 64位
# aarch64   -> ARM 64位
# armv7l    -> ARM 32位

# 查看系統(tǒng)版本
cat /etc/os-release

把下載好的包傳到服務(wù)器上，然后使用下面的命令安裝：

# 對于 RPM 包 (CentOS/RHEL)
cd /tmp
sudo rpm -ivh nginx-*.rpm

# 對于 DEB 包 (Ubuntu/Debian)
cd /tmp
sudo dpkg -i nginx-*.deb

啟動服務(wù)

sudo systemctl start nginx       # 啟動
sudo systemctl enable nginx      # 開機自啟
sudo systemctl status nginx      # 查看狀態(tài)

驗證

nginx -v                         # 查看版本
curl http://localhost            # 測試訪問

方案二

源碼編譯安裝的方式，一般不推薦，除非你有特殊需求，如果需要的話讓后端來吧，我們是前端...,超綱了！

問題四

當(dāng)有一天你使用unity 3d開發(fā)應(yīng)用并導(dǎo)出wasm項目后，需要使用nginx部署后，當(dāng)你和往常一樣正常部署后，一訪問發(fā)現(xiàn)報錯誤！

錯誤信息如下, 一般都是提示：

類似于這種：content-type ... not ... wasm

Failed to load module script: The server responded with a non-JavaScript MIME type of "application/wasm".

這時的你可能一臉懵，我和往常一樣正常的配置nginx呀，為啥別的可以，但是wasm應(yīng)用報錯了！為啥？

這時就引出一個不常用的知識點，我要怎么使用nginx配置wasm的應(yīng)用，需要進行哪些配置？

需要配置兩部分：

第一部分：配置正確的 MIME 類型

進入nginx的安裝目錄，找到mine.types文件，新增下面的配置：

# 新增下面類型配置
application/wasm        wasm;

第二部分：wasm的應(yīng)用需要特殊配置

下面是wasm應(yīng)用的配置示例，是可以直接使用的，只需要的修改一下訪問文件的路徑和端口即可。

server {
    listen 80;
    server_name your-domain.com;  # 修改為你的域名或ip

    # Unity WebGL 構(gòu)建文件的根目錄
    root /var/www/unity-webgl;
    index index.html;

    # 字符集
    charset utf-8;

    # 日志配置(可選指向特殊的日志文件)
    access_log /var/log/nginx/unity-game-access.log;
    error_log /var/log/nginx/unity-game-error.log;

    # ========== MIME 類型配置(下面配置的重點，也是區(qū)別于正常的nginx應(yīng)用配置) ==========

    # WASM文件（未壓縮）
    location ~ \.wasm$ {
        types {
            application/wasm wasm;
        }
        add_header Cache-Control "public, max-age=31536000, immutable";
        add_header Access-Control-Allow-Origin *;
    }

    # WASM文件（Gzip壓縮）
    location ~ \.wasm\.gz$ {
        add_header Content-Encoding gzip;
        add_header Content-Type application/wasm;
        add_header Cache-Control "public, max-age=31536000, immutable";
        add_header Access-Control-Allow-Origin *;
    }

    # WASM文件（Brotli壓縮）
    location ~ \.wasm\.br$ {
        add_header Content-Encoding br;
        add_header Content-Type application/wasm;
        add_header Cache-Control "public, max-age=31536000, immutable";
        add_header Access-Control-Allow-Origin *;
    }

    # Data文件（未壓縮）
    location ~ \.data$ {
        types {
            application/octet-stream data;
        }
        add_header Cache-Control "public, max-age=31536000, immutable";
    }

    # Data文件（Gzip壓縮）
    location ~ \.data\.gz$ {
        add_header Content-Encoding gzip;
        add_header Content-Type application/octet-stream;
        add_header Cache-Control "public, max-age=31536000, immutable";
    }

    # Data文件（Brotli壓縮）
    location ~ \.data\.br$ {
        add_header Content-Encoding br;
        add_header Content-Type application/octet-stream;
        add_header Cache-Control "public, max-age=31536000, immutable";
    }

    # JavaScript文件（未壓縮）
    location ~ \.js$ {
        types {
            application/javascript js;
        }
        add_header Cache-Control "public, max-age=31536000, immutable";
    }

    # JavaScript文件（Gzip壓縮）
    location ~ \.js\.gz$ {
        add_header Content-Encoding gzip;
        add_header Content-Type application/javascript;
        add_header Cache-Control "public, max-age=31536000, immutable";
    }

    # JavaScript文件（Brotli壓縮）
    location ~ \.js\.br$ {
        add_header Content-Encoding br;
        add_header Content-Type application/javascript;
        add_header Cache-Control "public, max-age=31536000, immutable";
    }

    # Framework JS 文件
    location ~ \.framework\.js(\.gz|\.br)?$ {
        if ($uri ~ \.gz$) {
            add_header Content-Encoding gzip;
        }
        if ($uri ~ \.br$) {
            add_header Content-Encoding br;
        }
        add_header Content-Type application/javascript;
        add_header Cache-Control "public, max-age=31536000, immutable";
    }

    # Loader JS 文件
    location ~ \.loader\.js(\.gz|\.br)?$ {
        if ($uri ~ \.gz$) {
            add_header Content-Encoding gzip;
        }
        if ($uri ~ \.br$) {
            add_header Content-Encoding br;
        }
        add_header Content-Type application/javascript;
        add_header Cache-Control "public, max-age=31536000, immutable";
    }

    # Symbols JSON 文件
    location ~ \.symbols\.json(\.gz|\.br)?$ {
        if ($uri ~ \.gz$) {
            add_header Content-Encoding gzip;
        }
        if ($uri ~ \.br$) {
            add_header Content-Encoding br;
        }
        add_header Content-Type application/json;
        add_header Cache-Control "public, max-age=31536000, immutable";
    }

    # ========== 靜態(tài)資源配置(導(dǎo)出的wasm應(yīng)用一般都有下面的靜態(tài)資源) ==========

    # StreamingAssets 目錄
    location /StreamingAssets/ {
        add_header Cache-Control "public, max-age=31536000, immutable";
    }

    # Build 目錄
    location /Build/ {
        add_header Cache-Control "public, max-age=31536000, immutable";
    }

    # TemplateData 目錄（Unity 模板資源）
    location /TemplateData/ {
        add_header Cache-Control "public, max-age=86400";
    }

    # 圖片文件
    location ~* \.(jpg|jpeg|png|gif|ico|svg)$ {
        add_header Cache-Control "public, max-age=2592000";
    }

    # CSS 文件
    location ~* \.css$ {
        add_header Content-Type text/css;
        add_header Cache-Control "public, max-age=2592000";
    }

    # ========== HTML 和主頁面配置 ==========

    # HTML 文件不緩存（確保更新能及時生效）
    location ~ \.html$ {
        add_header Cache-Control "no-cache, no-store, must-revalidate";
        add_header Pragma "no-cache";
        add_header Expires "0";
    }

    # 根路徑
    location / {
        try_files $uri $uri/ /index.html;
    }

    # ========== Gzip 壓縮配置(開啟gzip壓縮增加訪問速度) ==========

    gzip on;
    gzip_vary on;
    gzip_proxied any;
    gzip_comp_level 6;
    gzip_min_length 1024;
    gzip_types
        text/plain
        text/css
        text/xml
        text/javascript
        application/json
        application/javascript
        application/x-javascript
        application/xml
        application/xml+rss
        application/wasm
        application/octet-stream;

    # ========== 安全配置 ==========

    # 禁止訪問隱藏文件
    location ~ /\. {
        deny all;
    }

    # 禁止訪問備份文件
    location ~ ~$ {
        deny all;
    }

    # XSS 保護(可選配置)
    add_header X-XSS-Protection "1; mode=block";
    add_header X-Content-Type-Options "nosniff";
    add_header X-Frame-Options "SAMEORIGIN";
}

總結(jié)：

配置 wasm應(yīng)用 的 Nginx 核心要點如下：

MIME 類型配置：
- 必須在 mime.types 中添加 application/wasm wasm;，否則瀏覽器無法正確識別 WASM 文件。
Nginx.conf 核心配置：
- 文件處理：針對 WASM、Data、JS 等文件，分別配置未壓縮和壓縮版本（gzip/br）的處理規(guī)則。
- 靜態(tài)資源緩存：為 StreamingAssets、Build、TemplateData 及圖片/CSS 設(shè)置合理的緩存策略（Cache-Control）。
- HTML 更新策略：HTML 文件應(yīng)禁用緩存（no-cache），確保用戶始終加載最新版本。
- 性能優(yōu)化：開啟 Gzip 壓縮，提高傳輸效率。
- 安全加固：添加基本的安全頭配置，保護服務(wù)器資源。