如何從零開始建設一個網站 「 Vue + Node.js 開發實戰 」

語言: CN / TW / HK

theme: vuepress

WechatIMG6.jpeg


快捷跳轉

關於本課程大綱和內容介紹:前端全棧必備課程:Vue + Node.js 開發實戰:從入門到就業

下一章:Node.js 基礎與環境搭建


1. 歷史長河

如何快速開發一個符合要求的網站,是每個網站開發初學者所困惑的問題;本章將從購買一個域名開始,介紹網站建設全部流程的相關知識,包括開發工具、開發技術,以及域名的備案和解析等

本章涉及的知識點如下: - 網站建設流程 - 網站搭建所使用的技術和工具 - 網站域名和伺服器等 - 域名的備案和解析


1-1. 網站建設流程

百度百科中的網站定義如下:

網站(Website) 是指在因特網上根據一定的規則,使用HTML(標準通用標記語言)等工具製作的用於展示特定內容的相關網頁的集合;簡單來說,網站是一個溝通工具,人們可以通過網站釋出自己想要公開的資訊,或者使用網站提供的相關網路服務;人們可以通過網頁瀏覽器來訪問網站,獲取自己需要的資訊或者享受網路服務

網站一般不僅指網站程式碼和資料庫本身,而且還是對服務的統稱,即一般意義上的網站是指包括「 域名 + 程式碼 + 伺服器 + 其他解析 」等服務的一個整體,而並非單純的程式碼本身

也就是說,如果製作一個網站,在不考慮技術細節的情況下,最起碼也需要通過以下流程才能完成一個完整的網站建設:

  1. 購買一個域名
  2. 實現域名的備案和實名認證
  3. 正確地解析域名至伺服器或者其他服務
  4. 編寫一套網站程式碼
  5. 在伺服器或者應用容器中成功地執行網站程式碼
  6. 維持並且維護服務

🔔 Notice

程式碼的編寫在整個網站產品的生命週期中是最重要的環節,該環節是想法的實現和需求的更新,而技術只是服務於產品和需求的工具


1-2. 網站開發技術和工具

早期的網站只能展示單純的文字,經過十幾年的發展,影象、聲音、動畫、影片甚至3D技術都可以通過網際網路呈現;通過動態網頁技術,使用者之間可以交流了,越來越多的服務出現在了網際網路中,包括電子郵件服務、線上聊天服務等

在網際網路2.0時代,一個網站不僅僅是一個企業或服務的展示,更重要的是提供多種服務;當前的網路服務更多的是實體經濟的線上延伸,越來越多的電商、外賣商家,甚至共享業務通過網站給每位使用者提供便利

網際網路技術的發展使網站的功能愈加強大;網站誕生之初,其用處並非像如今這樣多姿多彩,更多的是論壇、新聞、聊天這樣的應用場景,而製作技術本身也被頻寬、計算機效能所限制,靜態網站的程式碼只需要一個文字文件就可以編寫

伴隨著網路技術和計算機效能的發展,越來越多的多媒體技術被運用在網頁端,此時此刻,大名鼎鼎的「 網頁三劍客 」出現在了開發者的桌面上

「 網頁三劍客 」是一套強大的網頁編輯工具,最初是由 Macromedia 公司開發出來的,由 Dreamweaver(簡稱Dw)、Fireworks(簡稱Fw)和 Flash 三個軟體組成,如下圖所示

epub_35421874_3.jpeg

在技術飛速發展的過程中,過時的技術被迅速淘汰,單純地開發簡單的靜態頁面也一步步被市場所淘汰;Adobe 公司於2005年收購了 Macromedia 公司,同時放棄開發 Fw;隨著 HTML 5 標準的出現,Flash 技術因為「 先天不足 」也逐漸被淘汰,Dw 更是在如今各種開發技術的更新面前顯得無能為力

時至今日,這3個軟體漸漸消失在網頁開發的長河之中,但它們作為一代網站開發者的標誌,卻刻印在開發者的記憶中

如今的網站開發技術相對於多年前的開發而言變得更加豐富多彩,雖然基本網頁還是基於網頁三劍客技術,但卻經過了大量的更新和版本替換,出現了非常多的新興框架和技術

如今的網站開發工具也變得異常簡單,僅僅需要一個程式碼編輯器(俗稱IDE)和一個網頁瀏覽器,即可完成一個網站的開發和測試工作;下圖總結了本節介紹的網頁內容和網站技術的發展歷程

epub_35421874_4.jpeg


2. 域名購買

域名是一個網站的重要組成部分; 一個合適的域名可以提高網站的知名度,甚至從某種程式上說,域名本身就是網站的推廣標識;本節將介紹域名的基本知識,以及如何購買一個新域名

