前端: 從零到一- 輕鬆把自己的網站部署到服務器

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

你將收穫:

接下來我們來開始 fight!

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

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

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

1.1 服務器位置的選擇

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

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

1.2 服務器鏡像的選擇

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

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

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

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

1.4 服務器帶寬選擇

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

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

1.5 服務器規格選擇

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

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

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

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

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

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

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

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

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

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

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

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 也是採用這種方式部署的, 所以如果你有自己的網站, 趕緊參考這個教程部署吧~

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/MDGXt31qXqQOv87MozLhWw

猜你喜歡