1. 程式人生 > >nginx配置靜態文件服務器的一個特殊需求的探索和分享, nginx處理不同路徑返回統一文件,nginx改寫,跳轉請求.

nginx配置靜態文件服務器的一個特殊需求的探索和分享, nginx處理不同路徑返回統一文件,nginx改寫,跳轉請求.

資料 查找 文件 我希望 不同 nbsp style 成就 ctype

最近在做一個前後端分離的個人博客,在做自己博客的時候有個想法,本來是打算用nginx作為靜態文件服務器使用,django做後端程序.

我的前端頁面用vue寫的,結果用組件用嗨了,發現頁面列表和 詳情都是通過切換組件實現的,這樣很省代碼,但是為了實現下面這種效果的時候遇到了問題:

我要訪問url: http://www.liushx.com/artical/123456.html

返回同一頁面(artical.html 或者 detail.html , 具體內容通過api獲取, 123456.html就是攜帶請求數據的),但是要帶上123456.html,這個數據是文章詳情的id,必須提供.

那麽問題來了,如何實現nginx在處理這個路徑的時候去提供我的那個通用文件呢?

簡單說明我的文件結構:

[email protected]:~$ pwd
/home/ht
[email protected]-PC:~$ tree nginx-pages
nginx-pages
├── index.html
└── pages
    ├── artical.html
    └── detail.html

1 directory, 3 files

按照現在網上的所有可以找到的方法,我需要把我的url路徑設定為 /pages/artical.html

但是這顯然不符合我的需求,我希望的路徑是:  /art/123456.html  響應 /pages/artical.html ;   /novel/123456.html  響應 /pages/detail.html ;

雖然找不到這種類型的資料,但是我相信nginx 是很牛逼的,他們的大佬工程師必定提供這種簡單的需求了.

這種需求在後端實現起來很簡單,我感覺通過nginx實現的話,思路八成就是跳轉,可惜的是通過 proxy_pass 的方式行不通, nginx會把文件名拼起來,結果就是跳轉之後,nginx會去尋找一個 /pages/artical.html123456.html 的神奇文件,然後驕傲的向我報錯.

然後我去查看下官方文檔,發現一個有意思的函數 rewrite, re開頭的函數....嗯........差不多就是她了!

官方文檔上對rewrite的說明:

rewrite regex replacement flag

理解了意思之後立馬去嘗試, O 了個大 K,跑通了!!!!!

下面提供關鍵代碼:

nginx.conf

    server_name localhost;
    root /home/ht/nginx-pages;
    location / {
        index index.html;
        }

    location ~* ^/art/\d*\.html$ {
        rewrite ^(/art/.*)$ /pages/artical.html break; 
        root /home/ht/nginx-pages;
        index pages/artical.html;
    }
    location ~* ^/novel/\d*\.html$ {
        rewrite ^/novel/.*$ /pages/detail.html break;
        root /home/ht/nginx-pages;
        index pages/detail.html;
    }

簡單來講,就是把拿到的路徑重新寫,換成另一個路徑去嘗試查找文件,好像nginx提供這個函數是為了容錯的,殊途同歸嘛,我拿來滿足我的需求也好啊.

這個函數提供的效果簡直堪稱優秀 !

因為nginx只是內部改寫了這個路徑,返回給瀏覽器的還是用戶請求的路徑 !

我的html

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
<h1>index</h1>
</body>
</html>

artical.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>artical</title>
</head>
<body>
<h1>artical</h1>
</body>
</html>

detail.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>detail</title>
</head>
<body>
<h1>detail</h1>
</body>
</html>

運行成功後瀏覽器的效果:

技術分享圖片技術分享圖片技術分享圖片

嗯嗯,圓滿了...

nginx配置靜態文件服務器的一個特殊需求的探索和分享, nginx處理不同路徑返回統一文件,nginx改寫,跳轉請求.