個人開發者的架站之旅:那些網站背後艱澀難懂的詞彙其實並不可怕

server_side_stack_languages
server_side_stack_languages
個人開發者如果要架設網站,到底背後還需要多少技術門檻?我不懂伺服器,也不是後端工程師,手上只有剛完成切版的 HTML 靜態檔案,接下來到底該怎麼做,才能讓全世界看到我精美的網站內容?我查了網站上的教學,但有很多難懂的名詞都讓我懼怕,要架站感覺好遠,那些到底都是些什麼妖魔鬼怪?在這篇文章內容,我會列出架站過程中經常遇到的那些艱澀難懂的技術名詞,讓你在研究架設網站前,有宏觀的概念。

上一篇大略介紹部落格網頁架站的技術名詞之後,這篇來講講網站背後究竟在搞些什麼。相較於你所看見的網頁,我們稱之為「前端(front-end)」,網頁背後的東西就可以暫時理解為「後端(back-end)」,而專門處理後端的職務,人們普遍稱之為「後端工程師(Back-end Engineer)」。

後端工程在廣義來說就是前端之外的東西,但稍有規模的公司其實會根據不同領域或功能做進一步的細部分工,例如負責管理資料庫的 DBA、維護或設計系統的 SRE、負責將開發中的軟體部署到雲端上的 DevOps、負責驗證或測試軟體的 QA 等等,諸多不及備載。新創公司常常人手不足,前端後端都一個人包下來的工程師,通常稱之為「全端工程師(Full-stack Engineer)」。以下就來介紹,我一個人在人力非常不足的情況下,部署伺服器的過程中,到底包含了哪些技術。

 

data center

 

雲端主機

對於架設網站的電腦主機,通常不會用自己的電腦來做,因為你必須確保 24 小時都能運轉不關機,不會發生突如其來的網路不通,或是臨時停電必須面臨關機的情況。雲端主機供應商,最知名的世界大廠如 Amazon 的 AWS, Google 的 GCP,或是微軟的 Azure 都有提供各式各樣不同等級及不同運算能力的主機供你租借,而更多中型的供應商則是多不勝數,常見的有 Digital Ocean Droplet, Linode, Heroku, 台灣還有智邦或中華電信等等。雖然他們提供的技術服務都不太相同,但提供的主機我們大都稱之為 VPS (Virtual Private Server)。這個網站是使用 Digital Ocean Droplet 架設的

 

作業系統

如果說 Windows 作業系統佔據了大部分的消費市場,那麽 Linux 則是「伺服器界的 Windows」可不為過。Windows 因為好用的 UI,加上生產力高強的 Office 辦公室軟體席捲全世界,但由於他是商業授權的軟體,除了使用者安裝必須購買以外,很多底層功能的設定都沒辦法輕易改變,那對於伺服器可是硬傷,因為工程師想要客製化呀!想像一般消費性市場中,使用者所在乎的是「軟體層面」的體驗問題,例如「我用 Word 可以快速完成作業」,「PowerPoint 製作簡報的方便性」,其中還包含軟體 UI 介面好不好看,或是用得順不順手;而工程師在架設網站或服務時,在乎的是更多伺服器層面的問題:

「是否能承受大量的使用者同時造訪?」

  • 下週有連假返鄉潮,台鐵能承受大家搶購火車票,系統不當機嗎?
  • Apple 的 WWDC 發表會要來了,蘋果公司要怎麼設計系統,才能讓大家開開心心的看新 iPhone 亮相直播而不卡頓?
  • 最近薩爾達傳說正熱!而對遊戲玩家來說,一能承受多少個玩家同時在線遊玩呢?

「是否有夠多的服務可以提供?」

  • 賣衣服!我們有很多好看的 T-shirts,需要有購物車功能的網站。
  • 直播帶貨!我們需要有直播功能,讓消費者直接現場看我穿。
  • 官方網站,上面要有我們公司的介紹,還會定期發佈部落格和最新消息讓大家知道。

「使用者造訪網站,回應是否夠快夠及時?」

  • 公司網站載入太久了!我等不及!
  • 每次看影片都卡!可不可以順一點?

「使用者資料夠安全嗎?」

  • 網站會不會被駭客入侵?
  • 我的個資會不會外洩?
  • 我的信用卡資訊會不會被暴露?

