Jenkins+Nginx+Github/Gitlab自動化構建部署前端項目

在平常開發中，每每可能同時多個項目並行進行開發，功能完成開發，進行代碼打包、發佈的時候，可能會出現一些問題。如一個基於vue框架的前端項目，部署的環境有測試環境、線上環境，手動打包發佈。因爲操做失誤可能致使發佈到測試環境的代碼發佈到正式環境。因此，一套自動化打包、部署方案對於前端工程師來講，是頗有必要的。不只可以解決發佈操做問題，還能更專一於業務需求的開發。通常這樣的事兒是由公司運維去進行的，但對於一些中小型公司來講，想實現這樣的一套方案仍是得程序員本身動手。就當着本身能力的一種提高，也是不錯的。

Jenkins介紹

Jenkins是開源CI&CD軟件領導者， 提供超過1000個插件來支持構建、部署、自動化， 知足任何項目的須要。同時是基於Java開發的一種持續集成工具，用於監控持續重複的工做，旨在提供一個開放易用的軟件平臺，使軟件的持續集成變成可能。主要特色以下：

• 持續集成和持續交付:做爲一個可擴展的自動化服務器，Jenkins能夠用做簡單的CI服務器，或者變成任何項目的連續交付中心。
• 簡易安裝:Jenkins是一個獨立的基於Java的程序，能夠當即運行，包含Windows，Mac OS X和其餘類Unix操做系統。
• 配置簡單:Jenkins能夠經過其網頁界面輕鬆設置和配置，其中包括即時錯誤檢查和內置幫助。
• 插件:經過更新中心中的1000多個插件，Jenkins集成了持續集成和持續交付工具鏈中幾乎全部的工具。
• 擴展:Jenkins 能夠經過其插件架構進行擴展，從而爲 Jenkins 能夠作的事提供幾乎無限的可能性。
• 分佈式:Jenkins能夠輕鬆地在多臺機器上分配工做，幫助更快速地跨多個平臺推進構建，測試和部署。

啊，多麼牛逼一款工具，是否是有種躍躍欲試的感受，接下來開始真正的實現部署的環節。

Jenkins安裝

我我的使用的服務器是unbuntu 14.04的，因此基於此，來進行jenkins的安裝、java的安裝等等。jenkins是基於java的程序，因此咱們首先要作的就是進行java的安裝。本案例中安裝的是java-1.8。由jenkins版本所決定。

Java的安裝

1. 加入源路徑：

   sudo add-apt-repository ppa:openjdk-r/ppa

2. 更新源信息：

   sudo apt-get update

3. 安裝java-1.8:

   sudo apt-get install openjdk-8-jdk

4.切換Java版本(若以前已安裝其餘版本):

sudo update-alternatives --config java
    sudo update-alternatives --config javac

最後輸入java或javac，如出現如下內容，則安裝成功。

既然jenkins所需的環境已安裝好，那麼如今就開始進行jenkins的安裝了.

Jenkins的安裝

wget -q -O - http://pkg.jenkins-ci.org/debian/jenkins-ci.org.key | sudo apt-key add -

sudo sh -c 'echo deb http://pkg.jenkins-ci.org/debian binary/ > /etc/apt/sources.list.d/jenkins.list'

sudo apt-get update -y

sudo apt-get install jenkins -y

注意：最後兩步速度很是慢，主要是下載。

安裝完成後，有兩個目錄是咱們須要注意的。安裝目錄：/var/lib/jenkins,日誌目錄：/var/log/jenkins/jenkins.log.

能夠經過如下命令來啓動、中止jenkins：

sudo /etc/init.d/jenkins start
sudo /etc/init.d/jenkins stop

接下來就能夠在瀏覽器中輸入：http://外網ip/8080如http://192.168.1.100:8080/就能夠訪問了。首次出現的網頁內容以下：

jenkins默認端口號是8080。若想要修改默認端口號也是能夠的，因爲我本身的服務器上跑有其餘項目，佔用了8080端口，因此我將jenkins的端口改成8787。那簡單說下怎樣去修改jenkins的端口。

修改Jenkins默認端口

分三步驟走：

1. 將腳本/etc/init.d/jenkins中全部8080的地方改成8787
2. 修改/etc/default/jenkins文件，將端口8080改爲8082

3. 而後從新啓動jenkins, 檢查一下：

   ps -def | grep java
      
       /usr/bin/java -Djava.awt.headless=true -jar /usr/share/jenkins/jenkins.war --webroot=/var/cache/jenkins/war --httpPort=8787

可查看到已成功修改了端口號，而後再次經過ip/端口號的方式在瀏覽器中進行訪問。

Jenkins環境初始化

