# 前端工程師網路基礎 1 - OSI 模型、IP、MAC、DNS 入門

## 前言
還記得第一次進公司的時候，我興沖沖地打開電腦準備開始工作，結果發現可以用瀏覽器上網搜尋但是 `npm install` 一直卡住、Docker 拉不到 image。我當時超困惑：「為什麼瀏覽器可以，程式碼卻不行？」直到同事跟我說：「公司有為了資安有內網啊，所以你要設定 Proxy！」

不知道大家有沒有類似經驗，或常常聽到 IT 部門講 DNS、IP、MAC、Proxy 這些名詞卻一知半解，那看這篇文章就沒錯了！

---

## OSI Model

開始之前我們先來了解一下網路的概念，OSI（Open Systems Interconnection）模型是一個網路通訊的理論架構，把複雜的網路通訊分成 7 個層級，每層負責不同的工作。如同蓋房子，從地基、柱子、牆壁、屋頂到裝潢，一層一層往上建！


為什麼要特別了解網路架構呢？當我們在理解新概念或是deg時就可以快速找到原因和重點，遇到問題時就需要由下而上的檢查：

實體層有問題？ → 網路線鬆了、WiFi 訊號弱
網路層有問題？ → IP 設定錯誤、路由問題
傳輸層有問題？ → Port 被佔用、防火牆阻擋
應用層有問題？ → 程式碼錯誤、Proxy 設定錯誤

而前端工程師一定要理解這幾層的概念，今天會從第二層開始慢慢往上講：

DNS, Proxy, HTTP, Socket   → Layer 7 (應用層)
    Port,UDP, TCP          → Layer 4 (傳輸層)
     IP, NAT               → Layer 3 (網路層)
     MAC 位置               → Layer 2 (資料鏈結層)

## Layer 2：MAC 位址 - 網卡的身分證

## 定義
MAC 位址（Media Access Control Address）就像是網路卡的身分證字號，在工廠生產時就決定了，理論上永遠不會改變。由6組，每組2個十六進位數字（0-9, A-F）組成，共48bits，例：`00:1A:2B:3C:4D:5E`

### MAC 的角色與範圍

- 在同一個區域網路（LAN）中，用來識別每一張網卡。
- 幫助交換機（Switch）或路由器知道資料要送給哪個實體設備。
- 當你的電腦要傳資料給同網段的另一台電腦時，會
- 用 ARP 問「誰是 192.168.1.101？」
- 對方回答它的 MAC 位址
- 再用 MAC 封包傳資料（來源 MAC → 目的 MAC）

> MAC 像是「收件人的門牌號碼」，只在同一棟大樓（LAN）裡有意義。

## Layer 3：IP 位址 - 網路世界的門牌

### 定義
IP 位址（Internet Protocol Address）就像是**網路世界的門牌號碼**，每台連上網路的設備都需要一個 IP 位址，才能被找到。
舉個例子，現實世界中寄信時，需要知道朋友家的地址（門牌號碼），網路世界也一樣，你的電腦要連線到 Google → 需要知道 Google 伺服器的 IP

### IP 的角色與範圍

- 在**整個網際網路（WAN）**上，用來標示每台設備的位置。
- 負責封包的「跨網段傳遞」，讓資料能從一個城市（網路）送到另一個城市。
- 路由器根據 IP 來決定下一站要送到哪裡。

> IP 像是「城市 + 街道的地址」，可以讓資料穿越不同城市（網段）找到對方。
> 若無IP位址，就像信件沒有寫地址，郵差不知要送到哪，信就永遠寄不到了！

### 兩種類型的 IP

#### 1. 內網 IP（Private IP）- 大樓內的房號
- **範圍**：`192.168.x.x`、`10.x.x.x`、`172.16.x.x - 172.31.x.x`
- **用途**：在公司或家裡內部使用
- **特性**：只能在區域網路內互相連線
- **比喻**：就像大樓裡的「3 樓 5 號房」，只有在大樓內有效

**例如**：

你的電腦 IP：192.168.1.100
公司印表機：192.168.1.10
同事電腦：192.168.1.101

#### 2. 外網 IP（Public IP）- 完整的門牌地址
- **範圍**：除了內網 IP 以外的所有 IP
- **用途**：在網際網路上使用
- **特性**：全球唯一，可以從任何地方連線
- **比喻**：就像完整地址「台北市信義區忠孝東路 100 號」，全世界都認得

**範例**：

Google：142.250.185.46
Facebook：157.240.241.35
你家或公司的對外 IP：可能是公司分配的某個 IP


關鍵：
- 外面的人只看到 203.0.115.5
- 看不到你家有多少設備
- 看不到各設備的內網 IP