2-1. 域名簡介

域名(Domain Name),也稱為網域,是 Internet上 某一臺計算機或計算機組的名稱,用於在資料傳輸時標識計算機的電子方位(有時也指地理位置)

上面這段解釋或許太抽象了,簡單來說,域名就是使用者在瀏覽器中輸入的「 網址 」,如圖所示的百度網站地址中,baidu.com 即為域名

image.png

通用的頂級域名一般分為以下3種:

  1. com:供商業機構使用,無限制,最常用,被大部分人所熟悉和使用
  2. net:原來供網路服務供應商使用,現在無限制
  3. org:原來供不屬於其他通用頂級域名類別的組織使用,現在無限制

其實還有一種域名,作為網站服務國家或地區頂級域名的標識,如.de(德國)、.eu(歐盟)、.jp(日本)、.uk(英國)、.us(美國)等

在一個網站服務中,域名的作用就是進行請求的指向,當用戶在瀏覽器中輸入一個域名時,瀏覽器會通過網際網路上的DNS伺服器解析到網站程式碼所在的伺服器上,這樣才算完成了一次完整的網站訪問操作

簡單來說,域名更像是網站的別名,由根伺服器進行記錄,全球範圍內的根伺服器一共有13臺;在全世界範圍內不用擔心如果根伺服器受到攻擊而導致網路中斷,因為在各個地區都擁有相應的根伺服器映象,服務於當前地區或附近區域的域名解析

可以通過簡單的命令列檢視域名轉發到真實主機中的伺服器 IP 地址;下面檢視 baidu.com 域名的真實 IP 地址;在 mac 系統中開啟「 終端 」,使用 ping 命令,可以看到其真實的 IP 地址,如下圖所示

image.png

在瀏覽器中輸入該網站的IP地址,也會跳轉至百度頁面;需要注意的是,IP 地址並不一定是存放具體網站程式碼的主機IP 地址,也可能是 CDN 或者提供負載均衡功能的伺服器 IP 地址;對於大型的服務提供商來說,僅僅一個IP地址或一臺伺服器是不能滿足業務需求的

🔔 Notice

因為某些網站關閉了主機的 ping功能或防火牆禁用了該埠,所以在命令列視窗中的測試結果並不代表伺服器當前的狀態

( 如果能ping通,則返回類似於上圖所示的資料,如果ping不通,則返回類似於Time Out的提示 )


2-2. 如何通過阿里雲購買一個域名

購買域名需要通過專門的域名服務商

國際範圍內的域名服務商中比較有名的是 godaddy、eNom 等;這類域名購買相對簡單,因為解析到國外的伺服器,不需要實名認證和備案等資料,但缺點也相當明顯,網路訪問可能出現緩慢、卡頓,甚至無法訪問的情況

國內的域名服務商中知名的是阿里巴巴和騰訊,尤其是阿里巴巴,該公司在2013年1月6日收購了原本作為中國第一域名服務商的萬網,合併成為阿里雲;作為後起之秀的騰訊雲,在這方面也做得很好

如果網站提供的服務面向的是國內使用者,推薦使用阿里或騰訊的域名和主機服務,雖然價格稍顯昂貴,手續較為煩瑣,但是訪問速度和穩定性都有不錯的保證

本節就以阿里云為例介紹如何購買域名


第一步

進入阿里雲頁面,如圖所示,單擊右上角的「 登入 」按鈕,可以直接使用支付寶或淘寶等賬戶進行登入;如果還沒有賬戶,則單擊「 免費註冊 」按鈕

image.png

第二步

登入後,選擇「 產品 」選單,然後選擇「 域名註冊 」選項,如圖所示,此時會在新頁面中開啟阿里雲旗下的域名服務商萬網

image.png

第三步

輸入想要購買的域名,因為域名在世界範圍內都是唯一的,所以並不是所有的域名都可以直接購買;如果喜歡的域名沒有被佔用,單擊「 加入清單 」按鈕,然後再單擊右側的「 立即結算 」按鈕,頁面會跳轉至結算頁面;在該頁面調整購買年限,即可像淘寶一樣使用支付寶付款,但是這一步需要選擇該域名是由企業還是個人持有,如圖所示

image.png

第四步

單擊「 立即購買 」按鈕,成功付款後即可獲取該域名的所有權,並且可以在阿里雲管理頁的域名列表中檢視該域名


3. 域名的備案和解析

為了保證網路資訊的安全,我國要求在國內架設伺服器的網站都需要實名認證和備案;所以如果只擁有一個域名,而沒有將其正確地解析到伺服器端,就不能執行相關的程式碼和服務

3-1. 域名的實名認證和備案

