[WordPress] 透過 Nginx 的 Reverse Proxy 反向代理與 Sub Filter 字串取代對外開啟內網通道服務

本篇文章更新時間：2024/05/30
如有資訊過時或語誤之處，歡迎使用 Contact 功能通知。
一介資男的 LINE 社群開站囉！歡迎入群聊聊～
如果本站內容對你有幫助，歡迎使用 BFX Pay 加密貨幣 或 新台幣 贊助支持。

最近在玩通道服務 [VPS] 使用通道服務 frp / sish 把 localhost 本機防火墻內 WordPress 網站對外公開的方法 的時候總是會因為 WordPress 輸出有絕對路徑的關係，所有引用到的資源（css/js/png..）都會失聯。

原本覺得如果通道服務能做到取代字串的話就完美了，但通道作者表示這不太算是這通道服務的範圍，轉而推薦使用 Nginx 方法。

我原本就有在使用 Nginx 作為伺服器，突然間就覺得如果是這樣也很棒！

簡單來說架構就是：

1. 內網 IP 的內網 WordPress 主機
2. 內/外網 IP 的 Nginx 伺服器主機

WordPress 網站的位址假設是： http://10.0.0.1

那 Nginx 的伺服器設定只需要新增一個對外網的網域 vhost 來處理就好，如下設定：

location / {
    sub_filter 'http://10.0.0.1' 'https://public.mxp.tw';
    sub_filter 'http:\/\/10.0.0.1' 'https:\/\/public.mxp.tw';
    #sub_filter 'before_string' 'after_string';
    sub_filter_once off;
    resolver 8.8.8.8;
    proxy_pass http://10.0.0.1$uri;
    proxy_set_header Accept-Encoding '';
    proxy_set_header Host 10.0.0.1;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_ssl_server_name on;
    proxy_ssl_protocols TLSv1.2 TLSv1.3;
    proxy_ssl_ciphers HIGH:!aNULL:!MD5;
}

這個設定有以下幾個關鍵：

1. sub_filter 的功能需要 Nginx 有把 ngx_http_sub_module 模組也編譯進去才可以使用。
2. sub_filter 沒有限制取代字串的數量可以多組多次。
3. sub_filter_once 設定為 off 是關閉「取代一次」這件事。
4. Accept-Encoding 設定為空值是避免被 gzip 壓縮過的內容字串無法取代。
5. 內網網址如果是網域的話，還要代上 Host 標頭。
6. 內網網站有使用 SSL 加密的話，proxy_ssl_server_name 需要設定為 on。

這個設定不只可以滿足內網網站的對外，也可以是將其他外網做包裝，跳脫資源被絕對路徑給綁住的問題。