淺談前端線上部署與運維

01-29

說到前端部署，可能大多數前端工程師在工作中都是使用的公司現成的部署系統，與SRE對接、一起完成前端的部署操作。如果我現在給你一台新註冊的雲主機，那麼你應該怎麼做才能把一個前端工程部署到一台雲主機上，成為一個可以訪問的網頁呢？今天我們就來聊聊前端的部署~

一、構成

1、硬體

首先，一個前端工程要變成一個能訪問的服務或者網頁，必須要跑在宿主機器上。我們需要尋找一個線上機器來當宿主機器，所幸國內提供雲伺服器ECS的大廠有很多，BAT、亞馬遜提供的產品本質上沒有很大的差別，我們根據自己的喜好進行選擇即可。本文中，作者使用的是阿里雲的主機，1核、2GB、1Mbps、Ubuntu 16.04 64位的機器。

2、軟體

硬體申請好了之後，我們來聊聊最少需要安裝哪些軟體就能將服務跑起來。我們需要的軟體有：nginx、nodejs、PM2、git。

nginx：作為http伺服器接受來自internet的請求，並將請求按配置規則轉發給對應的埠。

nodejs：在雲主機上提供js的運行環境

PM2：node應用的進程管理器

git：將git倉庫的代碼遠程拉取到雲主機上

二、安裝

（因為本文使用的線上機器系統是Ubuntu，故軟體安裝使用的是apt-get。若各位讀者的機器是centOS，同義替換成yum即可）

1、安裝nvm

首先安裝必要的包

sudo apt-get update

sudo apt-get install build-essential libssl-dev

然後使用wget安裝nvm

wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.31.4/install.sh | bash

2、安裝git

sudo apt-get install git

3、使用nvm安裝node

nvm install stable （安裝最新的穩定版本）或

nvm install 4.2.2 （安裝具體的版本號）

4、使用npm安裝PM2

npm install -g pm2

5、手動安裝nginx

首先安裝nginx依賴 pcre、openssl、zlib

sudo apt-get install openssl libssl-dev

sudo apt-get install libpcre3 libpcre3-dev

sudo apt-get install zlib1g-dev

然後手動安裝nginx

wget http://nginx.org/download/nginx-1.12.2.tar.gz

tar zxvf nginx-1.12.2.tar.gz

./configure --prefix=/server/runtime/nginx/1.12.2 （prefix參數是自己設置的安裝目標路徑）

make && make install

三、目錄設置

細心的讀者會感到好奇，我的nginx為什麼不用apt-get直接安裝，而是要自己動手安裝呢？

如果我使用apt-get來進行nginx安裝，會自動將軟體安裝到usr目錄下，後續版本的安裝會覆蓋之前的版本。如果我有在一台伺服器上安裝多個nginx版本的需求，如：Mainline version 和 Stable version，就需要手動安裝來對nginx的版本進行物理劃分。

我的目錄劃分為：

如圖所示，在 / (根目錄)下新建server目錄，然後在server目錄下新建app、compile、daemon和runtime四個文件夾。

1、app

app目錄下存放開發工程的代碼，通過git clone將git倉庫的代碼pull下來。當服務出現問題時，可以人工登錄雲主機，在app目錄下通過手動的方式重啟服務。

2、compile

compile目錄下存放下載的tar包以及從tar包解壓出來的文件。如果下載的軟體多了，為了便於管理，可以按軟體分文件夾存放。

3、runtime

runtime目錄是軟體安裝的目標路徑，compile目錄下的nginx安裝包通過configure指令安裝到runtime目錄下。runtime內部目錄結構如圖：

如圖所示，為了便於管理，runtime目錄下根據軟體分文件夾(nginx)，再根據版本分文件夾(1.12.2)。

4、daemon

daemon被稱為守護進程，daemon目錄下存放的是會一直運行的服務，如nginx。daemon內部目錄結構如圖：

如圖，nginx目錄下先根據版本（1.12.2）進行劃分，後根據埠（80）進行劃分。在多版本nginx、多埠並存的場景下，如果我要快速定位nginx的問題，這種劃分會給運維帶來極大的便利。需要尋找對應版本和對應埠時，只要尋找文件目錄即可。

conf文件夾的內容是從nginx安裝目錄下的conf文件夾整個複製過來的，我們自己業務需要的設置就直接修改conf文件夾內的配置文件即可。如此配置的好處在於將自己的配置與nginx預設配置分離，根本不用擔心把nginx玩壞了：）

log文件夾內存放nginx的運行日誌，以文件的方式進行存儲。

除此之外，在80文件夾下還有兩個自己寫的腳本文件：up、down。up腳本的作用是對nginx進行拉起，down腳本的作用在於將現運行的nginx kill。這裡將拉起操作和kill操作寫成腳本，便於運維人員快速、準確的對nginx進行操作。

如此進行server文件夾的目錄設置，將服務所需軟體與機器的通用軟體進行了分離，不僅便於雲主機的日常維護，同時當需要整個刪除服務的時候，直接刪除server文件夾即可簡單清除。

四、步驟

1、阿里雲機器申請好後，在機器上建立一個賬號，便於之後用ssh的方式登錄。

2、linux機器的提示符個人覺得不好用，可以選用apt-get安裝zsh和oh-my-zsh來提升shell的便利性（逼格）。

3、在 / (根目錄)下新建server目錄，在server目錄下新建app、compile、daemon、runtime四個文件夾。

4、用apt-get安裝nvm、git；用nvm安裝nodejs；用npm安裝PM2；用手動方式安裝nginx。

5、在daemon目錄下新建conf和log文件夾，log存放日誌文件，conf裡面的內容是從nginx原生複製過來的，根據業務需要修改裡面的nginx.conf文件。

6、阿里雲主機默認是不開埠的，需要自己在console控制台中開啟對應埠(80)。

7、在app文件夾下使用git clone拉代碼，並使用PM2指令啟動服務。

8、在daemon文件夾下寫nginx配置文件，並啟動nginx處理http請求。

五、代碼

1、PM2的配置文件代碼

2、up腳本代碼

3、down腳本代碼

4、nginx配置文件代碼

六、總結

限於篇幅與作者水平有限，本文粗略的講述了前端線上機器運維與部署的基礎知識。本文採用了手動部署的方式，是為了讓讀者更清楚的知道前端部署的細節。

後續還有很多優化的事情可以做，比如如果node層會訪問資料庫(MongoDB)，那麼推薦加入MemCache緩存；為了提高部署的快捷性，可以寫一個部署腳本，一次性將全部部署操作都使用腳本進行等等。

對此感興趣或自己實踐中遇到問題的觀眾老爺歡迎與我聯繫~郵箱：wangxinghang@meituan.com