學習筆記 | 瀏覽器和伺服器是如何溝通的?

身為一個非本科新手工程師，對於網路知識還是有許多疑惑之處，像是我在編輯器上寫了數十行的程式碼，那它們是怎麼透過終端機的指令被運行起來，讓我可以一邊開發一邊預覽結果呢？

開發階段告一段落，我把程式碼上傳到 Github，Github 回給我一串網址，我就有了一個實際的網頁作品，這又是什麼神奇魔法？

今天就來記錄一下，本地開發預覽以及瀏覽器和伺服器是如何溝通的！

首先，我們要了解瀏覽器和伺服器是如何溝通的，簡單來說，當我們想瀏覽特定網頁時，會輸入網址並按下 enter 發送，這時瀏覽器就會發送「網路請求」給伺服器，伺服器會回傳瀏覽器需要的資料，如HTML文本、圖片...等，瀏覽器再將這些資料組合、渲染到頁面上，就是我們平常看到的「網頁」！

(( 當然網路請求和資料回傳的過程並不是這麼簡單XD，先了解個雛型，細節之後再寫其他筆記

那麼在本地端開發時，我們想即時預覽，就需要從本機模擬一個網頁伺服器，以便達到上述所說，瀏覽器和伺服器溝通、傳遞資料的狀態，剛開始學切版的時候，沒有用太多套件，使用 vs code 裡的 Live server 幫忙運行即可，後來學到框架時，則改用 npm run dev/serve 的指令來開啟虛擬網頁伺服器

npm run dev 或 npm run serve 這些指令是由打包工具幫我們編寫好的，可以從專案內的 package.json 檔案中查看，這部分又是另一個坑，一樣之後再另外寫一篇筆記～

回到網頁伺服器上，執行 npm run dev 後，我的終端機小黑框跳出了兩個可以開啟瀏覽器的連結，

➜ Local:   http://localhost:5173/

➜ Network: http://192.XXX.XX.27:5003/

第一個是 Localhost，第二個是區網 IP 位置，兩者都可以開啟瀏覽器，預覽正在開發的頁面，但連線方式有些微不同，可以從下方圖片看一下兩者差異：

Localhost 會有個特別的 IP 「127.0.0.1」，這個 IP 指的就是自己的本機，在本機輸入這個 IP 或Localhost ，就會開啟環迴機制，讓我們可以在本機端上直接運行網路服務

區網 IP 則是從本機連線到當前所在的區網，再回傳到本機上，如果 Localhost 是一直待在房間裡， 區網 IP 就是出了房門去到客廳再回到房間裡的概念，假設在公司內，也可以透過區網 IP 和其他同事的電腦進行連線～

這就是開發階段，打包工具幫我們所做的網路連線模擬服務，讓我們能夠一邊開發一邊即時預覽結果啦！

那麼上傳到 Github ，成為一個可分享給其他人瀏覽的網頁呢，就是將我寫好的程式碼上傳到 Github 提供的網頁伺服器，由這個伺服器替我保存資料，同時它會提供一段像這樣的網址：https://iamamberhh.github.io/HH-STAY/#/

其中 iamamberhh.github.io 這段就是 Github 給我 iamamberhh 這個帳號使用的域名，使用者輸入完整的網址，便會回到一開始所說的瀏覽器和伺服器溝通、傳遞資料的過程，讓所有人都可以從自己的瀏覽器向該伺服器發出請求，並查看我的網頁

當然上傳到 Github 是因為我沒有自己的網頁伺服器，在公司進行開發的話，就會上傳到公司內部的網頁伺服器來進行保存，並且得到的網址也會是公司自己的域名，我聽前輩說這個上傳的過程也可以稱為「上版」唷！

我是Amber，前端學習中，歡迎交流討論🧸