[前端連載] 前端工程師該懂的基本東西——網路架構篇

簡介

先大概介紹一下我的前端經歷吧。第一次接觸前端是codecademy上的課程，學到現在大約學了半年的時間。雖不能稱的上很厲害的前端工程師，但也大概懂前端工程的基本脈絡。看到身邊有很多人打算跳前端這個坑，卻不知如何下手，因此打算寫一些文章，看能不能得到一些回響。

我一直都很喜歡讀歷史故事，又很喜歡一個網路作家金老ㄕ的連載——金老ㄕ的教學日誌。他的筆調饒富趣味，讀起來又很輕鬆，不會拖沓。因此且讓我這個作文很爛的人，來模仿一下他的筆法。

開始囉！

先懂一點網路架構吧！

什麼，你要告訴我網路的架構是什麼？開什麼玩笑，我不是一個前端工程師或設計師嗎？為什麼要跟我講網路架構？快點告訴我前端工程在幹麻！

蛤，可不可以直接進前端那個東西飛來飛去，還有潮到爆表的動畫播送，我覺得這個好複雜好無聊喔？

別急別急，讓我一步一步慢慢說。做一個網頁，其實就很像在造一部車（什麼？我看過的每一本書都告訴我「XXX就像在造一部車」）。我們造車的時候，第一步絕對不是先給車子上色，對吧？即便我們只是一個卑微的上色師傅（前端工程師），我們還是要知道哪個是車門，哪個是引擎，上起色來才不會胡來對吧？所以，我們應該先學的是車子的內部零件到底有哪些。

泡好咖啡了嗎？接著告訴你www三兄弟是什麼？

www代表的是World Wide Web，從字面上應該可以看出它有很多的w，大概是小時候失散的兄弟之類的。喔不是啦，他的意思是說我們所謂的網路是由世界這麼廣大的網路結構所構成的。至於我們平常所說的上網，其實是這個網路的結構的其中一個協定（protocol），叫http（Hypertext Transfer Protocol），主要的範疇是我們瀏覽器上看到的這些網頁。

除了這個以外，也有其它的協定，譬如smtp（管email的），ftp（管檔案傳輸的）等。但我們網頁工程師主要focus的是在http這個協定上。記住http這個傢伙，他會在往後一直出現。

喝口咖啡，接著是網路門牌——網址 (URL)

網址，就是各個網站的地址，當你想方設法連到一個網頁的時候，就要拿著網址一個一個去問。

不好意思，那個阿三住哪？
喔，他啊住在前面路口左轉。

不好意思，聽說阿三住這裡，是真的嗎？
喔喔，他搬走啦。去年就搬走啦，聽說欠人100萬，不知道溜去哪裡了。

大概懂了嗎？

咦？那網站會不會搬家，或找不到呢？

當然會囉，如果你連到一個網站，上面寫的不是一個「頂讓」，而是3個大大的數字「404」，就是代表這個網站不見啦。如果這家人再更貼心一點，在門牌上寫了個「我家在XXX」，那就代表他們搬家了（遷站）。不同的數字，都有不同的意義，有興趣了解的話，可以查詢「http status code」，以下列了一些常見的http status code。

1. 200: OK，代表請求成功，伺服器回應你了
2. 304：代表你之前來過這個網頁囉，直接從瀏覽器的快取（你可以把它想像成是網頁暫存在瀏覽器的歷史畫面）取得網頁資料。
3. 401：需要驗證，請給我你的帳號密碼！
4. 500：伺服器內部發生錯誤，就不是你這個訪客所能掌握的囉！

好，我現在懂了，只是「瀏覽器」到底是怎麼「找」到我們想要的「網頁」的？

觀察一下這個問句，會發現有幾個重要的名詞，我都已經用雙引號括起來了，貼心吧！

1.瀏覽器（browser）：
這個東西就是問你阿嬤，你阿嬤也會說聽過的IE、Google Chrome、Firefox。如果你阿嬤再新潮一點，他可能還會聽過Opera、Safari這兩個瀏覽器。瀏覽器的主要功能就是「呈現」網頁。呈現什麼網頁？當然是你透過「網址」去「找」到的網頁。

2.找：
那瀏覽器是去問誰然後問到你家在哪裡的？這就要歸功於DNS伺服器(domain name server)和路由器（router）了。網路世界雖然很新潮，但每家都會有一個上古時代的黃頁電話簿（DNS server）。拿著網址，去問他，他就會告訴你，那個「眾裡尋他千百度」的家在哪裡。router比較像是路邊站著的警察，走到一個路口，你就會遇到不同的警察，然後就問他什麼路要怎麼去。此外，DNS還有一個強大的地方，就是你告訴他url，他會回你ip位址。

3.網頁（webpage）：
太棒了，終於說到網頁了。網頁就是前端工程師發揮的天下了，我們寫的程式，主要都是放在這個稱為「網頁」的東東上。前端工程師最常寫的三種code，叫做「html、css、javascript」，他們不太像路口賣的丸子三兄弟那麼的相似，倒比較像合開一間小公司的三個人。「網頁」就是他們的公司，只要一個人疏忽，整間公司就GG了。記住他們三個傢伙，他們在未來的路上會是你的貴人。

嗯嗯我大概了解了，只是DNS和router的地方，你講太快了，可以再說清楚一點嗎？什麼是domain name，什麼是url，什麼是ip？

喔喔，這是我的失誤，讓我把這個部分給補清楚。

什麼是ip？我先問你，你知道（北緯24.7859195度，東經120.9945463度）在哪裡嗎？這個就是ip位址。那如果我告訴你這個地方的門牌地址叫做「新竹市東區大學路1001號」，在地人可能有辦法理解，他叫做交通大學，這就是domain name。那如果我想要把信寄到交通大學的工程四館，那就要在信上寫「新竹市東區大學路1001號工程四館」，這個就是url。