基於以上種種原因,你就知道伺服器在乎的點,不外乎就是需要能承載流量的「擴充性(Scalebility)」、保護個資的「安全性(Security)」、不會常常掛掉的「可靠性(Reliability)」、高度可客製化的「彈性(Flexibility)」、由於開放原始碼而成本相對較低,以及最後發生問題還找得到人問的龐大社群和討論區等等。由於軟體的介面好不好看根本不是重點,因此 Lunix 伺服器大部分都是以黑底白字的「終端機介面」存在,透過「文字指令」來操作軟體,看起來像極了電影中的駭客。

由於 Linux 開放原始碼以及高度客製化的特性,各公司都根據不同的功能和用途,紛紛推出重新包裝過的產品,常見的有 Ubuntu, CentOS, Fedora, openSUSE, Kali Linux, Arch Linux, Red Hat 等等。Linux 當初也是源自於另一個開放原始碼的作業系統 Unix,可以說是 Linux 的祖先,甚至連蘋果的作業系統 macOS 都是源自於 Unix!而我在這個網站所使用的,是 Ubuntu。下列會介紹我在這個作業系統上,到底安裝了哪些程式,造就了這個部落格網站。

 

網路伺服器

伺服器(Server),即是用來「服務(Serve)」客戶請求的機器,例如你連上 YouTube ,他就要丟「影片」或「音樂」給你;如果你在玩線上遊戲(例如天堂),那伺服器就該隨時回應玩家資料給你;如果你上 PChome 購物,伺服器就要回應網站給你,包含最新的產品圖片和文字內容。而根據不同的程式語言也有不同的軟體名稱,例如 PHP 的 Laravel、Python 的 Flask、Go 語言的 Echo 或 Gin,Java 語言的 Spring 等等。同一個語言甚至也有不同的軟體在互相競爭,依據軟體功能的多樣性,有些被稱為「函式庫」,而有些則是「框架」,例如 Python 的 Flask 和 Django。至這個網站的伺服器語言,是使用 Koa ,他是來自 JavaScript 程式語言,透過 Node.js 這個 V8 引擎運作而成的。

 

資料庫

Database 是存放資料的地方,諸如圖片、文字、影像等等,甚至是使用者的帳號密碼、名字電話都會放在這裡,可以想像是一個專門用來保存資料的伺服器。不同品牌有不同的運作原理,目前常見的有 MySQL, MongoDB, PosgreSQL, MariaDB, Redis, Oracle, MSSQL Server 等等,甚至有些還不用安裝就可以使用,透過雲端服務的型態存放於別處,例如 Firebase ,或是 Serverless 的 PlanetScale。在這個部落格網站,則是使用輕量級的檔案型態資料庫 SQLite。

 

SSH

SSH(Secure Shell Protocol) 是一個連線加密機制,工程師通常都是透過這個方式來「遠端操作」位於遠處的雲端 VPS 主機,來執行安裝軟體或設定檔案。你可以想像,你在登入 Facebook 的時候,在美麗的 UI 上面填寫帳號密碼,並按下送出後跳轉到專屬於你的動態牆上,而工程師則是在「黑底白字」的文字終端機介面上輸入帳號密碼,按下送出後跳轉到雲端主機的內部,僅此而已。一般來說使用者沒辦法透過瀏覽器來操作 SSH 登入,而是使用特別的軟體來連線,例如 Windows 上面有 PuTTY, macOS 上面有 Terminal 或是 iTerms,或是能過跨越多平台使用的 Hyper。

SSH_termimal-interface

 

Node.JS

Node.js 是一個能執行 JavaScript 的軟體環境,讓你的 JavaScript 程式碼變成後端伺服器語言,而 JS 因此就成為了不論前端或是後端都能使用的全端程式語言。

 

套件管理系統

Package Manager 是文字介面程式用來安裝軟體不可或缺的方法之一,可以想像是文字介面用的安裝工具或 App Store。使用套件管理系統安裝程式的優點太多了,例如:

  1. 可以精準選擇安裝軟體的版本號
  2. 可以透過指令自動安裝一大堆的軟體

