http server 是什麼？ 記得剛進公司時主管問了我這麼一個問題，這看似非常基本的問題，當下我還真的答不出來。
「就是提供 http 服務的 server 呀！」聽到主管這麼說我才醍醐灌頂，後來也發現其實基本上**「 XXX server 就是代表提供 XXX 服務的 server 」**！個人覺得對一般非本科轉職的人，很難把 server 是什麼這件事情講清楚，希望可以透過這篇文章讓大家了解一般說 server 是什麼、 web 中常見的 server 以及 server 有什麼特性。

1. 從瀏覽器輸入網址按下 enter 發生了什麼事？

首先來複習一下從瀏覽器到 server 端發生了什麼事吧。

延伸閱讀：網站原理 (5)：網站運作原理 – 從瀏覽器到伺服器端發生了甚麼事？

1. 在瀏覽器輸入網址後按下 enter
2. 透過 DNS ( Domain Name Server ) 查詢該網域所對應到的 IP 位置
3. 瀏覽器發送 http request 到該 IP 位置的 server
4. server 回應 response 給瀏覽器，前端解析 response ， render 出畫面

不過要發送 http request 當然不是只能透過瀏覽器的網址列，還可以透過瀏覽器本身提供的 API ( fetch ) 、第三方套件 ( axios )、框架本身提供的 API ( Angular 的 HttpClient ) 等等，所以更廣泛的示意圖應該如下：

2. Web server

從上圖可以看到，負責處理 http request 的機器是 web server ，當 web server 收到瀏覽器的 http request 會回傳 response 來決定使用者可以在瀏覽器上看到什麼畫面，也就是說所謂的 web server 就是用來提供 web 服務的 server ！

2.1 Web server 的功能

記得剛轉職的我天真的以為所謂靜態網頁就不需要 server 來處理，畢竟當我寫完一個 HTML 的時候，就可以直接在瀏覽器上打開，根本不用特地用 server 來跑這個檔案呀~

然而，只要你是希望這個檔案可以被世界各地任何連上網路的人在瀏覽器上 render 出來，就一定需要 web server ，因為 web server 的功能就是：

1. 隨時監聽有沒有任何瀏覽器對自己發送 request
2. 有的話該回應什麼樣的 response

即便是靜態網頁，當有使用者對你的 server 發送 request 時還是需要回傳該 HTML 檔案，因此還是需要一個 web server 來處理「 回傳 HTML 檔案 」這件事情。

2.3 常見的 web server

目前最常見的 web server 是 Nginx (發音：Engine-X) 和古老的 Apache http server，如果想多了解 web server 的功能可以參考以下兩篇，個人認為寫得非常詳細！
[基礎觀念系列] Web Server & Nginx — (1)
[基礎觀念系列] Web Server & Nginx — (2)

3. database server

在開始接觸 database 之前，我以為 database 只是附屬在後端的某種軟體或是某種神奇的套件，但自己開始寫 SQL 之後才知道，原來 database 也是 server 的一種！

一般來說，比較完整的網頁架構如下：

也就是說除了自己寫的 backend server 之外，你還需要一個 database server 來隨時監聽 backend server 需要什麼資料，或是需要寫入、更新、刪除任何資料，而常見的 server-client 架構其實是「相對的」：
對 backend server 來說，我必須隨時監聽瀏覽器的 request ，因此瀏覽器是 client ，自己本身是 server
對 database server 來說，我必須隨時監聽 backend server 的 request ，因此 backend server 對 database 來說就變成了 client

3.1 database server 的功能：

1. 隨時監聽 backend server 的 request ，根據 backend server 的指令來對資料庫做 CRUD ( create, read update, delete )

至於為什麼不直接把 backend server 砍掉，讓瀏覽器直接對 database 發送 request ? 這是因為前端的程式碼是開放的，如果使用者可以直接對 database 發送 request ，那當使用者也可以特別修改 request ，把整個資料庫刪除之類的，如此一來會有非常大的資安問題，再加上 database server 是用 SQL 語言對資料庫做 CRUD 的操作，沒辦法處理複雜的商業邏輯 ( 驗證使用者的權限等等 ) ，因此通常還是會讓 backend server 來處理商業邏輯的部份。

而當初會以為 database 是屬於 backend 底下的一個功能是因為滿多 web application 會把 backend server 和 database server deploy 在同一台機器上 ( 跑在不同的 port ) ，因此當初才一直以為 database 不需要額外的 server 來 run 。了解 database 也是需要 database server 來 run 之後，就知道 database 也可以 deploy 在不同的機器上。

4. backend server

一般來說，所謂的 backend server 就是所謂的網頁後端的部分，通常也是提供 API 的 server，所以也可以稱作 API server。常見的 API server 有： http server, GraphQL server, gRPC server 等等。

延伸閱讀：API 是什麼 ? 最適合前端初學者的 API 概念解釋

http server 算是最基本的一種 backend server ，常見的 RESTful API 就是針對 http server 的一種 API 風格設計， Node.js 裡甚至有內建 http module ，讓你可以快速建立一個 http server。

延伸閱讀：【 Node.js 】 用 TypeScript 和 Express 建立一個 http server

GraphQL 是 facebook 開源給大家使用得一個 API 工具，算是比較新的工具，之後有機會再跟大家介紹。

gRPC 則是常用於 microservices 的一套技術，用來作為 web 的 API server 需要另外的套件來將瀏覽器的 http 1.1 protocol 轉為 http 2 protocol。

4.1 backend server 的功能

1. 負責監聽來自瀏覽器的 request ，並在 server 中定義針對不同的 request 該回應什麼樣的 response 給瀏覽器
2. 負責與 database server 溝通，針對不同的 request 來對 database 做 CRUD
3. 驗證 client ( 瀏覽器 ) 端的權限 ( ex: 使用 jwt 驗證 )

5. 結論

總結來說，通常 XXX server 就代表提供 XXX 服務的 server ，ex:

• http server: 提供 http 服務的 server
• GraphQL server: 提供 GraphQL 服務的 server
• gRPC server: 提供 gRPC 服務的 server

而一般來說，server 具備的功能：

• 隨時監聽事件 ( client 端發出的 request ) ( 因此通常 server 都必須 24 小時開機 )
• 對發出 request 的 client 端做出回應 ( response )
• 提供相對應的服務

其實以上最重要的一點個人覺得是 database 的部分，因為我是真的開始學 PostgreSQL 之後才知道這層架構的 🤣
希望以上的文章讓你對 web application 的架構有更清楚一點！

上面的架構圖可以觀察到 database 算是 web app 的末端，因此下一篇要來探討 database 的兩大分類：SQL 和 noSQL 的差別：前端工程師邁向後端之路 2 – 淺談 SQL NoSQL：database 簡介