淺聊反向代理三大組件｜DNS、Nginx、SSL 一次搞懂！【Docker超理解｜進階篇】

本篇的範例會使用 OpenAI 的 openwebui 應用程式，範例當中會使用https://openwebui.mattdataadventures.com 作為反向代理對外發布的網址，接下來就開始快速了解反向代理需要的三大元件吧！

Table of Contents

一、三大元件的角色總覽

元件	功能定位	你可以把它想成
DNS （Domain Name System）	把網域名稱（例如 `openwebui.com.tw`）指向伺服器 IP（例如 `123.45.67.89`）	🔍 電話簿 → 把網址翻譯成 IP
Nginx	在伺服器上接收所有外部請求，轉發給對應的服務	🚦 交通警察 → 決定請求該去哪裡
SSL 憑證（HTTPS）	建立加密連線，保護使用者資料安全	🔐 安全鎖 → 顯示瀏覽器的「安全連線」鎖頭

二、實際請求流程長什麼樣？

當使用者在瀏覽器輸入 https://openwebui.mattdataadventures.com 時，其實背後發生的事情是這樣的

使用者輸入網址 → DNS 解析 → Nginx 接收 → Nginx 憑證驗證（SSL） → 導向本地服務

逐步拆解一下這個流程：

使用者輸入網址 例如：https://openwebui.mattdataadventures.com
DNS 解析 DNS 的 A Record 告訴全世界： openwebui.mattdataadventures.com → 123.45.67.89 這就是伺服器的 IP。
Nginx 接收請求
- 使用者的瀏覽器連線到 123.45.67.89:443（HTTPS）
- Nginx 收到請求後，根據設定檔判斷轉發位置，例如： proxy_pass <http://localhost:3000>;
SSL 憑證驗證與加密
- Nginx 提供憑證（由 Let’s Encrypt 或其他憑證機構簽發）
- 瀏覽器驗證後 → 顯示 🔒 安全連線
- 所有資料都透過 HTTPS 加密傳輸。
反向代理至本地服務
- Nginx 把流量轉送給本機的 Docker 服務（例如 localhost:8080）
- 使用者完全不會接觸到內部網路，對他來說就是「一個安全的網址」。

三、實務上你會這樣設定的順序

步驟	任務	工具/設定位置
①	註冊網域（例如 Namecheap、Google Domains）	DNS 提供商
②	設定 DNS A Record 指向伺服器 IP	DNS 管理介面
③	安裝 Nginx	Ubuntu / Docker
④	建立 Nginx 反向代理設定	`/etc/nginx/sites-available/`
⑤	使用 Certbot 申請 SSL 憑證	Nginx + certbot
⑥	啟用 HTTPS，測試網址是否能正常連線	瀏覽器

四、SSL 憑證怎麼來？怎麼更新？

最簡單的方法就是用 Let’s Encrypt + Certbot 免費申請。

在 Ubuntu 上安裝方式如下：

sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d openwebui.mattdataadventures.com

Certbot 幫你做了這幾件事：

驗證 DNS 是否正確
自動產生 /etc/letsencrypt/live/.../fullchain.pem 憑證
自動修改 Nginx 設定檔加入 SSL 區段
自動排程 90 天續期

五、反向代理與 Docker 的關聯

假設你在本機用 Docker 跑一個服務（例如 OpenWebUI）：

services:
  openwebui:
    ports:
      - "8080:8080"

那 Nginx 設定就會是這樣：

server {
    listen 80;
    server_name openwebui.mattdataadventures.com;

    location / {
        proxy_pass <http://localhost:8080>;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

加上 SSL 後則變成：

server {
    listen 443 ssl;
    server_name openwebui.mattdataadventures.com;

    ssl_certificate /etc/letsencrypt/live/openwebui.mattdataadventures.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/openwebui.mattdataadventures.com/privkey.pem;

    location / {
        proxy_pass <http://localhost:8080>;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

這樣外部所有請求都會自動進入 Nginx，再安全地被轉送到你的容器裡 🚀

六、快速總結一句話：

🌐 DNS 決定「網址指到哪台伺服器」

🚦 Nginx 決定「請求進來後要給哪個服務」

🔐 SSL 決定「資料傳輸是否安全與被信任」

小結：

對於要部署 Web 服務的工程師或自架站的新手來說，

搞懂這三者的關係，就是部署上線的第一道門檻。

有了 DNS + Nginx + SSL，你的網站就能安全又漂亮地對外提供服務啦！

延伸閱讀：