hi, 大家好, 我是徐小夕, 周末博學(xué)不打烊, 今天我們來(lái)分享點(diǎn)輕松且有用的知識(shí). 作為一名前端工程師, 沒(méi)有個(gè)自己的網(wǎng)站怎么行, 接下來(lái)我就來(lái)帶大家介紹一下如何從零到一, 配置并部署自己的網(wǎng)站到服務(wù)器.

你將收獲:

• 如何合理選購(gòu)一臺(tái)服務(wù)器
• 如何將域名解析到服務(wù)器上
• 服務(wù)器配套軟件的安裝和環(huán)境配置
• 通過(guò)命令行上傳自己的網(wǎng)站到服務(wù)器
• 網(wǎng)站部署和運(yùn)維(負(fù)載均衡等)

接下來(lái)我們來(lái)開(kāi)始fight!

1. 如何合理選購(gòu)一臺(tái)服務(wù)器

對(duì)于服務(wù)器的選擇, 我們主要有以下幾種選擇:

• 阿里云
• 騰訊云
• 華為云
• 亞馬遜云

國(guó)內(nèi)用戶如果沒(méi)有特殊需求可以選擇前三種, 這里我以阿里云舉例, 當(dāng)然其他服務(wù)器的配置都是相通的.

1.1 服務(wù)器位置的選擇

我們都知道服務(wù)器的不同配置都是有講究的, 并且一定程度上關(guān)系到我們網(wǎng)站的用戶體驗(yàn). 在選擇服務(wù)器地址之前, 我們需要清楚的知道自己網(wǎng)站的用戶群體主要集中在哪個(gè)區(qū)域:

image.png

比如我的用戶在上海, 我們?cè)诘赜蚣翱捎脜^(qū)選項(xiàng)中可以選擇華東2(上海), 以此類推.

1.2 服務(wù)器鏡像的選擇

image.png

目前我們常用的服務(wù)器鏡像有:

• centos
• windows Server
• Ubuntu

根據(jù)自己的使用習(xí)慣選擇即可, 我一般習(xí)慣選擇 centos, 接下來(lái)也會(huì)以 centos 來(lái)介紹相關(guān)的配置.

1.3 服務(wù)器系統(tǒng)盤存儲(chǔ)的選擇

image.png

系統(tǒng)存儲(chǔ)的選擇也需要結(jié)合自身網(wǎng)站, 如果網(wǎng)站是內(nèi)容很多的資源型網(wǎng)站(圖片, 視頻等), 可以選擇稍微大一點(diǎn)的, 比如 100G 以上. 一般個(gè)人網(wǎng)站或者測(cè)試站50G足已, 畢竟一份存儲(chǔ)一份錢.

1.4 服務(wù)器帶寬選擇

一般為了給用戶一個(gè)好的網(wǎng)站體驗(yàn), 我們會(huì)提高帶寬來(lái)降低網(wǎng)站加載時(shí)間. 但是一味的提高帶寬會(huì)大大加大服務(wù)器的費(fèi)用, 所以我們一方面需要在對(duì)網(wǎng)站自身做好優(yōu)化, 另一方面也可以使用對(duì)象存儲(chǔ), 這樣我們就能控制一定的帶寬了, 比如目前 H5-Dooring 的帶寬在10M左右, 一年服務(wù)器費(fèi)用大概 1-2W. 但是對(duì)一些測(cè)試型, 個(gè)人網(wǎng)站來(lái)說(shuō), 選擇2-5M都是一個(gè)合適的范圍.

當(dāng)然大家也可以選擇按流量付費(fèi).

1.5 服務(wù)器規(guī)格選擇

image.png

如果你是個(gè)人使用對(duì)吞吐性能沒(méi)有過(guò)多要求, 可以選擇1核1G低配版的, 不過(guò)建議個(gè)人網(wǎng)站最好選擇1核2G或者2核4G的, 說(shuō)不定你的網(wǎng)站就突然??了呢?

至于服務(wù)器的其他配置,大家都可以隨意選擇, 也可以直接用默認(rèn)的.

2. 如何將域名解析到服務(wù)器上

當(dāng)我們選購(gòu)好一臺(tái)服務(wù)器之后, 我們?cè)诳刂婆_(tái)可以看到自己服務(wù)器的公網(wǎng)IP. 這也是域名解析的關(guān)鍵. 域名可以在云服務(wù)平臺(tái)內(nèi)直接購(gòu)買, 一般一個(gè)域名在20-60￥之間, 推薦使用 .com, .cn的域名, 當(dāng)前其他后綴的域名也可以, 取決于你對(duì)網(wǎng)站的定位.

image.png

我們只需要在云服務(wù)的域名管理中添加需要解析的服務(wù)器記錄即可.

上圖的主機(jī)記錄配置中常用的有 www 和 @, 我們選擇任何一個(gè)即可. (主機(jī)記錄相當(dāng)于域名的前綴)

記錄值 就是我們服務(wù)器的IP, 也就是上面提到的公網(wǎng)IP. 我們配置好之后點(diǎn)確認(rèn), 等待5-10分鐘即可解析完成, 不過(guò)一般都在3分鐘內(nèi).

通過(guò)以上方式, 我們的域名就成功解析到對(duì)應(yīng)的服務(wù)器上了, 是不是很簡(jiǎn)單? (前提是域名必須備案, 至于如何備案, 也很簡(jiǎn)單, 可以按照云廠商指引進(jìn)行操作)

