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

閱讀時間約 3 分鐘
身為一個非本科新手工程師,對於網路知識還是有許多疑惑之處,像是我在編輯器上寫了數十行的程式碼,那它們是怎麼透過終端機的指令被運行起來,讓我可以一邊開發一邊預覽結果呢?
開發階段告一段落,我把程式碼上傳到 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,前端學習中,歡迎交流討論🧸
為什麼會看到廣告
20會員
19內容數
留言0
查看全部
發表第一個留言支持創作者!