---
# System prepended metadata

title: 網頁架構

---

# 什麼是網路
網路實際上是一堆電纜
![](https://kopu.chat/wp-content/uploads/2017/04/e58589e7ba96.jpg)

---

# 伺服器
而電纜上面又搭載著伺服器，是連接在電纜上的超級電腦
![](https://kopu.chat/wp-content/uploads/2017/04/e4bcbae69c8de599a8.jpg)
伺服器這種特殊的電腦沒有螢幕、滑鼠和鍵盤，只是為了儲存資料。而「網頁」，就是儲存在這個特殊電腦硬碟中的檔案。這些檔案可能是影片、音樂、文字等形式。它可以迅速地處理出資料或結果，透過網路將網頁輸出到你的電腦。
![](https://kopu.chat/wp-content/uploads/2017/04/reality-server.jpg)
伺服器真正的樣子。

---

### 我們的電腦如何與網路連接?
答案是 電話線!因此，出現了網際網路服務提供者
(Internet Server Provider, 簡稱ISP)
ISP公司使用電話線(撥號)或寬頻連線(DSL)
將你的電腦和網路電纜成功的連在一起
![](https://kopu.chat/wp-content/uploads/2017/04/isp_dsl.jpg)

---

### 但資訊究竟是怎麼傳遞的?
![](https://kopu.chat/wp-content/uploads/2017/04/network.jpg)

---

# IP
IP Address 網路世界的地址，是獨一無二的，要連線就需要知道 IP 位址，而這個地址只會對應一個目的地。IP 位置是由四個數字組成，範圍是0 ~ 255 像這樣：`104.21.38.195`。
ipv4? ipv6?

:::info
為什麼是0 ~ 255?
在電腦世界中最小的單元是位元(bit),其值有0與1
一個byte有 8 個 bits,因此排列組合有 2 ** 8 = 256
:::

---

# 域名

但是一坨沒有意義的數字記不起來，所以有了域名(Domain Name)，也就是我們一般常見的網址，`nkfw.dstw.dev`

`nkfw.dstw.dev` ==> `104.21.38.195`
`google.com` ==> 誰知道？？

---

# DNS
Domain Name System，網域名稱系統，也就是常看見的 DNS，負責將網域轉變成 IP 位址
![](https://static.coderbridge.com/img/krebikshaw/1863bd08b85f46aca00727df831dd498.png)
```
$nslookup www.google.com
```

---

# Tcp / Ip
1974年，一群聰明的工程師發明了「網際網路通訊協定」(Transmission Control Protocol/ Internet Protocol)，簡稱TCP/IP。
TCP/IP實際上就是一些規則，讓全世界的電腦都使用同一種語言對話，以更快速地傳送資訊。事實上，TCP/IP是一整套龐大的通訊協定，除了IP地址的規定，還涵蓋了TCP、HTTP、FTP、Telnet、POP3、DHCP…等。

---

# 前端 & 後端

---

# 前端 (front end)
我們打開網頁，所有看到的畫面，都算是前端的範疇。而一個靜態的望站只需要由
html, css,javascript
就可以完成。

---

## 後端(back end)
是網頁的後台，負責接收前端的要求並提供相對應的資料，語言有很多種，像python ruby php....

因此，網頁前端跟後端的關係，其實就像是餐廳點餐跟出餐一樣。前者接受使用者的指令並呈現網頁內容，後者則處理使用者的指令並提供內容。
![](https://kevin8656.github.io/2019/10/03/20190930-dotnetcore3beginner-3/2.png)

---

# HTTP
![](https://i.imgur.com/YGm0xXt.png)

一種網路通訊協定就是一種約定好的溝通方式
和另一台電腦請求資料(request)
另一台電腦知道後傳回來(response)
並以狀態碼(status code) 來表示操作結果。
ex. 200 代表成功 ，404 代表 ?
HTTP? HTTPS? 其實差在有沒有加密(安不安全)

```
$curl -I https://www.google.com
```

---

# web server
網路伺服器（web server）可以指軟體、也可以指硬體
---

## 硬體
從硬體（hardware）的層面來說，它指的是保存有伺服器軟體和網頁相關檔案的實體電腦，他會連上網路並能與其他連上網的設備作數據交換。

---

## 軟體
以軟體來說，web server 包含了一連串控制網路用戶如何訪問託管檔案 ── 至少有 HTTP server ── 的檔案。HTTP server r能接收http request，並回應 http reponse。

---

#### 當我們GOOGLE 搜尋時，實際上發生什麼事?
#### 流程圖
![](https://static.coderbridge.com/img/krebikshaw/f4a70d1e8f494075a9c5ec557350f00c.png)

---

1. 瀏覽器發送 request 給 DNS server，查詢 google.com 的 IP 地址。
2. DNS server 回覆，提供 IP 地址 172.217.27.142。
3. 瀏覽器直接向 IP 地址 172.217.27.142 發送 request。
4. web server 收到 request，查詢資料庫，回傳 response。(html css javascript)
5. 瀏覽器解析並顯示 response 內容。