根據上篇文章《Linux下Jenkins與GitHub自動構建NetCore與部署》，我們知道了Jenkins的強大功能，自動構建，部署了一個NetCore的Web，讓開發人員專注於開發，不用管理線上，或測試服務器的部署。那現在，互聯網公司很多采用了前后端分離的開發模式，既然服務端可以用Jenkins，那么前端是否也可以嗎？那我們就嘗試下，試着去構建一個Vue的基本項目。
1. 構建環境
對於整個linux環境是什么樣的，我就不多講了，不懂就看上一篇文章，不過這邊還是要講2點：
-
Node的安裝
附贈安裝教程鏈接，不過壓縮包要上傳到服務器，可以使用Xshell或者ftp，當然也可以wget https://nodejs.org/dist/v10.16.0/node-v10.16.0-linux-x64.tar.xz，然后再進行解壓操作，具體就看文章吧。環境 地址 Node https://www.cnblogs.com/liuqi/p/6483317.html 安裝完后，查看node版本
-
Jenkins的Node插件
對於Node項目的構建，我們需要安裝Jenkins的Node插件。-
在Jenkins的“系統管理”找到“插件管理”，再找的“NodeJs”的插件，安裝即可。
-
接着我們在“全局工具配置” ，設置我們要執行的Node版本，當然，要跟我們剛才安裝的版本一致。
-
2. Jenkins自動構建
-
定時構建
在我們完成第一個步驟后，我們就可以開始新建項目，然后設置參數，啟動構建了。-
創建任務
-
自定義工作目錄
-
設置源代碼
這邊的源代碼，我采用的是之前的一個Vue版的博客園WebApp，順便這邊也推廣下，附上博客地址：《我用Vue寫了個博客園WebApp》
-
設置構建觸發器
接下來我們為構建設置一個定時器，定時的規則，在上篇文章也講過了，這邊就不多講了，大家看上一篇文章即可，這邊設置了下，3分鍾自動構建一次。
-
設置構建環境
這邊的環境就選擇，剛才我們在“全局工具配置”中設置的Node的版本就可以了。
-
設置要執行構建的命令
執行命令當然是Node的命令了，安裝依賴包，編譯，打包。
- cd /ftpfile/node/vue/ #進入Jenkins工作空間下vue項目目錄
- node -v #檢測node版本（此條命令非必要）
- npm -v #檢測npm版本（此條命令非必要）
- npm config set registry https://registry.npm.taobao.org #把npm源設置為淘寶源（這個你懂的）
- npm config get registry #檢測npm是否切換成功（此條命令非必要）
- npm install #安裝項目中的依賴
- npm run build #打包
- cd /ftpfile/node/vue/ #進入Jenkins工作空間下vue項目目錄
-
構建
一切准備就緒，點擊構建，構建完成。你可以將打包的文件移到web網站那邊，當然，也可以在構建命令中使用命令復制。
-
-
觸發構建
對於觸發構建，我們在上篇博客也講過，對於觸發構建的條件，這邊就不在多講了，大家可以去看上篇文章。我在在這邊只需要先在GitHub先添加WebHook，然后修改構建觸發器就可以了。- 添加WebHook
- 修改構建觸發器
- 提交代碼，自動構建
- 添加WebHook
3. 項目部署
對於項目的部署，其實沒啥好講的，以前在將Vue博客園里面講過了，大家可以往前翻下文章。簡單來講就是，使用nginx進行反向代理，因為你不是已經打包了嘛，只剩下靜態頁面，與JS。當然如果你覺得自動構建生成的dist不在指定位置，那可以在構建命令中，打包完，壓縮下，然后復制到指定目錄，解壓就可以了。
所以這邊就不在多多描述了。
4. 總結一下
該篇內容較少，因為很多內容其實都在上一篇講完了，對於Node的構建，無非就是Jenkins加上Node插件，但前提是你的服務器要安裝NodeJs，對於構建步驟都是一樣的，無非就是構建命令不一樣而已,Web部署也都是Nginx，當然還可以使用supervisor進行守護進程。
最后，我們的前后端分離的自動構建與部署就這樣完成了。簡單吧，當然若是存在跨域的問題，可以內容再用nginx做跨域，或者服務端直接開CROS就可以了。那兩篇關於前后端的自動構建與線上部署就這樣完成咯。