阿里云為了方便使用者,提供了專門用於備案的相關服務。備案主頁是阿里雲備案,通過提示步驟,便可備案相關的域名;各個地區的備案要求並不相同,所以具體地區的備案請以當地相關部門的稽核為主

如果沒有備案,則無法將域名解析到國內的雲伺服器中,也無法執行自己的網頁程式碼,此時在瀏覽器中輸入域名會進入備案提示頁面

初次備案需要的資料(當前時間的備案資料,後期可能有變動)如下:

  1. 下載稽核單,手寫簽字後上傳,如果客服稽核後沒有問題,需要列印3份稽核單快遞到阿里雲總部

  2. 申請幕布,並且要在幕布背景下拍照上傳

  3. 個人需要手持身份證正、反面進行拍照,公司域名備案各地區要求不同,一般需要營業執照掃描件及公司法人的相關認證

一般來說,域名備案需要一定的稽核時間,如果選擇阿里雲或騰訊雲這樣的一站式備案,並且在其網站購買了雲伺服器和域名,則備案時會進行資訊初審;如果稽核通過,會通知相關部門正式進入備案流程

普通備案一般在5個工作日內會有結果;負責稽核材料的客服會幫助站長們稽核並修改資料,極大地提高了備案的通過率;如果稽核通過,則會顯示該域名的備案號和網站資訊,如下圖所示

image.png


3-2. 域名相關解析

如果域名能夠成功解析到伺服器或提供其他的服務,那麼域名的解析就是其中最為重要的一步,大部分售賣域名的服務商都提供這樣的服務

最簡單的域名解析即轉發所有該域名的請求到一個伺服器上;當然,如今的解析服務提供了更多的附加功能,包括請求量統計、DNS監控,還有更多的安全性相關功能

新建一個解析時,必須確定使用者是該域名的擁有者,所以一般的解析服務都是由域名服務商提供的附加服務,可以新增的解析記錄參見表

image.png

普通網站只需要新增 A 解析即可,某些應用伺服器則需要使用 CNAME 解析,企業郵箱需要新增 NS 解析;本例的新增效果如下圖所示

image.png

🔔 Notice

網站的解析不是立刻生效的,部分解析甚至需要一個較長的時間才可以生效,請耐心等待


4. 伺服器購買

如果想要解析域名到一個 IP 地址,那麼如何獲取這個 IP 地址呢?對於網站來說,伺服器是程式碼的執行環境,也是最重要的一個硬體裝置,如果沒有伺服器,程式碼是不能獨立執行的;可以這麼說,伺服器是網站的硬體支援

4-1. 雲伺服器

阿里雲提供的伺服器有以下兩種

ECS雲伺服器

這種伺服器相當於購買了一臺計算機,其主頁位於雲伺服器ECS,提供了不同型號和效能的伺服器,如下圖所示;ECS雲伺服器沒有鍵盤或顯示器,在阿里雲的機房中是虛擬化的伺服器,但是它擁有獨立的IP和儲存,通過遠端方式進行連線,通過命令來實現操作

image.png

應用伺服器

這種伺服器不需要具體的配置,已經搭建好了完整的執行環境,但是缺乏擴充套件性

應用伺服器雖然價格便宜,也有獨立的 IP 地址,但不一定符合具體的應用環境

🔔 Notice

如果只需要簡單的 Web 服務,購買一臺雲伺服器並不是最經濟且必要的選擇,反而會增加不少運營和維護成本,所以有這種需求的使用者推薦購買應用伺服器+資料庫服務

具體的購買和付款步驟與域名購買流程一致,購買之後可以在阿里雲控制檯看到該伺服器是否啟動執行


4-2. 伺服器的後臺管理

在阿里雲上登入賬戶後,可以在管理頁面看到購買的伺服器、相關的 IP 地址和引數等

在 3-2 節的域名解析中提到過,只需要新增一條A記錄,這樣使用域名進行的訪問都會轉發到域名繫結的主機上

此時可以通過遠端桌面(Windows)或SSH(Linux)的方式連線到該伺服器,然後使用相關的軟體或命令列進行操作;此時主機並不能處理來自使用者的請求,不僅在主機上沒有相應的網站服務,而且服務商也沒有開放相應的埠,這些配置可以在安全組中檢視,如圖所示

image.png

在這組配置中,80 埠執行的是 HTTP 服務,如果希望對方訪問網站,則需要開啟該埠;443 埠是支援 HTTPS 加密的網站埠;原本開啟的 22 埠是需要遠端連線的埠(不同的雲伺服器可能預設埠不同),如果直接取消該埠,則無法通過 SSH 或遠端桌面的方式進行連線

🔔 Notice

對於某些系統的主機可能存在兩套防火牆系統,除了伺服器管理後臺的配置外,在本機上還需配置 iptables 等防火牆