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

閱讀時間約 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,前端學習中,歡迎交流討論🧸
即將進入廣告,捲動後可繼續閱讀
為什麼會看到廣告
22會員
22內容數
留言0
查看全部
發表第一個留言支持創作者!
Amber hh的沙龍 的其他內容
時間真的過得好快,從2022五月的體驗營開始,到後來的切版直播班、JS直播班,將近一年的時間,現在都要從Vue直播班畢業了!
事情是這樣發生的,由於直播班第二週和第三週的作業內容很相似,於是我就把第二週的作業資料夾「複製」了一份,作為第三週的基底,並把第三週的作業內容完成後,準備上傳到一個新建的 week3 遠端 repository ...
9 月份剛從切版直播班畢業(可以看這一篇學習紀錄),我是毫不猶豫的就參加了下一階段的 JavaScript 直播班!當然是因為不滿足於作品只能是靜態的切版頁面,還想加入更多酷酷的效果,但總是會在使用套件上卡住,對 API 的概念也不足,接資料時二二六六的,不甘於被技術受限制的自己,當然要繼續修練😤
相信大家對於 sticky 這個效果不陌生,網頁上方的導覽列、文章側邊的相關閱讀等,諸多網頁都能看見它的身影,不過這篇不是 sticky 的使用教學,而是我自己的踩雷紀錄😅💣
相信不少人在學習寫程式的過程中,光是學習知識點就已經消耗大量腦細胞,如果跟我一樣選擇自學,本身美感和創意並不充裕到可以完成一份設計稿,也不像在學校裡有一起學習的夥伴,雖然有想做side project的念頭,也會完全不曉得該如何著手吧... 那麼我是怎麼完成的呢?
自學程式的過程中,你總是把transform、transition,甚至是translate搞混嗎!為了分辨「轉變」的三個關係字,並理解到底什麼時候要用哪個屬性才正確,這篇筆記誕生了!
時間真的過得好快,從2022五月的體驗營開始,到後來的切版直播班、JS直播班,將近一年的時間,現在都要從Vue直播班畢業了!
事情是這樣發生的,由於直播班第二週和第三週的作業內容很相似,於是我就把第二週的作業資料夾「複製」了一份,作為第三週的基底,並把第三週的作業內容完成後,準備上傳到一個新建的 week3 遠端 repository ...
9 月份剛從切版直播班畢業(可以看這一篇學習紀錄),我是毫不猶豫的就參加了下一階段的 JavaScript 直播班!當然是因為不滿足於作品只能是靜態的切版頁面,還想加入更多酷酷的效果,但總是會在使用套件上卡住,對 API 的概念也不足,接資料時二二六六的,不甘於被技術受限制的自己,當然要繼續修練😤
相信大家對於 sticky 這個效果不陌生,網頁上方的導覽列、文章側邊的相關閱讀等,諸多網頁都能看見它的身影,不過這篇不是 sticky 的使用教學,而是我自己的踩雷紀錄😅💣
相信不少人在學習寫程式的過程中,光是學習知識點就已經消耗大量腦細胞,如果跟我一樣選擇自學,本身美感和創意並不充裕到可以完成一份設計稿,也不像在學校裡有一起學習的夥伴,雖然有想做side project的念頭,也會完全不曉得該如何著手吧... 那麼我是怎麼完成的呢?
自學程式的過程中,你總是把transform、transition,甚至是translate搞混嗎!為了分辨「轉變」的三個關係字,並理解到底什麼時候要用哪個屬性才正確,這篇筆記誕生了!
你可能也想看
Google News 追蹤
Thumbnail
接下來第二部分我們持續討論美國總統大選如何佈局, 以及選前一週到年底的操作策略建議 分析兩位候選人政策利多/ 利空的板塊和股票
Thumbnail
🤔為什麼團長的能力是死亡筆記本? 🤔為什麼像是死亡筆記本呢? 🤨作者巧思-讓妮翁死亡合理的幾個伏筆
Thumbnail
本篇適合: > 剛開始學習 HTML / CSS ,對基本語法有了解的人 > 想要快速建立一個一頁式網站,但對 CSS 仍無法很活用的人 初始設定與 Bootstrap 中文版網頁使用 在過去在大學期間擔任助教的過程,常常有人問「Bootstrap」是什麼?一來我也不是什麼前端工程師,我一時也不太知
Thumbnail
提升員工績效的六大步驟 系統 政策/流程 招募 人員配置 教練 訓練 以上內容來自於Bob Pike, The Pob Pike Group. 說明案例是 系統 舉例:公司員工所使用的電腦或工作系統是否過於老舊,開檔案都要等很久。 舉例:公司是否配備雙螢幕給辦公室員工,降低切換視窗對照資料的時間。
★研究證實,心像(腦中預演)能帶來超水準表現,幾乎所有領域的頂尖人物都有清晰的心像。他們過的是「逆向生活」,先創造一個未來,讓自己身在其中,接著進入心流,專心致志實現那一種未來。 ●有些運動員和參與者,會把自己人生中最完美的一天,描述為「playing in the zone─進入心流」。
Thumbnail
最近因緣際會上了些電商課程,學到了一個挺有意思的詞「弱連結」,以及在這個社群網站的世界裡,千萬不要小看它。 究竟弱連結是甚麼呢? 與高互動頻率的強連結相比,弱連結究竟是否重要呢?
Thumbnail
因為當年看書找資料的時候很希望能有這樣的大致整理文,專門針對飲食方面,列一下大概特色,這樣以後要跟人解釋分享的時候多好用啊! 主要以生酮、全植物蔬食、自然療法/自然醫學、原始點、古中醫這幾個我自己確實實驗過並且在短期或長期真正有帶來幫助的為主。
Thumbnail
我是設計方面0經驗的新人,在這堂課上獲益良多 目前在Google UX Design課程上了一陣子,已經上到第五課 (持續努力中💪🏻) 想藉由發文寫下學習筆記,讓自己在整理內容的時候再次吸收! 後續會陸續寫下所學到的內容,歡迎各位一同交流🙌🏻😊 - 做為第一篇文章 想先分享第一堂課所提及
Thumbnail
2020年9月6日,我冠上了一個新的身份,高雄市立空中大學學生的身份,朋友問我,我選修什麼科系,我回答「科技管理」。不少人感到困惑,這是什麼樣的科系,或者直覺認為這是有關資工、資管、資處方面的學系。 其實原先我也不了解,直到我開始了我第一門專業基礎必修課「科技管理」,在導師吳欣穎系主任的講解下,慢
Thumbnail
前言:大學時期因為熱衷於打桌球,取捨之下放棄參加了同時段的運動傷害防護社。但隨著在日常生活中用到肌貼協助親友解決疼痛的機會越來越高,加上自己也更想了解物理治療於運動傷害的應用,決定趁著研究所能盡量參與,多少加強自己貼紮的技術。
Thumbnail
把握弱連結,創造人脈致勝關鍵這標題商業的可以,但是聽了之後你會覺得,歐陽老師的講座既有乾貨也有雞湯,講得是人脈,卻有很多實用的做人處事智慧。
Thumbnail
用途 找到三個足弓,可用來決定以「舒適」(非矯正)為目的的墊片應該怎麼墊。也可用在高跟鞋的修飾上。 步驟 畫出足部輪廓 點出5th MTP Base與外側足弓高點 點出5th MTP head的頂點、遠點、近點 點出舟狀骨頂點與內側足弓軟組織高點 點出1st MTP head
Thumbnail
接下來第二部分我們持續討論美國總統大選如何佈局, 以及選前一週到年底的操作策略建議 分析兩位候選人政策利多/ 利空的板塊和股票
Thumbnail
🤔為什麼團長的能力是死亡筆記本? 🤔為什麼像是死亡筆記本呢? 🤨作者巧思-讓妮翁死亡合理的幾個伏筆
Thumbnail
本篇適合: > 剛開始學習 HTML / CSS ,對基本語法有了解的人 > 想要快速建立一個一頁式網站,但對 CSS 仍無法很活用的人 初始設定與 Bootstrap 中文版網頁使用 在過去在大學期間擔任助教的過程,常常有人問「Bootstrap」是什麼?一來我也不是什麼前端工程師,我一時也不太知
Thumbnail
提升員工績效的六大步驟 系統 政策/流程 招募 人員配置 教練 訓練 以上內容來自於Bob Pike, The Pob Pike Group. 說明案例是 系統 舉例:公司員工所使用的電腦或工作系統是否過於老舊,開檔案都要等很久。 舉例:公司是否配備雙螢幕給辦公室員工,降低切換視窗對照資料的時間。
★研究證實,心像(腦中預演)能帶來超水準表現,幾乎所有領域的頂尖人物都有清晰的心像。他們過的是「逆向生活」,先創造一個未來,讓自己身在其中,接著進入心流,專心致志實現那一種未來。 ●有些運動員和參與者,會把自己人生中最完美的一天,描述為「playing in the zone─進入心流」。
Thumbnail
最近因緣際會上了些電商課程,學到了一個挺有意思的詞「弱連結」,以及在這個社群網站的世界裡,千萬不要小看它。 究竟弱連結是甚麼呢? 與高互動頻率的強連結相比,弱連結究竟是否重要呢?
Thumbnail
因為當年看書找資料的時候很希望能有這樣的大致整理文,專門針對飲食方面,列一下大概特色,這樣以後要跟人解釋分享的時候多好用啊! 主要以生酮、全植物蔬食、自然療法/自然醫學、原始點、古中醫這幾個我自己確實實驗過並且在短期或長期真正有帶來幫助的為主。
Thumbnail
我是設計方面0經驗的新人,在這堂課上獲益良多 目前在Google UX Design課程上了一陣子,已經上到第五課 (持續努力中💪🏻) 想藉由發文寫下學習筆記,讓自己在整理內容的時候再次吸收! 後續會陸續寫下所學到的內容,歡迎各位一同交流🙌🏻😊 - 做為第一篇文章 想先分享第一堂課所提及
Thumbnail
2020年9月6日,我冠上了一個新的身份,高雄市立空中大學學生的身份,朋友問我,我選修什麼科系,我回答「科技管理」。不少人感到困惑,這是什麼樣的科系,或者直覺認為這是有關資工、資管、資處方面的學系。 其實原先我也不了解,直到我開始了我第一門專業基礎必修課「科技管理」,在導師吳欣穎系主任的講解下,慢
Thumbnail
前言:大學時期因為熱衷於打桌球,取捨之下放棄參加了同時段的運動傷害防護社。但隨著在日常生活中用到肌貼協助親友解決疼痛的機會越來越高,加上自己也更想了解物理治療於運動傷害的應用,決定趁著研究所能盡量參與,多少加強自己貼紮的技術。
Thumbnail
把握弱連結,創造人脈致勝關鍵這標題商業的可以,但是聽了之後你會覺得,歐陽老師的講座既有乾貨也有雞湯,講得是人脈,卻有很多實用的做人處事智慧。
Thumbnail
用途 找到三個足弓,可用來決定以「舒適」(非矯正)為目的的墊片應該怎麼墊。也可用在高跟鞋的修飾上。 步驟 畫出足部輪廓 點出5th MTP Base與外側足弓高點 點出5th MTP head的頂點、遠點、近點 點出舟狀骨頂點與內側足弓軟組織高點 點出1st MTP head