如何在 QNAP Container Station 使用 Nginx Proxy Manager 為 WordPress 建立反向代理與 HTTPS

我們已經透過 Container Station 建立好 WordPress 服務。不過，如果要讓 WordPress 正式對外提供服務，除了能夠透過網域名稱連線之外，還需要處理 HTTPS、SSL 憑證以及連線安全等問題。

建議在 WordPress 前方加入 Nginx Proxy Manager 作為反向代理，外部使用者不需要直接連線至 WordPress 容器，而是先連線至 Nginx Proxy Manager，再將流量轉送至內部的 WordPress 服務。

好處就是可以將網站服務與對外連線管理分開處理，WordPress 專心負責網站內容，Nginx Proxy Manager 則統一負責網域名稱、HTTPS、SSL 憑證與反向代理等工作。

未來如果還要在 NAS 上架設其他網站或服務，也能透過同一套 Nginx Proxy Manager 集中管理，不需要每個容器都各自處理 HTTPS 與憑證設定。

還沒跟上的朋友可以參考下列的文章

如何在 QNAP Container Station 部署 GoDaddy DDNS
如何在 QNAP Container Station 運行 Nginx Proxy Manager
如何在 QNAP Container Station 運行 WordPress 開源內容管理系統

網域 DNS 設定

首先到您購買網域名稱的平台，確認 DNS 設定是否正確。

  • A 紀錄：確認 @ 根網域是否指向路由器的外部 IP 位址
  • CNAME 紀錄：www 指向根網域，例如 ivancheng.tw。

還沒有設定 DDNS 的朋友，這邊可以先手動指定 IP 位址，畢竟路由器的 IP 變動不會這麼頻繁。

假設我們使用 ivancheng.tw 作為 WordPress 的網域名稱，當使用者開啟網站時，Godaddy 的 DNS 會先將 ivancheng.tw 解析至家中的對外 IP。

路由器設定

我們使用 ASUS 路由器來介紹，點選 Advanced Seetings 的 WAN，點選上方的 Virtual Server / Port Forwarding。

再將 80 與 443 Port 的連線轉送至 Nginx Proxy Manager 的 Local IP，點選 Apply。

反向代理設定

接著我們到 Nginx Proxy Manager 的管理介面，設定根據使用者存取的網域名稱，判斷流量應該轉送至哪一個內部服務。

建立 Proxy Host 如下

  • Domain Names：ivancheng.tw、www.ivancheng.tw
  • Scheme：HTTP
  • Forward Hostname / IP：您的 WordPress IP 與 Forward Port

點選 Save

確認 Nginx Proxy Manager 能夠根據使用者存取的網域名稱來進行導向

免費 SSL/TLS 憑證設定

可以讓 Nginx Proxy Manager 自動向 Let’s Encrypt 申請免費 SSL/TLS 憑證。之後也會負責憑證的續期，因此 WordPress 容器本身不需要另外處理 SSL。

前提是 DNS 已經正確指向你的對外 IP，而且 Router 有將 TCP 80、443 導向 Nginx Proxy Manager。

編輯 Proxy Host，切換到 SSL 頁面。

接著 SSL Certificate 選擇 Request a new Certificate。

  • Force SSL：自動將 HTTP 連線重新導向 HTTPS，確保網站統一透過加密連線存取。
  • HTTP/2 Support：讓瀏覽器更有效率地載入網站的 CSS、JavaScript、圖片等資源，對 WordPress 很適合。
  • HSTS Enabled：告訴瀏覽器這個網站之後只能使用 HTTPS，不要再嘗試使用 HTTP。不建議剛設定反向代理與憑證時馬上開啟，因為瀏覽器收到 HSTS 後會記住這個設定，如果之後 SSL、DNS 或反向代理設定出錯，測試與除錯會比較麻煩。
  • HSTS Sub-domains：除非你可以確定網域底下所有現在及未來使用的子網域都會提供 HTTPS，否則暫時不要開比較保險。
  • Use DNS Challenge：另外一種 Let’s Encrypt 網域驗證方式，我們的情況不用開。
  • Trust Upstream Forwarded Proto Headers：選項主要是當 Nginx Proxy Manager 前面還有另一層 Reverse Proxy、Load Balancer 或 CDN 時使用。

點選 Save，可以看到 SSL 已經變成 Let’s Encrypt。

我們就可以透過 HTTPS 來存取網站

檢視憑證如下

可以在 Certificates 頁面找到該憑證進行管理

WordPress 設定

我們替 WordPress 設定好反向代理後，雖然 Nginx Proxy Manager 已經可以將 https://ivancheng.tw 的流量正確轉送至 WordPress，但 WordPress 本身仍可能認為自己的網址是 http://192.168.0.101。

因為 WordPress 內有兩個重要設定

  • WordPress Address (URL)：WordPress 核心程式所在位置的網址。
  • Site Address (URL)：使用者實際存取網站時所使用的網址。

WordPress 會參考這些設定產生網站中的各種網址，例如文章連結、圖片、CSS、JavaScript，以及登入與管理後台網址。

如果網站已經改成透過 https://ivancheng.tw 對外提供服務，就應該將兩個設定都修改為 https://ivancheng.tw。

否則可能出現瀏覽器被重新導向至內部 IP、CSS 或圖片無法正常載入，甚至 HTTPS 網站載入 HTTP 資源而產生 Mixed Content 等問題。因此，完成反向代理與網域名稱設定後，也別忘了同步調整這兩個網址設定。

下一篇，我們將介紹如何透過 Nginx Proxy Manager 限制 WordPress 特定管理路徑的存取，只允許指定 IP 進入管理後台，進一步提升 WordPress 的安全性。

今天的分享就到這邊，感謝收看。

相關文章