Linux下Jenkins與GitHub自動構建Node項目(Vue)

根據上篇文章《Linux下Jenkins與GitHub自動構建NetCore與部署》，咱們知道了Jenkins的強大功能，自動構建，部署了一個NetCore的Web，讓開發人員專一於開發，不用管理線上，或測試服務器的部署。那如今，互聯網公司不少採用了先後端分離的開發模式，既然服務端能夠用Jenkins，那麼前端是否也能夠嗎？那咱們就嘗試下，試着去構建一個Vue的基本項目。

• • • • 1. 構建環境
      • 2. Jenkins自動構建
      • 3. 項目部署
      • 4. 總結一下

1. 構建環境

對於整個linux環境是什麼樣的，我就很少講了，不懂就看上一篇文章，不過這邊仍是要講2點：

• Node的安裝
  附贈安裝教程連接，不過壓縮包要上傳到服務器，可使用Xshell或者ftp，固然也能夠wget https://nodejs.org/dist/v10.16.0/node-v10.16.0-linux-x64.tar.xz，而後再進行解壓操做，具體就看文章吧。

  環境	地址
  Node	http://www.javashuo.com/article/p-wdcakljq-bk.html

  安裝完後，查看node版本
  

• Jenkins的Node插件
  對於Node項目的構建，咱們須要安裝Jenkins的Node插件。

  1. 在Jenkins的「系統管理」找到「插件管理」，再找的「NodeJs」的插件，安裝便可。
     

  2. 接着咱們在「全局工具配置」 ，設置咱們要執行的Node版本，固然，要跟咱們剛纔安裝的版本一致。
     

2. Jenkins自動構建

• 定時構建
  在咱們完成第一個步驟後，咱們就能夠開始新建項目，而後設置參數，啓動構建了。

  1. 建立任務
     

  2. 自定義工做目錄
     

  3. 設置源代碼
     這邊的源代碼，我採用的是以前的一個Vue版的博客園WebApp，順便這邊也推廣下，附上博客地址：《我用Vue寫了個博客園WebApp》

  4. 設置構建觸發器
     接下來咱們爲構建設置一個定時器，定時的規則，在上篇文章也講過了，這邊就很少講了，你們看上一篇文章便可，這邊設置了下，3分鐘自動構建一次。

  5. 設置構建環境
     這邊的環境就選擇，剛纔咱們在「全局工具配置」中設置的Node的版本就能夠了。

  6. 設置要執行構建的命令
     執行命令固然是Node的命令了，安裝依賴包，編譯，打包。
     

     1. cd /ftpfile/node/vue/ #進入Jenkins工做空間下vue項目目錄 
        

        ---

     2. node -v #檢測node版本（此條命令非必要） 
        

        ---

     3. npm -v #檢測npm版本（此條命令非必要） 
        

        ---

     4. npm config set registry https://registry.npm.taobao.org #把npm源設置爲淘寶源（這個你懂的） 
        

        ---

     5. npm config get registry #檢測npm是否切換成功（此條命令非必要） 
        

        ---

     6. npm install #安裝項目中的依賴 
        

        ---

     7. npm run build #打包 
        

        ---

  7. 構建
     一切準備就緒，點擊構建，構建完成。你能夠將打包的文件移到web網站那邊，固然，也能夠在構建命令中使用命令複製。
     
     
     
     
     

• 觸發構建
  對於觸發構建，咱們在上篇博客也講過，對於觸發構建的條件，這邊就不在多講了，你們能夠去看上篇文章。我在在這邊只須要先在GitHub先添加WebHook，而後修改構建觸發器就能夠了。

  1. 添加WebHook
     
  2. 修改構建觸發器
     
     
     
  3. 提交代碼，自動構建
     
     
     

3. 項目部署

對於項目的部署，其實沒啥好講的，之前在將Vue博客園裏面講過了，你們能夠往前翻下文章。簡單來說就是，使用nginx進行反向代理，由於你不是已經打包了嘛，只剩下靜態頁面，與JS。固然若是你以爲自動構建生成的dist不在指定位置，那能夠在構建命令中，打包完，壓縮下，而後複製到指定目錄，解壓就能夠了。
因此這邊就不在多多描述了。

4. 總結一下

該篇內容較少，由於不少內容其實都在上一篇講完了，對於Node的構建，無非就是Jenkins加上Node插件，但前提是你的服務器要安裝NodeJs，對於構建步驟都是同樣的，無非就是構建命令不同而已,Web部署也都是Nginx，固然還可使用supervisor進行守護進程。

最後，咱們的先後端分離的自動構建與部署就這樣完成了。簡單吧，固然如果存在跨域的問題，能夠內容再用nginx作跨域，或者服務端直接開CROS就能夠了。那兩篇關於先後端的自動構建與線上部署就這樣完成咯。