hi, 大家好, 我是徐小夕, 周末博學不打烊, 今天我們來分享點輕松且有用的知識. 作為一名前端工程師, 沒有個自己的網站怎么行, 接下來我就來帶大家介紹一下如何從零到一, 配置并部署自己的網站到服務器.

你將收獲:

• 如何合理選購一臺服務器
• 如何將域名解析到服務器上
• 服務器配套軟件的安裝和環境配置
• 通過命令行上傳自己的網站到服務器
• 網站部署和運維(負載均衡等)

接下來我們來開始fight!

1. 如何合理選購一臺服務器

對于服務器的選擇, 我們主要有以下幾種選擇:

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

國內用戶如果沒有特殊需求可以選擇前三種, 這里我以阿里云舉例, 當然其他服務器的配置都是相通的.

1.1 服務器位置的選擇

我們都知道服務器的不同配置都是有講究的, 并且一定程度上關系到我們網站的用戶體驗. 在選擇服務器地址之前, 我們需要清楚的知道自己網站的用戶群體主要集中在哪個區域:

image.png

比如我的用戶在上海, 我們在地域及可用區選項中可以選擇華東2(上海), 以此類推.

1.2 服務器鏡像的選擇

image.png

目前我們常用的服務器鏡像有:

• centos
• windows Server
• Ubuntu

根據自己的使用習慣選擇即可, 我一般習慣選擇 centos, 接下來也會以 centos 來介紹相關的配置.

1.3 服務器系統盤存儲的選擇

image.png

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

1.4 服務器帶寬選擇

一般為了給用戶一個好的網站體驗, 我們會提高帶寬來降低網站加載時間. 但是一味的提高帶寬會大大加大服務器的費用, 所以我們一方面需要在對網站自身做好優化, 另一方面也可以使用對象存儲, 這樣我們就能控制一定的帶寬了, 比如目前 H5-Dooring 的帶寬在10M左右, 一年服務器費用大概 1-2W. 但是對一些測試型, 個人網站來說, 選擇2-5M都是一個合適的范圍.

當然大家也可以選擇按流量付費.

1.5 服務器規格選擇

image.png

如果你是個人使用對吞吐性能沒有過多要求, 可以選擇1核1G低配版的, 不過建議個人網站最好選擇1核2G或者2核4G的, 說不定你的網站就突然??了呢?

至于服務器的其他配置,大家都可以隨意選擇, 也可以直接用默認的.

2. 如何將域名解析到服務器上

當我們選購好一臺服務器之后, 我們在控制臺可以看到自己服務器的公網IP. 這也是域名解析的關鍵. 域名可以在云服務平臺內直接購買, 一般一個域名在20-60￥之間, 推薦使用 .com, .cn的域名, 當前其他后綴的域名也可以, 取決于你對網站的定位.

image.png

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

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

記錄值 就是我們服務器的IP, 也就是上面提到的公網IP. 我們配置好之后點確認, 等待5-10分鐘即可解析完成, 不過一般都在3分鐘內.

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

3. 服務器配套軟件的安裝和環境配置

有了上面服務器的配置基礎, 我們開始“倒騰”服務器. 作為一名前端程序員, 服務器上沒有nodejs說不過去了吧! 接下來我們開始安裝nodejs. 在安裝之前, 我們需要先進入服務器終端:

image.png

密鑰對一般在服務器列表的右側更多下拉項里, 我們一般第一次使用需要重置密鑰對, 在設置好密鑰對之后, 我們在自己計算機的終端輸入如下命令:

ssh root@你的公網IP

之后在終端輸入完密碼之后即可進入服務器.

如果服務器沒有wget, 我建議大家可以安裝一下, 畢竟后面很多場景都會用到.

yum install wget

是不是神似我們的npm. 之后我們就可以開心的安裝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

解壓完成之后我們可以手動進入 nodejs 的 bin 目錄, 測測nodejs是否可用. 但是下載下來的nodejs的目錄名又臭又長, 怎么辦呢? 這里就要學好linux了, 我這里給大家介紹一種簡單的重命名文件/目錄名的方法:

mv node-v14.15.4-linux-x64 nodejs

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

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

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

這樣我們通過軟連接就實現在全局環境下使用nodejs.

4. 通過命令行上傳自己的網站到服務器

那么環境有了之后我們就可以直接上傳我們的網站代碼了, 因為我們選擇的是 centos 服務器, 它沒有可視化的界面來操作, 而且我的電腦是 mac的, 這可咋整呢? 不用擔心, 繼續用命令行!

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

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

其中-r是用來傳文件夾用的, 如果你要上傳的文件包含文件夾, 可以添加這個標識.

5. 網站部署和運維(負載均衡等)

網站可以用nginx代理和做負載均衡, 網上也有很多資料介紹, 這里我帶大家介紹一下pm2.

PM2 是一個守護進程管理器，它將幫助我們管理和保障應用程序穩定在線. 如果你是nodejs的忠實粉絲, 那么它將是個不錯的選擇. 作為前端工程師, 搭建全棧的網站用nodejs也是一個非常高效的選擇.

安裝

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

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

啟動應用

啟動、守護和監控應用程序的最簡單方法是使用以下命令行：

$ pm2 start app.js

或輕松啟動任何其他應用程序：

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

我們可以傳遞給 CLI 的一些選項：

# 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

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