版本號對於系統的穩定度太重要了,一個系統安裝了幾百套軟體,如果哪一天某個版本默默升級成不向下相容的版本,又不小心被你安裝進來,想必系統會炸掉,而且一套系統會順利的運作是建立在幾百套微小的套件軟體之下,除了版本號的穩定度外,安裝套件的速度也是非常重要的,也就是說,當我們將新開發的程式碼部署在一台電腦上面,絕對不會想要手動的重新安裝一遍。

套件管理系統在不同的程式語言上面有不同的名字和廠牌,彼此也有些微的差異和賣點,光 Node.js 的套件管理系統就有 bower, npm, yarn 或是最近正火的 pnpm,他們彼此安裝套件的速度都有差異,套件所佔用的電腦空間也不一樣;其他語系如 Python 有 pip, Ruby 有 gem, Rust 有 Cargo 等等;作業系統也有套件管理系統,例如 Ubuntu 有 apt, Windows 有 Chocolate, Mac 有 Homebrew 或 Macport.

 

CI 與 CD

全名為持續性整合(Continuous Integration)以及持續性部署(Continuous Deployment),是最近幾年發展出來的新型態伺服器部署方式。以前在上傳程式碼到遠端 VPS 主機,主要都是透過 FTP 的方式,也就是直接從你的電腦上傳整個資料夾的檔案,然後啟動伺服器。這個缺點是由於遠端主機是 Linux,而你本地開發的主機多半是 Windows 或 macOS,在不同環境下難保程式碼運作不會出任何差錯,因此有了 CI 和 CD 的存在。CI 的過程,就是存在於第三方的程式碼代管平台來幫你做測試,你將本地的程式碼推上這個平台,它從程式碼的套件的安裝、打包、單元測試等指令都通通幫你跑過一遍,確認都能成功通過後,最後幫你把成功安全的程式碼,推送(Deliver) 到遠端VPS主機上,而且上述的過程全都是自動化完成的。目前知名的 CI 與 CD 平台,如 Jenkins, Travis, CircleCI, Drone, 以及 GitHub 自家出品的 Github Actions。

 

PM2

PM2 是 Node.js 界非常知名的程序管理軟體,負責監督並確保 Node.js 能夠 24 小時運作不間斷。為何需要這種程式存在?因為 Node.js 在24 小時全天候執行的過程中,有可能因為使用者流量大,導致 VPS 主機所分配的記憶體不足,最終造成 Node.js 程式閃退的情形。若此情況發生,就會是主機雖然開著,但網頁沒有回應的情況。為了避免這種悲劇發生,因此伺服器程式也需要個監督者,可以想像是 Node.js 的不斷電系統。

 

NGINX

NGINX 是一種負載平衡器(Load Balancer),通常會出現在伺服器主機的出入門戶,做反向代理(Reverse Proxy)的服務。他存在的目的非常多,但初衷的反向代理,其目的是可以幫你在面對大量連線時足以承載其流量的能力。舉例來說,你可以同時啟動多個 Node.js 伺服器,當今天有10萬個訪客連線時,NGINX 負責平均分配連線數給不同的 Node.js,讓每一個伺服器所承受的壓力降低,以達到「負載平衡」的目的。負載平衡器隨著發展的功能越來越多,例如可以幫你連線加密的 SSL 技術(也就是 https)、指定主機門戶開放的服務Port(通常為 80 或 443)、蒐集連線的 Log 或資料等等。很多邏輯以前會寫在伺服器的程式裡面,現在只需要在負載平衡器調整設定檔就好,非常方便!從某方面來說也分擔了部分的工作量呢。

 

防火牆 

設定防火牆是主機資安中不可或缺的一環,其中非常有名又簡單好用的一套 UFW(Uncomplicated Firewall) 是一個對新手非常友好的防火牆程式,就如其名。UFW 用來增加伺服器安全係數的防護罩,可以限制連線規則、連線的 IP 位址等等;為了避免伺服器被駭客入侵,都非常建議安裝防火牆。

 

Fail2Ban

他是一個為伺服器安全穩定而生的「入侵檢測系統」,用來提升主機的安全係數工具。通常來說,我用它來保護伺服器被來自相同 IP 的玩家,以惡意手段來攻擊伺服器的連線模式。舉例來說,有玩家會在帳號密碼登入頁面使用暴力破解(Brutal Force Attack)的方式來猜測密碼,或是阻斷式服務(DDoS)的攻擊方式,不斷發送沒有意義的連線請求,耗盡你的記憶體或電腦效能,造成伺服器無法真正給需要的連線或使用者。此行為若被 Fail2Ban 給偵測到,就會把該玩家給屏蔽(Ban)。

 

