網頁雲端部署-Lion教育訓練回顧

11 min readSep 13, 2020

一、前言：

最近重新更新了自己的個人網站，需要重新部署。回顧之前在前東家有幫大家上過NextJS網頁專案部署，趁這個機會來回顧及統整。如果大家對Next有興趣也可以看看Lion欣傳組大神FM大大寫的NextJS完美出擊。

此次課程投影片大家也不妨從前面review一次，相信大家會有很多收穫的。

在開始之前還是要再分享一下自己對部署這塊的心得。其實我剛進公司寫前端時，一開始對環境架設、前後端串接邏輯、部署等名詞都是一片空白。也發現很多人都滿怕自己被指派到環境設定或是需要webpack打包、部署專案等工作項目，不要害怕，只要有嘗試的心，用心學習一定可以學會的。

雖然在公司多數的人不會碰到這部分，基本上每個team只要有人會設定環境以及放到server上就可以了。但個人認為，開發專案一定要學會怎麼部署，如此一來成果才能被看見。

二、部署方式

講到部署方式，大家第一個一定聯想到一些自動化部署的服務。

自動化工具幫大家整理如下：

以上幾個是我比較熟悉的，操作上也不會太複雜。

然而我們今天要談的是更深入的，從原生專案開發完成後從development到production後放到機器上的一系列過程。我建議大家如果有時間的話可以實際去租一台機器，從原生的機器開始安裝，到部署上自己的domain上，這段過程一定會學到很多的！👍

以下我們要先來了解部署流程及概念！

三、概念

專案部署主要分為幾個部分：

雲端 Cloud Server
網域 DNS
環境部署(手動與自動的差別)
專案服務管理

概念：「部署網路服務就如同定居一樣！」

大家先記住這句話，後續為大家一一講解。

1. 選伺服器 — 選房屋規格

今天要居住在一個地方，首先要有一個空間(落腳地)，先無論裡面有沒有床、傢俱等。先找到空間最重要。此時浮現幾個問題，要選哪間建設公司(伺服器供應商)？要選透天還是公寓(Linux / windows or macOS)？三房一廳？四房兩廳？離工作地方近還遠(伺服器要在國外或國內)？這些問題，都是我們選擇住屋處必須思考的。

1–1. 伺服器廠商

此時有非常多種選擇，像是三巨頭Azure, AWS, GCP等，甚至是相對小間的Digital Ocean, Linode等。這裡我有用過Azure, AWS跟Linode，這三者如果都是啟用VM服務，個人認為差異不大，因為都是ssh進到機器後設置環境。

前面三個相對費用較高，但都有一年免費或是一定額度讓你使用。覺得都可以玩玩看。

1–2 機器的種類

挑選好建設公司後，接下來要思考要什麼規格的機器？講到這邊，基本上會想到2種系統 — linux & windows (IIS)這個時候如果不習慣操作指令的話，可能對linux會有點害怕。

這邊簡單提一下，linux是開源的，伺服器供應商不必另外付版權及相關費用，相較於windows是微軟體系，因此相對成本較高。優缺點大家可以再去google看看，但基本上如果你的用途不需要GUI, 也不需依賴微軟體系的套件的話，我會比較推薦用Linux。你也會發現，大多數的公司的遠端機器都是用linux。

提到Linux，你可能又會思考，要選哪種linux? 那這邊相信最常聽到的就是Ubuntu還有CentOS，可能還有一些公司會用Debian跟Fedora。我自己是用過Ubuntu, CentOS 跟Kali。在這幾個之間，指令大致相同，但不完全一樣，像是安裝套件。

Ubuntu
$ sudo apt install <package>
CentOS 
$ sudo yum install <package>

此外還有一點要特別注意 — “機器規格的預設值”。

這邊踩過很多坑之後，跟大家分享，CentOS的預設值與權限相對比較嚴格(像是80 port的防火牆預設是關閉的)，也因此多數公司選用linux機器都會用CentOS，再加上更新版本比起Ubuntu不會每半年就更新，CentOS相對比較適合。

因此常常你會發現，『疑？其他設定都好好的，沒有什麼錯，但為什麼畫面就出不來？明明Ubuntu可以用的』

綜觀上述，假如是對系統設定比較不熟悉的朋友們，建議先從Ubuntu開始，先有基本的概念再用CentOS，不然環境建到一半東西還沒出來就放棄了，會有點可惜。

至於Kali，主要是用於滲透測試、駭客攻防等，駭客們滿多都用linux Kali。對於資安這部分，目前我還沒有深入研究，會接觸kali單純之前電腦作業系統被朋友灌kali，有玩過一陣子。

1–3 規格

規格部分在這邊不在話下，基本上一開始都會從1核1G的ram開始(或是更小的規格)，之後不夠再慢慢增加。大家可以參考下圖(linode價目表)

2. 選網域(DNS)— 選住址

2–1 網域概念

專案放到機器上面後，如果是有代表性的網站，像是自己的個人網站，或是社群的網站、平台等，都一定會需要有網域(Domain)。就如同今天一個住處，你要有地址、門牌號碼，朋友跟郵差才找得到你呢。

當然你也可以不要自訂網域，等到放到機器上面啟動服務後，跟朋友說：我網站是172.123.xxx.ooo。這樣也可行，但就如同你跟別人說：『拍謝，我家沒有住址，但你可以找絕對位置，在23.9037° N, 121.0794° E…就能找到我家了。』但通常沒人會這麼做。

2–2 DNS 概述

DNS(Domain Name Service)，就是把我們選好的網域，透過解析指向我們的機器當中。

關於域名，我們都是選Root Domain(如圖(七)，像是chun-wei.com, jinwei.tech, jw.org等。

2–3 Domain廠商

講到這邊，要選domain該用哪間廠商？其實每間廠商設定繁瑣程度不同，也有很多廠商推出第一年只要十幾塊，但第二年開始價格可能是10倍以上，或是一次買3年有優惠價格。

Domain這部分，我自己是用google domain，.com網域每年$12USD，也有個資保護。因此我自己還滿推Google Domain的，而且設定DNS都很容易，也會自動續訂下一年的domain，以防被別人註冊、網域綁架等。只要是你習慣的domain廠商，使用介面和個資保護都妥善的話，基本上都差不多。