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

一、前言:

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

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

▲NextJS + 雲端部署教育訓練課程

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

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

二、部署方式

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

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

  1. Github page
  2. HeroKu
  3. Firebase
  4. Vercel-NextJS專案(以前叫Zeit-now)

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

然而我們今天要談的是更深入的,從原生專案開發完成後從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可以用的』

▲圖(三) Linux 機器種類

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

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

1–3 規格

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

▲圖(四) Linode價目表

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

2–1 網域概念

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

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

▲圖(五) 門牌:DNS

2–2 DNS 概述

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

▲圖(六) DNS 解析

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

▲圖(七) Domain 結構

2–3 Domain廠商

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

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

▲圖(八) Domain 查詢

3. 環境部署

遠端環境部署與建置就如同把家俱放到空蕩蕩的家中,每個傢俱都有各自負責的功能,也因為有這些家俱,我們才有辦法休閒、放鬆等。遠端環境也是如此,需要特定的套件來幫我們讓專案run起來。

▲圖(九) 有了家俱的家

環境部署基本上分手動與自動。一開始沒建過環境當然還是先從手動開始,等熟悉後再開始用自動。自己的感覺是如果只是一台機器,那手動基本上與自動沒什麼區別。但如果是量多的話(10幾台機器一起),那自動化部署就會方便許多了。

Ansible

這邊主要分享ansible部署的概念,ansible是部署linux環境非常好用的工具,ansible的主要特點如下:

  1. 部署環境快速

2. 環境帶得走

3. 腳本語言

Ansible的概念主要是從host裡面設定,透過SSH遠端連線,在本地腳本中輸入遠端機器對外IP,就可以直接連進去了。接著執行腳本,就能夠在對應的機器做操作了,大家有興趣可以clone我寫好的Ansible腳本,主要用來部署網頁開發及Nginx的,或是可以到Ansible官網研究看看。

▲圖(十) Ansible 連線概念
▲圖(十一) Ansible Host
▲圖(十二) Ansible 執行功能

4. 安全性

講到這邊,基本上已經快完成了。回歸到我們找房子到居住的過程,我們已經有了屋子,也申請了門牌號碼,同時也買傢俱裝潢了。但大家有沒有想過,住屋處安全嗎?如果還有更多錢,是否還要再請一個管家。

同理,我們的網頁專案也是一樣的,不是有了機器畫面出現就好了。我們同時也要考量安全性。此時我們會用NginxPM2來管理服務。

Nginx代理伺服器,同時也能夠啟動負載平衡,分配大流量。同時也擔任保全角色,在一個社區內,來路不明的人會幫他擋在外面。如果今天是一群外人要申請近來社區,那須透過nginx登記後,開發他們進入社區。就如同某些惡意的ip,nginx會直接擋掉,甚至設立黑白名單,只有此社區通行證的人才能進入。

PM2(Production Process Manager),用於管理nodeJS相關的啟動服務。就如同今天有人要來我們家,我打電話(下指令)請管家事先開好宴客模式($yarn/npm <scriptName>)的概念。

5. 實際流程(NextJS)

回歸到今天前端部署網頁的主題,我們要將NextJS專案放到服務器上,到底需要經過哪些流程呢?

  1. 進到機器中($ssh user@ip)
  2. git clone <專案程式碼>
  3. $yarn安裝套件 => $yarn build =>(清除nodeModule => yarn install - -production) =>$pm2 start
▲圖(十三) nextJS部署流程

總結:

基於上面流程,我們可以總結一下,部署環境需要哪些工具,怎樣才能完整。大家直接用找住所更能夠理解。後續會再跟大家分享如何直接部署專案,不用那麼繁瑣的設定。

▲圖(十四) 部署流程 vs 找住所

最後結尾附上當天教育訓練朦朧的照片😄

▲圖(十五) Lion教育訓練

參考資料:

  1. NextJS 完美出擊
  2. Ansible
  3. PM2

圖片來源:

  1. 圖一:https://joespisak.com/2017/11/25/sell-empty-house/
  2. 圖二:https://www.fiverr.com/maheshchauhan18/do-lamp-setup-on-cloud-server-like-aws-gcp-linode-azure
  3. 圖三:https://bigishere.wordpress.com/2017/02/03/differance-bw-rhel-debian-linux/
  4. 圖四: https://www.ettoday.net/news/20190329/1410760.htm
  5. 圖七: https://love2dev.com/blog/domain-names/
  6. 圖十: https://www.ibm.com/cloud/blog/end-to-end-application-provisioning-with-ansible-and-terraform

Web Develop X Investor X Traveller 經濟系畢業。誤打誤撞開始從事網頁開發,熱愛分享學習知識及生活啟發。 關於我:https://chun-wei.com 聯絡信箱:jinwei@chun-wei.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store