Datadog

Datadog 是一個知名的監控系統平台,用來檢測你雲端主機的健康狀況,例如記憶體使用量、伺服器的運作狀況、網頁伺服器是否當機、VPS 的硬碟空間是否足夠等等。我會使用它的最大目的,就是當伺服器主機超過2分鐘沒有回報,就會自動寄電子郵件通知我:「你的主機已經掛點啦!還不趕快修理!」

Datadog_admin_ui

 

Sentry

Sentry 也是一個監控系統,但不同於 Datadog 的監控伺服器主機,它主要是存在於網頁內部,監控使用者網頁程式的錯誤資訊。你可以在瀏覽網頁時,打開開發者工具,並點選 console 的分頁,裡面都是網頁程式在瀏覽器中輸出的資訊;若你在瀏覽某個網站時,看見「紅字」出現在 console 裡,表示網頁程式在某處發生了錯誤。為了讓開發者知道這個錯誤發生的原因,Sentry 就會把該錯誤記錄下來,並讓開發者知道,以便下一次修正 BUG。

 

Clicky

Clicky 也是一個監控系統,只不過它是用於記錄使用者的瀏覽行為,讓公司或行銷團隊知道哪幾個網址或連結的點擊或瀏覽量是最熱門的,也可以記錄該網站每天的瀏覽人次,並以美麗的圖表來呈現。

 

網域

等待伺服器備妥之後,最後的最後,你需要一個美麗又好記的網址,總不能每次都叫使用者記錄你伺服器的 ip 對吧!此網站 https://ngin-j.io 就是我選擇的客製化網址。

客製化網址供應商非常多,這邊列出市售常見的幾間,如 GoDaddy, Namecheap 或 Gandi;而有些則是由 VPS 代管平台直接提供服務,在伺服器部署的過程中就可以選購,其給了你方便性但相對價格較高。談到價格,我建議每一家都可以輸入相同的網址去比較,就跟買機票一樣,票價有可能不同,可以多多比價囉!

Godaddy_plan

 

DNS 網域名稱伺服器

全名 domain name server 就是在網路傳遞的路途中,幫你記住 IP 位址的主機,可以想像如果你的網路請求是「信封」,網址名稱是「收件人」,IP 位址是冗長的「收件地址」,而這些 DNS 主機就是「郵局」啦!使用者只要記住美妙的網址,在瀏覽器或網頁上點擊,背後透過 DNS 翻譯成 IP 位址後,默默的把你的連線請求順利的送到伺服器,接下來美麗的網站被看見。當你在購買網域後,記得在服務網站後台設定 DNS 並把 IP 位址指向自己的雲端主機,如此一來網頁就順利登上版面囉!

 

CDN 內容傳遞網路

全名 Cloud Delivery Network,是一組在地理上分散的伺服器。想像一下你的主機在台灣,而日本的使用者和英國的使用者同時打開你的網址,誰會先看見呢?以物理的角度來說,因為日本就在台灣北方一點點的路程,飛機2個小時就到了,網路電纜的長度一定比到英國10多個小時還短非常多吧! 因為如此,CDN 就誕生了。CDN 的強項就是可以拿來加快使用者的瀏覽速度,把你的網頁內容在世界各地存了一個「備份」,如果你的內容沒有改變的話,使用者當然不需要真的造訪你的網站,直接從家裡附近的CDN主機拿就可以了,而且還快非常多,同時當你的使用者來自世界各地,CDN還可以幫你分散流量,讓你的主機壓力不會這麼大唷!有沒有很像你的網站在世界各處開分店的感覺?市面上常見的 CDN 服務商,有 Cloudflare, Akamai, CloudFront, 還有 Fastly deliver.

----

好了先這樣,這篇文章的資訊量有點多,我先暫時分享到這邊,希望內容有幫助到你。然而如果還有想了解的其他細節,歡迎透過電子郵件、推特或 IG 私信告訴我,抑或是跟我分享你的看法,我們下篇文章再見。

 

brandimage
關於作者 Jay Chung
一位熱愛新技術的鼓手。最新資訊發佈在 Twitter ,演出資訊在 Instgram ,而文章都保留在這裡。