url 和 domain name乍看之下可能會很接近，但是仔細想想就會發現他們不太一樣。一個domain name底下可以有很多的url，每個網頁都是一個，但是domain name就只有一個。就像交通大學有工程四館、工程三館，而工程四館裡面還有一間電機資訊學士班系辦，層層包容。

ip的格式都是xxx.xxx.xxx.xxx的形式（xxx為0~255的數字，這是ipv4的格式)。此外，因為ipv4的ip已經被發完了，現在也推出較新的ipv6，格式為x:x:x:x:x:x:x:x（x皆為0000~ffff）。順便告訴你，我所就讀的交通大學的ip都是140.113.xxx.xxx的形式。

好等等，那我可不可以知道我家的經緯度座標，也就是我的ip address是多少？

在windows上的command line（命令提示字元）你可以輸入ipconfig，linux上可輸入ifconfig，就看得到了。此外，在網路的世界裡，每個網站都還領有一個特別的經緯度叫localhost，也可以叫127.0.0.1（這也太不科學），這些都可以叫做自己家。也就是說你在網址列輸入localhost或127.0.0.1的時候，你就會連到自己的伺服器。

還有，差點忘了告訴你一個很重要的東西叫做port，有了這個東西，才可以找到你要的人。一般來說，透過http這個protocol來接網頁，都是用到80這個port，而他的弟弟（會這麼說是因為他比較晚出生）https則是443。port有點像一個房子裡住的人的令牌。到了一個住家，你可以說，「不好意思，可以請port 80的人(http)接待我嗎？」，那他就會用國際規定的方式接待你，要你遞給他一個request，然後他會給你一個response。為什麼說是國際規定的方式？因為這些不同的protocol在進行溝通的時候，全部都是依照網際網路工程任務小組（IETF）所發佈的RFC（Request For Comments，可以想像它是一個標準）進行。

指定port的方式是ip-number:port-number。一般來說都不用指定，因為預設就是port 80。

順帶一提，https是比他哥哥http更優秀的協定，多出來的s代表security，也就是他比http的明文傳送，更具有保密性。

Request & Response

來囉。簡單來說，request 就是你去拜訪一個人時，身上帶著的信，上面寫著你想要給他什麼，你可能需要些什麼，response就是對方在看完你的request後給你的回覆信。當然，這個過程可能會發生底下這種情況。

你好，這是我的request。
………
你好，這是我的request。
………
你好，這是我的request。
………

恭喜你，你被發無聲卡啦，而且還是最無聲的那種。這時你的瀏覽器大概會有個圈圈一直轉，然後最後跳出一個error，說時間timeout了。那這種情形有可能是server的程式沒有寫好，沒有回覆你一些該回覆的東西。當然也有可能會回傳不同的http status code，那根據不同的status code，你可以知道發了什麼事。

在網路的世界裡，拜訪和回覆都是非常制式化的，也就是說request和response該怎麼寫，都是有規定好的。不過不用擔心這些繁文縟節該怎麼寫，因為會有程式庫（library）幫你把它搞定。

說的我都糊塗了，所以關於request和response，我們到底該寫些什麼？

啊，你的咖啡喝完了，讓我為你斟一杯後，再細細講下去吧！

剛剛已經先給了一個概念，網路世界的交流是非常制式化的。所以拜訪人家網頁的方式，也只能照規定的走。

方式？好奇怪喔？所以我可以用飛鴿傳書的方式跟你拿資料嗎？
不行！
我可以去你家跪個三天三夜，然後拿到資料嗎？
不用這麼麻煩！
那我到底該怎麼辦？
跟我拿資料或拿資料給我都請用GET，如果是更保密的資料請用POST。

這邊所說的get和post，就是指拜訪人家，跟人家拿資料或給資料的方式（method）。這兩個方法是最一般的方式，當然還有其它諸如put、delete……，但是沒那麼常用到。當我們的browser連到一個網站去的時候，其實就是用get的方法去取得網頁內容。get方法除了拿到網頁內容之外，也可以傳資料過去，瀏覽器就會根據傳的資料，回覆相對應的內容。這些參數，你可以在網址列上面看到。

而post比較特別，他一般是用來做表單（form）傳送資料用的，像是帳號密碼、基本資料等。也因為他傳的資料不會在網址列上顯示，所以比起get，具有較高的保密性。

看圖說故事囉

講了這麼多，該把上面的東西都給用圖解釋一下了。先上個程式碼，別那麼緊張嘛，take it easy.

1 2 3

router.get('/test',function(request,response){       response.send('你好 ' request.query.num); });

上面的程式碼，是我在server寫的，用的是nodejs expressjs。nodejs expressjs是一種後端的框架（framework），用的語言是javascript。什麼是後端，什麼是框架，下一篇會再提到。不過從程式碼裡面，你可以看到有get，有request、有response。這個頁面的url用的是localhost下的test目錄，我們的server取出request的num參數，加個「你好」的字串，由response送回去給browser。

比較特別的是，我們在頁面上看到的是undefined，這是因為我們沒有傳任何的參數去給server，所以server拿不到任何的num，理所當然是回傳undefined囉！

加個parameter，他理所當然就出現我們想要的東西了。

小結

以上是我認為一個前端工程師，甚至所有學網路的人，所該具備的最基本的概念，把它用輕鬆的筆調寫下來。

好吧，那這次先寫到這裡，下一篇來寫前後端的差別，然後再著重前端到底是什麼（如果有下一篇的話啦XD）。

等等，你也太不負責任了吧，我褲子都脫一半了，你才給我寫到這裡！