系統設計聽起來很嚇人，但其實就是理解「東西怎麼連在一起的」。
這篇從最基礎的 6 個概念開始，讓你看懂任何系統架構圖的第一層。

這篇文章教什麼？

當你看到系統架構圖，上面畫著瀏覽器、伺服器、箭頭、各種方塊——你是不是常常不知道它們到底在幹嘛？

讀完這篇，你會看懂：

• 瀏覽器和伺服器之間怎麼溝通
• 為什麼輸入網址就能連到正確的網站
• 架構圖上的 Proxy 和 Reverse Proxy 分別在保護誰
• 為什麼有些網站比較快、有些比較慢

這 6 個概念是所有系統設計的地基，後面的 Load Balancer、CDN、資料庫設計全部建立在這些基礎之上。

概念 1：Client-Server Architecture

一句話說明

所有 Web 應用的基本運作模式：一邊發請求，一邊給回應。

最小範例

你（Client）                    餐廳（Server）
    |                               |
    |------- 「我要一份牛排」------->|
    |                               |  （處理訂單、烹飪）
    |<------ 「這是你的牛排」--------|
    |                               |

翻譯：Client 就是「要東西的那一方」，Server 就是「給東西的那一方」。

你會在哪裡遇到

• 瀏覽器就是 Client，你訪問的網站伺服器就是 Server
• 手機 App 是 Client，後端 API 是 Server
• 你用 AI 工具時，你的介面是 Client，AI 模型的伺服器是 Server

看懂架構圖

當你在架構圖上看到這樣的東西：

[Browser] ---HTTP Request---> [Web Server]
[Browser] <--HTTP Response--- [Web Server]
Code language: CSS (css)

翻譯：瀏覽器發送一個 HTTP 請求給伺服器，伺服器處理完後把結果送回來。就這樣，沒有更複雜的了。

重點提醒

一台電腦可以同時是 Client 也是 Server。例如你的後端伺服器，對瀏覽器來說它是 Server，但當它去跟資料庫要資料時，它又變成了 Client。

[瀏覽器]  --請求-->  [後端伺服器]  --請求-->  [資料庫]
 Client              Server/Client            Server

概念 2：IP Address

一句話說明

網路上每台電腦的唯一地址，就像每棟房子的門牌號碼。

最小範例

142.250.185.206    ← 這是 Google 的 IP 地址
192.168.1.1        ← 這通常是你家路由器的 IP
127.0.0.1          ← 這永遠是指「你自己的電腦」（localhost）
Code language: CSS (css)

為什麼要知道這個

當你在開發時看到這些東西，不要慌：

看懂架構圖

[Client: 203.1.2.3] -----> [Server: 142.250.185.206]
Code language: CSS (css)

翻譯：IP 位址 203.1.2.3 的電腦，正在連線到 IP 位址 142.250.185.206 的伺服器。

Vibe Coder 日常

當你跑 npm run dev 或 python -m uvicorn main:app 看到：

Server running on http://127.0.0.1:3000
Code language: JavaScript (javascript)

這表示：你的伺服器在你自己的電腦上跑起來了，在 port 3000 上監聽。只有你自己能訪問。

概念 3：DNS（Domain Name System）

一句話說明

把人類看得懂的網址，翻譯成電腦看得懂的 IP 位址。

最小範例

你輸入：google.com
DNS 翻譯：google.com → 142.250.185.206
瀏覽器實際連線到：142.250.185.206
Code language: CSS (css)

類比：DNS 就像手機的通訊錄。你不需要記住朋友的電話號碼（IP），只要記住名字（域名），通訊錄（DNS）會幫你查到號碼。

完整流程

當你在瀏覽器輸入 www.example.com 時，背後發生了什麼：

1. 瀏覽器：「www.example.com 的 IP 是什麼？」
     ↓
2. 先查本機快取（之前查過嗎？）
     ↓ 沒有
3. 問 DNS 伺服器
     ↓
4. DNS 回答：「93.184.216.34」
     ↓
5. 瀏覽器用 93.184.216.34 連線到伺服器
     ↓
6. 伺服器回傳網頁內容
Code language: CSS (css)

為什麼要知道這個

1. 部署網站時：你需要設定 DNS，把你的域名指向伺服器的 IP
2. 出問題時：「DNS 還沒生效」是很常見的問題，因為 DNS 記錄更新需要時間（幾分鐘到 48 小時）
3. 看架構圖時：DNS 通常是請求到達伺服器之前的第一步

看懂架構圖

[使用者] --google.com--> [DNS] --142.250.185.206--> [Google Server]
Code language: CSS (css)

翻譯：使用者輸入 google.com，DNS 查到對應的 IP，然後瀏覽器就用這個 IP 去連 Google 的伺服器。

概念 4：Proxy 與 Reverse Proxy

一句話說明

Proxy 藏住「誰在問」，Reverse Proxy 藏住「誰在答」。

最小範例：Proxy（正向代理）

                    Proxy
[你的電腦] ----> [代理伺服器] ----> [目標網站]
                     ↑
              目標網站只看到
              代理伺服器的 IP，
              不知道是你在訪問
Code language: CSS (css)

類比：像是請朋友幫你去買東西。店家只看到你朋友，不知道東西是你要的。

用途：

• 繞過網路限制（VPN 就是一種 Proxy）
• 隱藏你的真實 IP
• 公司監控員工上了哪些網站

最小範例：Reverse Proxy（反向代理）

                          Reverse Proxy
[使用者] ----> [反向代理伺服器] ----> [實際的後端伺服器 A]
                    |           ----> [實際的後端伺服器 B]
                    |           ----> [實際的後端伺服器 C]
                    ↑
              使用者只看到
              反向代理的 IP，
              不知道後面有幾台伺服器
