淺談前端線上部署與運維

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

1、構成

一、硬件

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

二、軟件

硬件申請好了以後，咱們來聊聊最少須要安裝哪些軟件就能將服務跑起來。咱們須要的軟件有：nginx、nodejs、PM二、git。

nginx：做爲http服務器接受來自internet的請求，並將請求按配置規則轉發給對應的端口。

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

PM2：node應用的進程管理器

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

2、安裝

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

一、安裝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

二、安裝git

sudo apt-get install git

三、使用nvm安裝node

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

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

四、使用npm安裝PM2

npm install -g pm2

五、手動安裝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

3、目錄設置

細心的讀者會感到好奇，個人nginx爲何不用apt-get直接安裝，而是要本身動手安裝呢？

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

個人目錄劃分爲：

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

一、app

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

二、compile

compile目錄下存放下載的tar包以及從tar包解壓出來的文件。若是下載的軟件多了，爲了便於管理，能夠按軟件分文件夾存放。

三、runtime

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

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

四、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文件夾便可簡單清除。

4、步驟

一、阿里雲機器申請好後，在機器上創建一個帳號，便於以後用ssh的方式登陸。

二、linux機器的提示符我的以爲很差用，能夠選用apt-get安裝zsh和oh-my-zsh來提高shell的便利性（逼格）。

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

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

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

六、阿里雲主機默認是不開端口的，須要本身在console控制檯中開啓對應端口(80)。

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

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

5、代碼

一、PM2的配置文件代碼

二、up腳本代碼

三、down腳本代碼

四、nginx配置文件代碼

6、總結

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

後續還有不少優化的事情能夠作，好比若是node層會訪問數據庫(MongoDB)，那麼推薦加入MemCache緩存；爲了提升部署的快捷性，能夠寫一個部署腳本，一次性將所有部署操做都使用腳本進行等等。

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