前端構建自動化部署

為一個前端開發人員，在我接觸伺服器之前，對於一個web項目如何最終部署到伺服器，我是沒有很深的了解的。我對此類技術的認知是隨著自身的技術成長而增長的。在最早期的時候，我所掌握的技術，就是通過ftp或者其他工具，將本地開發的文件上傳到伺服器對應的路徑覆蓋線上的文件；稍後些，通過版本管理工具（svn/git）等將本地文件同步到代碼版本管理伺服器器，然後在伺服器端手動去同步拉取代碼進來覆蓋。直到我接觸到了自動化部署這個這個概念，才了解到，這些手動同步的工作是可以通過工具來幫我們自動化實現的。在本文中，我將簡單介紹一下我通過jenkins實現簡單的前端自動化部署的過程。

講到自動化部署這個概念，必定會將到jenkins，目前來說，大部分的自動化部署都是用jenkins去實現的，所以我們先來簡單了解一下jenkins。

Jenkins簡介及安裝

Jenkins是一個獨立的開源軟體項目，是基於Java開發的一種持續集成工具，用於監控持續重複的工作，旨在提供一個開放易用的軟體平台，使軟體的持續集成變成可能。前身是Hudson是一個可擴展的持續集成引擎。可用於自動化各種任務，如構建，測試和部署軟體。Jenkins可以通過本機系統包Docker安裝，甚至可以通過安裝Java Runtime Environment的任何機器獨立運行。

以上是Jenkins官方對其介紹，我們可以知道Jenkins是基於Java的集成工具。其主要用於：

持續、自動地構建/測試軟體項目，如CruiseControl與DamageControl.

監控一些定時執行的任務。

因為我的是騰訊雲的伺服器，安裝了Centos的系統。所以接下來我們看如何安裝Jenkins：

直接通過yum進行安裝，等安裝完畢接直接啟動：

如果啟動成功可以看到：

然後就可以在瀏覽器通過8080埠訪問到Jenkins(http://yourdomain:8080):

然後在提示的位置找到登陸密碼：

登陸進去後，點左側按推薦進行插件安裝，然後就是等待安裝完畢：

Github配置

因為我們是通過github進行代碼版本控制的，所以為了跟github掛鉤，這裡我們需要先對我們的github項目進行一些配置。

首先進入Settins界面，選擇Developer settings，然後再選擇Personal Access Token頁面點擊右邊的Generate new token

點Generate按鈕後會生成一個token，進行複製。

進入界面配置Webhooks，輸入Jenkins伺服器的IP地址

進入Jenkins點擊配置添加一個Github Server

在Credentials點擊右邊的Add按鈕，選擇Secret text，並複製前面在Github生成的token到Secret中

配置完，Credentials選擇剛配置好的token，點擊Test connection來測試配置是否正確，能否正常連接github。如果連接成功，你會看到一個類似如下信息（XXXX表示你的github賬號）

新建任務

完成了前面的步驟，我們接下來在Jenkins上新建一個任務：

因為我這次要的自動化部署需求很簡單，就是通過github進行代碼版本控制，在我每次通過git進行代碼push的時候自動地同步到我的伺服器，然後替換我線上的代碼進行部署發布，所以我這邊項目的配置比較簡單：

第一步通用配置（General）：

第二步源碼管理：

第三步構建器觸發：

第四步構建環境：

第五步構建：

這裡簡單解釋一下各個步驟的注意點：

在第一步中Project url我們填寫github項目的地址，就是瀏覽器複製出來的地址；

第二步中Repository URL填寫github項目倉地址，就是在github項目中點clone or download進行複製的帶.git後綴的地址，Credentials點擊add進行添加你的github的賬號，然後在Branches to build中填寫觸發構建條件的分支，根據你的需要填寫即可，不填寫默認就是項目的master分支，源碼庫瀏覽器填寫gitweb，URL為github項目地址，跟第一步的地址一致；

第三步構建觸發器這裡，有多種方式可以選擇，從標題文字我們就可以知道，這裡主要是配置在什麼情況下觸發構建，因為我這邊是跟github項目掛鉤的，所以我們在這裡直接勾選Gihhub hook trigger for GITScm polling，因為我們前面對我們的github做了相應的配置，我們的Jenkins已經能正常連接我們的github倉庫了，所以我們這裡就是通過追蹤github的push進行構建觸發的。

第四步構建環境，主要是你要觸發你的構建的時候需要的環境配置等，這裡我們需要跟github綁定，勾選在github配置中我們添加的token即可

在構建這裡，其實Jenkins是可以對項目進行很強大的構建的，配合npm,node,webpack等，對一些需要進行編譯等構建的項目，可以在這裡直接執行構建指令。在這裡我們選取Execute shell，就是執行shell指令，進行構建。在我們的這次項目中，其實是不需要任何構建，我需要做的只是觸發了構建器的時候，在伺服器端自動同步github的代碼，所以在這裡，我的shell指令其實只是去把我伺服器端的代碼替換成構建後的代碼。

這裡其實還有一步是構建後可以配置的工作，在這裡你可以配置郵件進行構建情況的通知等工作。

簡單繞坑

完成前面的工作，我們就可以進行測試了，我們先在本地往github項目倉push代碼，我們可以在Jenkins的構建隊列里看到我們正在構建的任務，每個構建任務我們能在構建列表中看到詳細的信息，正在構建的會出現一個進度條，顯示正在構建中，構建完畢後，我們可以在構建列表中看到最後的構建結果，如果是構建成功的左邊圖標為藍色，如果是構建失敗的，左邊圖標為紅色：

點進去，可以看到這次構建的詳細信息：

這裡我遇到的一個坑就是，我的構建shell指令中有條移動文件的指令，結果構建的時候提示我沒有許可權：

一開始我一直以為是對應的路徑許可權不夠，然後我各種chown -R質量給該路徑加許可權，試了幾次，給上級也加了許可權，發現還是不行，最後才發現，原來這裡我們執行shell指令的時候調用的是我們的root用戶，而在Jenkins中默認的用戶是jenkins，所以我們需要先修改Jenkins對應的用戶為root，然後再給root用戶添加許可權才行：

修改用戶為root：

然後執行：

最後點擊保存，最終解決了該問題。

配置好這些後，我們就可以快樂地玩耍了，每次我們在dev分支往Github倉庫更新代碼的時候，Jenkins就能自動構建部署了。

當然Jenkins還有很多更強大的功能，我這裡只是簡單的實現了我目前的需求，大家感興趣的可以更多地了解一下Jenkins的其他功能！

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！