Code language: JavaScript (javascript)

類比：像是飯店的前台。你不會直接進廚房找廚師，而是告訴前台你要什麼，前台決定交給哪個廚師處理。

用途：

• 保護後端：外部使用者不知道後端伺服器的真實 IP
• 負載均衡：把請求分散到多台伺服器
• SSL 終止：統一處理 HTTPS 加密
• 快取：存放常用的回應，加速訪問

一張表搞懂差異

看懂架構圖

當你在架構圖上看到 Nginx 或 Cloudflare 出現在使用者和後端之間，那就是 Reverse Proxy：

[使用者] → [Cloudflare / Nginx] → [你的 API Server]
Code language: CSS (css)

翻譯：使用者的請求先經過 Nginx（反向代理），Nginx 再轉發給實際的後端伺服器。

概念 5：Latency（延遲）

一句話說明

資料從 A 到 B 再回來所花的時間。越短越好。

最小範例

你（台北）---請求---> 伺服器（東京）
           50ms
你（台北）<--回應--- 伺服器（東京）
           50ms

總延遲（Round-trip）：約 100ms

你（台北）---請求---> 伺服器（美國東岸）
           150ms
你（台北）<--回應--- 伺服器（美國東岸）
           150ms

總延遲（Round-trip）：約 300ms

延遲的主要來源

為什麼要知道這個

1. 選伺服器位置：如果你的使用者在台灣，伺服器放東京比放美國快很多
2. 理解 CDN：CDN 就是把內容複製到全球各地的伺服器，讓使用者連到最近的那台，降低延遲
3. 效能問題：使用者抱怨「網站好慢」，延遲是第一個要檢查的因素

看懂架構圖

[台灣使用者] --30ms--> [CDN 節點：東京] --已快取--> 直接回應
[台灣使用者] --30ms--> [CDN 節點：東京] --沒快取--> [原始伺服器：美國] --150ms-->
Code language: CSS (css)

翻譯：CDN 在東京有一份快取，台灣使用者只需要 30ms 就能拿到內容。如果東京沒有快取，才需要再花 150ms 去美國的原始伺服器拿。

概念 6：HTTP / HTTPS

一句話說明

Client 和 Server 溝通時使用的語言規則（協定）。HTTPS 是加密版本。

最小範例

一個 HTTP 請求長這樣：

GET /api/users HTTP/1.1        ← 方法 + 路徑 + 版本
Host: example.com              ← 要連的伺服器
Authorization: Bearer xxx      ← 身份驗證（如果需要的話）

伺服器的回應：

HTTP/1.1 200 OK                ← 狀態碼：200 表示成功
Content-Type: application/json ← 回應的資料格式

{"users": [...]}               ← 實際的資料
Code language: HTTP (http)

必看懂：HTTP 方法

你會在 API 和程式碼中不斷看到這些：

必看懂：HTTP 狀態碼

伺服器回應時會帶一個數字，告訴你結果如何：

快速記法：

• 2xx：成功
• 3xx：轉址
• 4xx：你的問題（Client 端錯誤）
• 5xx：伺服器的問題

HTTP vs HTTPS

HTTP:
[你] ----「密碼是 1234」----> [伺服器]
          ↑ 任何人都能偷看

HTTPS:
[你] ----「@#$%^&*」-------> [伺服器]
          ↑ 加密過，偷看也看不懂
         (SSL/TLS 加密)
Code language: CSS (css)

重點：現在幾乎所有網站都用 HTTPS。如果你看到瀏覽器顯示「不安全」，那就是因為該網站還在用 HTTP。

6 個概念串在一起

現在讓我們看看，當你打開瀏覽器輸入 https://www.google.com 時，這 6 個概念怎麼一起運作：

1. [你的瀏覽器]（Client）想訪問 google.com
        ↓
2. [DNS] 把 google.com 翻譯成 142.250.185.206（IP Address）
        ↓
3. 瀏覽器用 HTTPS（HTTP + 加密）發送請求
        ↓
4. 請求可能經過 [Reverse Proxy]（Google 的負載均衡器）
        ↓
5. Reverse Proxy 把請求轉給某一台 [Server]
        ↓
6. 整個過程的來回時間就是 [Latency]
        ↓
7. Server 處理完畢，把網頁內容回傳給瀏覽器（HTTP Response）
Code language: CSS (css)

這就是整個 Web 運作的骨架。之後學到的 Load Balancer、CDN、API Gateway 都是在這個骨架上加東西。

Vibe Coder 檢查點

看到系統架構圖時，確認你能回答這些問題：

• [ ] 哪個是 Client？哪個是 Server？
• [ ] 資料走什麼路徑？中間經過哪些節點？
• [ ] 有沒有 Reverse Proxy？它在做什麼（負載均衡？SSL？快取？）
• [ ] 伺服器在哪個地理位置？使用者在哪？延遲會是問題嗎？
• [ ] 用的是 HTTP 還是 HTTPS？資料有加密嗎？

AI 對話速查表

小結

這篇涵蓋的 6 個概念是系統設計的地基：

1. Client-Server：一邊問、一邊答，所有 Web 應用的基本模式
2. IP Address：每台電腦在網路上的地址
3. DNS：把域名翻譯成 IP 的電話簿
4. Proxy / Reverse Proxy：正向代理保護使用者，反向代理保護伺服器
5. Latency：資料來回的時間，距離越近越快
6. HTTP/HTTPS：Client 和 Server 溝通的語言，HTTPS 是加密版

記住：系統設計不是在背名詞，而是理解「資料怎麼從 A 到 B」。掌握這 6 個基礎概念，你就能看懂大部分架構圖的第一層了。

下一篇：我們會進入 API Design、REST、GraphQL，看看 Client 和 Server 之間具體怎麼「說話」。