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的安裝

加入源路徑：

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

更新源信息：
```
sudo apt-get update
```
安裝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默認端口

分三步驟走：

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

然後重新啓動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 插件安裝

該插件可以幫助我們實現服務器部署功能。選擇系統管理->插件管理，在發中，往往可能同時多個項目並行進行開發，功能完成開發，進行代碼打包、發佈的時候，可能會出現一些問題。如一個基於vue框架的前端項目，部署的環境有測試環境、線上環境，手動打包發佈。由於操作失誤可能導致發佈到測試環境的代碼發佈到正式環境。所以，一套自動化打包、部署方案對於前端工程師來說，是很有必要的。不僅能夠解決發佈操作問題，還能更專注於業務需求的開發。一般這樣的事兒是由公司運維去進行的，但對於一些中小型公司來說，想實現這樣的一套方案還是得程序員自己動手。就當着自己能力的一種提升，也是不錯的。

Jenkins介紹

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

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

Jenkins安裝

Java的安裝

加入源路徑：

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

更新源信息：
```
sudo apt-get update
```
安裝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默認端口

分三步驟走：

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

然後重新啓動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進行項目自動化構建部署的操作了。