說到前端部署，可能大多數前端工程師在工作中都是使用的公司現成的部署系統，與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