3. 服務(wù)器配套軟件的安裝和環(huán)境配置

有了上面服務(wù)器的配置基礎(chǔ), 我們開(kāi)始“倒騰”服務(wù)器. 作為一名前端程序員, 服務(wù)器上沒(méi)有nodejs說(shuō)不過(guò)去了吧! 接下來(lái)我們開(kāi)始安裝nodejs. 在安裝之前, 我們需要先進(jìn)入服務(wù)器終端:

image.png

密鑰對(duì)一般在服務(wù)器列表的右側(cè)更多下拉項(xiàng)里, 我們一般第一次使用需要重置密鑰對(duì), 在設(shè)置好密鑰對(duì)之后, 我們?cè)谧约河?jì)算機(jī)的終端輸入如下命令:

ssh root@你的公網(wǎng)IP

之后在終端輸入完密碼之后即可進(jìn)入服務(wù)器.

如果服務(wù)器沒(méi)有wget, 我建議大家可以安裝一下, 畢竟后面很多場(chǎng)景都會(huì)用到.

yum install wget

是不是神似我們的npm. 之后我們就可以開(kāi)心的安裝nodejs了:

# 安裝nodejs
wget https://nodejs.org/dist/v14.15.4/node-v14.15.4-linux-x64.tar.xz
# 解壓
tar xf  node-v14.15.4-linux-x64.tar.xz

解壓完成之后我們可以手動(dòng)進(jìn)入 nodejs 的 bin 目錄, 測(cè)測(cè)nodejs是否可用. 但是下載下來(lái)的nodejs的目錄名又臭又長(zhǎng), 怎么辦呢? 這里就要學(xué)好linux了, 我這里給大家介紹一種簡(jiǎn)單的重命名文件/目錄名的方法:

mv node-v14.15.4-linux-x64 nodejs

mv是linux移動(dòng)文件的命令,當(dāng)然如果在同一個(gè)目錄下, 它也可以做重命名功能使用.

最后一步就是配置nodejs全局環(huán)境了. 這里我們也是使用 linux 的命令ln.

ln -s /...你nodejs所在的更目錄/nodejs/bin/node  /usr/local/bin/node
ln -s /...你nodejs所在的更目錄/nodejs/bin/npm   /usr/local/bin/npm

這樣我們通過(guò)軟連接就實(shí)現(xiàn)在全局環(huán)境下使用nodejs.

4. 通過(guò)命令行上傳自己的網(wǎng)站到服務(wù)器

那么環(huán)境有了之后我們就可以直接上傳我們的網(wǎng)站代碼了, 因?yàn)槲覀冞x擇的是 centos 服務(wù)器, 它沒(méi)有可視化的界面來(lái)操作, 而且我的電腦是 mac的, 這可咋整呢? 不用擔(dān)心, 繼續(xù)用命令行!

我們可以使用命令行從本地上傳文件或文件夾到服務(wù)器, 也可以從服務(wù)器下載文件到本地電腦, 這些操作無(wú)疑多虧了scp. 接下來(lái)我將演示如何從本地上傳文件夾到服務(wù)器.

scp -r 本地文件夾路徑 root@你的公網(wǎng)IP:/上傳到的服務(wù)器路徑
# 如
scp -r ./dist root@xxx.xxx.xxx:/website/

其中-r是用來(lái)傳文件夾用的, 如果你要上傳的文件包含文件夾, 可以添加這個(gè)標(biāo)識(shí).

5. 網(wǎng)站部署和運(yùn)維(負(fù)載均衡等)

網(wǎng)站可以用nginx代理和做負(fù)載均衡, 網(wǎng)上也有很多資料介紹, 這里我?guī)Т蠹医榻B一下pm2.

PM2 是一個(gè)守護(hù)進(jìn)程管理器，它將幫助我們管理和保障應(yīng)用程序穩(wěn)定在線. 如果你是nodejs的忠實(shí)粉絲, 那么它將是個(gè)不錯(cuò)的選擇. 作為前端工程師, 搭建全棧的網(wǎng)站用nodejs也是一個(gè)非常高效的選擇.

安裝

最新的 PM2 版本可以使用 NPM 或 Yarn 安裝：

$ npm install pm2@latest -g
# or
$ yarn global add pm2

啟動(dòng)應(yīng)用

啟動(dòng)、守護(hù)和監(jiān)控應(yīng)用程序的最簡(jiǎn)單方法是使用以下命令行：

$ pm2 start app.js

或輕松啟動(dòng)任何其他應(yīng)用程序：

$ pm2 start bashscript.sh
$ pm2 start python-app.py --watch
$ pm2 start binary-file -- --port 1520

我們可以傳遞給 CLI 的一些選項(xiàng)：

# Specify an app name
--name <app_name>

# Watch and Restart app when files change
--watch

# Set memory threshold for app reload
--max-memory-restart <200MB>

# Specify log file
--log <log_path>

# Pass extra arguments to the script
-- arg1 arg2 arg3

# Delay between automatic restarts
--restart-delay <delay in ms>

# Prefix logs with time
--time

# Do not auto restart app
--no-autorestart

# Specify cron for forced restart
--cron <cron_pattern>

# Attach to application log
--no-daemon

如我們所見(jiàn)，有許多選項(xiàng)可用于使用 PM2 管理我們的應(yīng)用程序。目前H5-Dooring也是采用這種方式部署的, 所以如果你有自己的網(wǎng)站, 趕緊參考這個(gè)教程部署吧~