以前說過，瀏覽器輸入你的服務器 ip 地址加8787 端口就能夠訪問了。

輸入 cat /var/lib/jenkins/secrets/initialAdminPassword 查看初始密碼，並複製到當前輸入框中，而後點擊繼續

這裏咱們選擇推薦通用插件安裝便可，選擇後等待完成插件安裝以及初始化帳戶。

![正在安裝推薦的插件[7]

這裏安裝的時間有時候會稍微有點久，耐心等待安裝完成就好，最後建立一個帳號。

，最後登陸進去後就能夠看到左側邊欄一些操做菜單了。

Jenkins經常使用插件安裝

NodeJs插件安裝

由於咱們的項目是要用到node打包的，因此先在jenkins中安裝nodeJs插件，安裝後進入全局工具配置，配置一個咱們要用到的node版本。

安裝完成後，點擊應用並保存。

Publish Over SSH 插件安裝

該插件能夠幫助咱們實現服務器部署功能。選擇系統管理->插件管理，在已安裝插件中找Publish Over SSH，若未找到，則在可選插件列表中找到並進行安裝

Generic Webhook Trigger Plugin插件安裝

該插件能夠幫助咱們進行動態關聯遠程倉庫，便於在進行某些git操做，如提交等自動構建項目，安裝步驟如上。

Email Extension Plugin插件安裝

該插件可讓咱們對於郵箱進行配置，例如構建項目後，通知相關人員，構建是否成功等，安裝步驟如上。

Jenkins構建github項目

從左側菜單欄選擇新建任務。填寫任務名稱，選擇構建一個自由風格的軟件，並點擊肯定。

在General面板出勾選GitHub 項目，並填寫Github URL。

在源碼管理面板，進行以下配置：

在構建環境面板選擇"Provide Node & npm bin/ folder to PATH"，並選擇已安裝了的nodjs版本。

最後在"構建"面板中，選擇shell執行。

並編寫shell腳本。

#!/bin/bash
    node -v &&
    npm install -g cnpm --registry https://registry.npm.taobao.org && 
    cnpm install &&
    npm run build

最後點擊應用、保存。
點擊當即構建：

由於這個項目是一個react項目，因此打包完後的目錄的build，至此，成功構建github項目。那麼接下來就要去作構建代碼併發布到遠程服務器的操做了。

Jenkins自動化構建併發布到遠程服務器

首先須要對Publish over SSH進行全局配置，目的是使得咱們經過ssh可以訪問遠程服務器。

Publish over SSH進行全局配置。

系統管理->系統設置，找到Publish over SSH。

這裏須要注意服務器端安裝了ssh服務，若是忘記了公鑰與私有生成過程當中是否輸入了密碼，則能夠從新經過以下命令去生成：

ssh-keygen -t rsa

Passphrase：密碼（key的密碼，沒設置就是空）

Path to key：key文件（私鑰）的路徑

Key：將私鑰複製到這個框中(可經過cat id_rsa查看，複製。path to key和key寫一個便可，若是在ssh server配置的時候勾選了Use password authentication, or use a different key，則兩個均可以不填)

SSH Servers的配置：

SSH Server Name：標識的名字（隨便你取什麼）
Hostname：須要鏈接ssh的主機名或ip地址（建議ip）
Username：用戶名
Remote Directory：遠程目錄（我這裏選擇了根目錄）

高級配置：

Use password authentication, or use a different key：勾選這個可使用密碼登陸，不想配ssh的能夠用這個先試試

Passphrase / Password：密碼登陸模式的密碼
Port：端口（默認22）
Timeout (ms)：超時時間（毫秒）默認300000

因爲我在嘗試的過程當中，最初出現了jenkins.plugins.publish_over.BapPublisherException: Failed to connect session for config [131]. Message [Auth fail],這樣的錯誤，經過查找資料，https://blog.csdn.net/u010947...解決此問題。最終的配置以下：

最後點擊測試配置，成功。

並點擊應用，保存

其次須要對郵箱進行配置，接着往下看。

全局配置郵箱

在咱們對項目進行構建成功或失敗後，須要及時知道這一結果，因此進行郵箱的配置是必不可少的。

系統管理→系統設置，進行郵件配置：

• 設置jenkins地址和管理員郵箱地址

• 設置發件人等信息

  PS：這裏的發件人郵箱地址切記要和系統管理員郵件地址保持一致（固然，也能夠設置專門的發件人郵箱，不過不影響使用，根據具體狀況設置便可）

• 配置郵件內容模版

模板內容以下:

<!DOCTYPE html>    
    <html>    
    <head>    
    <meta charset="UTF-8">    
    <title>${ENV, var="JOB_NAME"}-第${BUILD_NUMBER}次構建日誌</title>    
    </head>    
        
    <body leftmargin="8" marginwidth="0" topmargin="8" marginheight="4"    
        offset="0">    
        <table width="95%" cellpadding="0" cellspacing="0"  style="font-size: 11pt; font-family: Tahoma, Arial, Helvetica, sans-serif">    
            <tr>    
                本郵件由系統自動發出，無需回覆！<br/>            
                各位同事，你們好，如下爲${PROJECT_NAME }項目構建信息</br> 
                <td><font color="#CC0000">構建結果 - ${BUILD_STATUS}</font></td>   
            </tr>    
            <tr>    
                <td><br />    
                <b><font color="#0B610B">構建信息</font></b>    
                <hr size="2" width="100%" align="center" /></td>    
            </tr>    
            <tr>    
                <td>    
                    <ul>    
                        <li>項目名稱 ： ${PROJECT_NAME}</li>    
                        <li>構建編號 ： 第${BUILD_NUMBER}次構建</li>    
                        <li>觸發緣由： ${CAUSE}</li>    
                        <li>構建狀態： ${BUILD_STATUS}</li>    
                        <li>構建日誌： <a href="${BUILD_URL}console">${BUILD_URL}console</a></li>    
                        <li>構建  Url ： <a href="${BUILD_URL}">${BUILD_URL}</a></li>    
                        <li>工做目錄 ： <a href="${PROJECT_URL}ws">${PROJECT_URL}ws</a></li>    
                        <li>項目  Url ： <a href="${PROJECT_URL}">${PROJECT_URL}</a></li>    
                    </ul>    
    
    <h4><font color="#0B610B">失敗用例</font></h4>
    <hr size="2" width="100%" />
    $FAILED_TESTS<br/>
    
    <h4><font color="#0B610B">最近提交(#$SVN_REVISION)</font></h4>
    <hr size="2" width="100%" />
    <ul>
    ${CHANGES_SINCE_LAST_SUCCESS, reverse=true, format="%c", changesFormat="<li>%d [%a] %m</li>"}
    </ul>
    詳細提交: <a href="${PROJECT_URL}changes">${PROJECT_URL}changes</a><br/>
    
                </td>    
            </tr>    
        </table>    
    </body>    
    </html>

• 設置郵件觸發機制

• 配置Jenkins自帶的郵件功能

配置內容以下，和Email Extension Plugin插件一樣的配置，能夠經過勾選經過發送測試郵件測試配置按鈕來測試配置是否成功發送郵件，以下圖：

完成上面的系統設置後，點擊保存便可。

這裏對於項目構建、發佈到遠程服務器的全局配置已經完成，接下來以一個vuejs的簡單項目爲列來進行後續的操做。

選擇一個任務，我這裏是testVue，而後選擇配置

上面三步在以前都已經說了，這裏再也不贅述。接下來針對構建的shell腳本進行配置：

#!/bin/bash
    echo $PATH
    node -v 
    npm install -g cnpm --registry https://registry.npm.taobao.org 
    cnpm install 
    npm run build 
    cd /var/lib/jenkins/workspace/testVue/dist
    rm -rf dist.tar.gz
    tar -zcvf dist.tar.gz *
    mv dist.tar.gz /home/jenkinsVue/test

而後對構建後的操做，主要是項目構建成功或失敗後郵箱的配置以及經過ssh服務將打包後的文件自動上傳到服務器指定的文件目錄中。

項目構建成功或失敗後郵箱的配置:

經過ssh服務將打包後的文件自動上傳到服務器指定的文件目錄中配置:

Exec command:

#!/bin/bash 
cd /home/jenkinsVue/test
tar -zxvf dist.tar.gz
rm -rf dist.tar.gz

接下來實現開發本地push代碼到github上後，觸發Webhook，jenkins自動執行構建

• jenkins安裝Generic Webhook Trigger 插件
• github添加觸發器

而後在github配置Webhook 選擇github項目中的Settings->Webhooks>add webhook 配置方式按上圖紅框中的格式，選擇在push代碼時觸發webhook，成功後會在下方出現一個綠色的小勾勾。

其中Payload URL部分我遮住的部分就是服務器的ip地址或域名+jenkins的端口號。

配置完之後，點擊應用、最後點擊保存。

構建前的項目打包後顯示的狀況：

如今把項目頁面中「黃澈」去掉。

進行代碼的commit、push操做後，項目就進行了自動構建：

再來看一下頁面的變化：

以及郵件的通知:

郵件也成功發送通知。

最後再來看下nginx的簡單配置：

自動化打包後的dist文件夾的內容在/home/jenkinsVue/test文件夾下：

以上就是全部對於基於jenkins+nginx+github/gitlab進行項目自動化構建部署的操做了。