### 固定 IP vs 動態 IP

| 類型 | 特性 | 適用對象 | 比喻 |
|------|------|----------|------|
| **固定 IP** | 永遠不變 | 伺服器、公司設備 | 商店的固定地址 |
| **動態 IP** | 可能會變動 | 一般使用者電腦 | 旅館的房間號碼 |

**為什麼會這樣分？**
- 伺服器需要被「找到」→ 固定 IP（不然網站網址今天能用，明天就找不到了）
- 一般電腦只需要「連出去」→ 動態 IP （反正你不需要別人主動連到你的電腦）

### IP 與 MAC 的分工與合作


- 電腦要連線到 Google：先知道目的 IP（例如 142.250.185.46）
- 查出要發送給哪個 MAC（例如路由器的 MAC，透過 ARP）
- 封包內：
- IP：192.168.1.100 → 142.250.185.46
- MAC：00:1A:2B:3C:4D:5E → 00:AA:BB:CC:DD:EE
- 封包先在區域網中用 MAC 找到路由器，再由 IP 跨網傳遞到 Google
每經過一台路由器，MAC 都會換（每跳重包），但 IP 不變

---

## Layer 7：DNS - 網路世界的電話簿

### 定義
DNS（Domain Name System）就像是**網路世界的電話簿**，負責把「人類容易記的網域名稱」轉換成「電腦看得懂的 IP 位址」。

### 為什麼需要 DNS？

想像一下要連到 Google，如果沒有DNS，你必須記住142.250.185.46的ip，要打開Facebook則要輸入157.240.241.35，非常麻煩且不易記住，不過有了 DNS 後，只要輸入：google.com，DNS 自動幫你查到：142.250.185.46！

### DNS 如何運作？

**實際流程**：

步驟 1：你在瀏覽器輸入 www.google.com

步驟 2：電腦先檢查本機的 hosts 檔案（本地電話簿）
        ↓ 沒找到

步驟 3：去問 DNS 伺服器（網路電話簿）
        「google.com 的 IP 是？」

步驟 4：DNS 伺服器回答
        「google.com 的 IP 是 142.250.185.46」

步驟 5：電腦連線到 142.250.185.46

步驟 6：成功！Google 首頁出現了

### DNS 不只是對應表

DNS 其實包含很多種記錄類型：

| 記錄類型 | 用途 | 範例 |
|---------|------|------|
| **A** | 網域 → IPv4 位址 | `example.com → 93.184.216.34` |
| **AAAA** | 網域 → IPv6 位址 | `example.com → 2606:2800:220:1:...` |
| **CNAME** | 網域別名 | `www.example.com → example.com` |
| **MX** | 郵件伺服器 | `example.com 的郵件 → mail.example.com` |
| **TXT** | 文字資訊 | 用於驗證、SPF 設定等 |

### 概念對比表

| 概念 | 比喻 | 負責什麼 | OSI 層級 | 何時需要 |
|------|------|----------|----------|----------|
| **IP** | 門牌號碼 | 識別設備位置 | Layer 3 | 永遠需要 |
| **DNS** | 電話簿 | 把網域轉成 IP | Layer 7 | 輸入網域時 |
| **MAC** | 身分證 | 識別網卡 | Layer 2 | 區域網路內 |
| **Proxy** | 代購 | 代理連線 | Layer 7 | 公司網路環境 |

p.s. Proxy 解釋詳見下一篇

## 總結

現在你已經理解了網路的基礎概念：

- **MAC 位址**：網路卡的身分證，在區域網路內使用
- **IP 位址**：網路世界的門牌號碼，分為內網和外網，有固定和動態之分
- **DNS**：把網域名稱轉成 IP 位址的電話簿，讓我們不用記數字

下一篇，我們再來繼續介紹網路模型越往上走時，網路互動不可或缺的NAT、防火牆、Proxy的角色，有興趣繼續學習的話，可以往下看 → 【前端工程師的網路基礎 2：NAT、防火牆、Proxy 完整解析】

## 參考資料
- [What is an IP Address? - Cloudflare](https://www.cloudflare.com/learning/dns/glossary/what-is-my-ip-address/)
- [LAN 與 WAN 之間有什麼區別？](https://aws.amazon.com/tw/compare/the-difference-between-lan-and-wan/)
- [How DNS Works - Cloudflare](https://www.cloudflare.com/learning/dns/what-is-dns/)
- [OSI Model Explained](https://www.cloudflare.com/learning/ddos/glossary/open-systems-interconnection-model-osi/)
- [網路七層架構（OSI 模型）您都了解了嗎？輕鬆認識 OSI 七層+ 口訣記憶法！](https://www.hiyun.com.tw/news/blog/what-is-osi-model)