前端自動化部署linux centOs + Jenkins + nignx + 單頁面應用

Jenkins是什麼？

Jenkins 是一款業界流行的開源持續集成工具，普遍用於項目開發，具備自動化構建、測試和部署等功能。

 

準備工做

Linux centOS系統阿里雲服務器一個

碼雲一個存放vue項目的倉庫

 

開始安裝與初始化

1、安裝JDK

yum install -y java 

2、安裝jenkins

添加Jenkins庫到yum庫，Jenkins將從這裏下載安裝。

1 wget -O /etc/yum.repos.d/jenkins.repo http://pkg.jenkins-ci.org/redhat/jenkins.repo

2 rpm --import https://jenkins-ci.org/redhat/jenkins-ci.org.key

3 yum install -y jenkins 

若是不能安裝就到官網下載jenkis的rmp包，官網地址（http://pkg.jenkins-ci.org/redhat-stable/）

1 wget http://pkg.jenkins-ci.org/redhat-stable/jenkins-2.7.3-1.1.noarch.rpm

2 rpm -ivh jenkins-2.7.3-1.1.noarch.rpm 

配置jenkis的端口（可用xshell可視化編輯保存）

 vi /etc/sysconfig/jenkins 

找到修改端口號：

JENKINS_PORT="8080"  此端口不衝突能夠不修改 

3、啓動jenkins

service jenkins start/stop/restart 

• 安裝成功後Jenkins將做爲一個守護進程隨系統啓動
• 系統會建立一個"jenkins"用戶來容許這個服務，若是改變服務全部者，同時須要修改/var/log/jenkins, /var/lib/jenkins, 和/var/cache/jenkins的全部者
• 啓動的時候將從/etc/sysconfig/jenkins獲取配置參數
• 默認狀況下，Jenkins運行在8080端口，在瀏覽器中直接訪問該端進行服務配置
• Jenkins的RPM倉庫配置被加到/etc/yum.repos.d/jenkins.repo

4、打開jenkins 

在瀏覽器中訪問 
首次進入會要求輸入初始密碼以下圖， 
初始密碼在：/var/lib/jenkins/secrets/initialAdminPassword 

選擇"Install suggested plugins"安裝默認的插件，下面Jenkins就會本身去下載相關的插件進行安裝。 

建立超級管理員帳號 

參考： centos下搭建Jenkins持續集成環境(安裝jenkins)

建立任務

1. 點擊建立一個新任務

1. 選擇自由風格的軟件項目，並起一個名字

至此，基礎準備工做已經完成，咱們在服務器上安裝了Jenkins並啓動，而後進行了初始化配置，創建了一個新任務。接下來咱們開始配置咱們須要的功能。

 

實現git鉤子功能

首先咱們要實現一個git鉤子功能，就是咱們向github/碼雲等遠程倉庫push咱們的代碼時，jenkins能知道咱們提交了代碼，這是自動構建自動部署的前提，鉤子的實現原理是在遠端倉庫上配置一個Jenkins服務器的接口地址，當本地向遠端倉庫發起push時，遠端倉庫會向配置的Jenkins服務器的接口地址發起一個帶參數的請求，jenkins收到後開始工做。

1. 打開剛建立的任務，選擇配置，添加遠程倉庫地址，配置登陸名及密碼及分支。
   
2. 安裝Generic Webhook Trigger Plugin插件（系統管理-插件管理-搜索Generic Webhook Trigger Plugin）若是可選插件列表爲空，點擊高級標籤頁，替換升級站點的URL爲： http://mirror.xmission.com/jenkins/updates/update-center.json而且點擊提交和當即獲取。

或者你直接去官網搜索下載.hpi文件，而後在高級那上傳插件也行（參考連接）

1. 添加觸發器
   第2步安裝的觸發器插件功能很強大，能夠根據不一樣的觸發參數觸發不一樣的構建操做，好比我向遠程倉庫提交的是master分支的代碼，就執行代碼部署工做，我向遠程倉庫提交的是某個feature分支，就執行單元測試，單元測試經過後合併至dev分支。靈活性很高，能夠自定義配置適合本身公司的方案，這裏方便演示咱們不作任何條件判斷，只要有提交就觸發。在任務配置裏勾選Generic Webhook Trigger便可
   
2. 倉庫配置鉤子 此處以準備工做的碼雲倉庫爲例，由於公司用的是碼雲，github的配置基本一致，進入碼雲項目主頁後，點擊管理-webhooks-添加，會跳出一個這樣的框來。

URL格式爲 http://<User ID>:<API Token>@<Jenkins IP地址>:端口/generic-webhook-trigger/invoke （注意下用英文符號編寫 ） userid和api token在jenkins的系統管理-管理用戶-admin-設置裏，沒有的話生成個。這是個人

Jenkins IP地址和端口是你部署jenkins服務器的ip地址，端口號沒改過的話就是8080。
密碼填你和上面userid對應的密碼，我這裏是root。
下面的幾個選項是你在倉庫執行什麼操做的時候觸發鉤子，這裏默認用push。
點擊提交完成配置。

如：

http://admin:110ca60a40ffd1d3dac63adc4d01510f2e@120.79.40.118:8080/generic-webhook-trigger/invoke

 

1. 測試鉤子

點擊測試，若是配置是成功的，你的Jenkins左側欄構建執行狀態裏將會出現一個任務。

另外，你也能夠試下本地提交代碼，提交代碼後，jenkins也會開始一個任務,目前咱們沒有配置任務開始後讓它作什麼，因此默認它只會在你提交新代碼後，將新代碼拉取到jenkins服務器上。到此爲止，git鉤子咱們配置完成。

 

實現自動化構建（演示而已，npm包安裝可能有問題）

git push觸發鉤子後，jenkins就要開始工做了，自動化的構建任務能夠有不少種，好比說安裝升級依賴包，單元測試，e2e測試，壓縮靜態資源，批量重命名等等，不管是npm script仍是webpack，gulp之類的工做流，你以前在本地能作的，在這裏一樣能夠作。
做爲演示，這裏只演示三個基本經常使用的工做流程，安裝依賴包->單元測試->打包，也就是下面這三個命令。

npm install 

npm run test

npm run build複製代碼

1. 首先，和本地運行npm script同樣，咱們要想在jenkins裏面執行npm命令，先要在jenkins裏面配置node的環境，能夠經過配置環境變量的方式引入node，也能夠經過安裝插件的方式，這裏使用了插件的方式，安裝一下nvm wrapper這個插件。
2. 打開剛剛的jenkins任務，點擊配置裏面的構建環境，勾選這個，並指定一個node版本。

 

1. 點擊構建，把要執行的命令輸進去，多個命令使用&&分開。

1. 保存
2. 此時本地修改一下代碼push測試一下（也能夠點擊當即構建測試），點擊本次觸發的那個任務，選擇控制檯輸出，將會看到Jenkins在雲端執行的過程。

 

命令行最後一行是Finished狀態的若是是SUCCESS（藍色）則證實執行的任務都順利進行，是FAILURE（紅色）則證實中間有重大錯誤致使任務失敗，UNSTABLE（黃色）表明有雖然有些小問題，但不阻礙任務進行，黃色或者紅色能夠去命令行看下錯誤輸出，看下哪裏出了問題。

 

1. 若是上一步是SUCCESS，點擊項目的工做空間，將會發現多了dist和node_modules兩個文件夾。

 

至此，咱們已經搭建了一個簡易的構建工做流程，構建完成了，咱們須要自動化部署。

 

若是失敗了通常是npm安裝失敗，建議單頁面部署不須要上面說的命令，直接本地打包把dist文件夾提交倉庫

 

實現自動化部署

自動化部署多是咱們最須要的功能了，公司就一臺服務器，咱們可使用人工部署的方式，可是若是公司有100臺服務器呢，人工部署就有些吃力了，並且一旦線上出了問題，回滾也很麻煩。因此這一節實現一下自動部署的功能。

1. 首先，先在Jenkins上裝一個插件Publish Over SSH，咱們將經過這個工具實現服務器部署功能。
2. 在要部署代碼的服務器上建立一個文件夾用於接收Jenkins傳過來的代碼，我在服務器上建了一個testjenkins的文件夾。
3. Jenkins想要往服務器上部署代碼必須登陸服務器才能夠，這裏有兩種登陸驗證方式，一種是ssh驗證，一種是密碼驗證，就像你本身登陸你的服務器，你可使用ssh免密登陸，也能夠每次輸密碼登陸，系統管理-系統設置裏找到Publish over SSH這一項。 重點參數說明： （詳細看下文的錯誤解決）

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

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

Key：將私鑰複製到這個框中(path to key和key寫一個便可) 

 

SSH Servers的配置：

SSH Server Name：標識的名字（隨便你取什麼）

Hostname：須要鏈接ssh的主機名或ip地址（建議ip）

Username：用戶名

Remote Directory：遠程目錄（上面第二步建的testjenkins文件夾的路徑）

 

高級配置：

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

Passphrase / Password：密碼登陸模式的密碼

Port：端口（默認22）

Timeout (ms)：超時時間（毫秒）默認300000複製代碼

配置完成後，點擊Test Configuration測試一下是否能夠鏈接上，若是成功會返回success，失敗會返回報錯信息，根據報錯信息改正便可。

 

因爲配置緣由形成一下錯誤 （參考連接）
錯誤： jenkins.plugins.publish_over.BapPublisherException: Failed to connect session for config [131]. Message [Auth fail]

配置方法： 

一、生成密鑰
個人jenkins服務安裝在了linux下的jenkins用戶下
[jenkins@jenkins ~]$ ssh-keygen  
Generating public/private rsa key pair.
Enter file in which to save the key (/home/jenkins/.ssh/id_rsa): //密鑰生成路徑，直接默認回車便可
Created directory '/home/jenkins/.ssh'.
Enter passphrase (empty for no passphrase):  //默認回車
Enter same passphrase again: //默認回車
Your identification has been saved in /home/jenkins/.ssh/id_rsa.
Your public key has been saved in /home/jenkins/.ssh/id_rsa.pub.
The key fingerprint is:
c0:3d:31:ee:81:b6:5d:5f:d7:83:96:a3:92:85:e0:ab jenkins@jenkins
二、進入到目錄進行查看
[jenkins@jenkins ~]$ cd .ssh/
[jenkins@jenkins .ssh]$ ll
total 8
-rw-------. 1 jenkins jenkins 1671 Jul 17 23:23 id_rsa
-rw-r--r--. 1 jenkins jenkins  397 Jul 17 23:23 id_rsa.pub
三、將公鑰拷貝到authorized_keys文件
[jenkins@jenkins .ssh]$ cat id_rsa.pub >> authorized_keys     
四、將生成的authorized_keys拷貝到要鏈接的linux機器上的對應用戶或者直接root下的.ssh文件夾下
[jenkins@jenkins .ssh]$ scp authorized_keys root@192.168.0.91:/home/root/.ssh 
The authenticity of host '192.168.0.91 (192.168.0.91)' can't be established.
RSA key fingerprint is ff:dc:00:df:2c:40:70:63:95:ad:53:85:b7:8a:15:06.
Are you sure you want to continue connecting (yes/no)? yes
Warning: Permanently added '192.168.0.91' (RSA) to the list of known hosts.
reverse mapping checking getaddrinfo for bogon [192.168.0.91] failed - POSSIBLE BREAK-IN ATTEMPT!
wqq@192.168.0.91's password: 
authorized_keys                                                                 100%  397     0.4KB/s   00:00   
五、配置SSH Server 左上角的jenkins-->系統管理-->系統設置 

其中Remote Directory：遠程目錄（寫上面第二步建的testjenkins文件夾的路徑）能test成功就行

 

 

 

4. 接下來進入咱們建立的任務，點擊構建，增長2行代碼，意思是將dist裏面的東西打包成一個文件，由於咱們要傳輸。

cd dist&& 

tar -zcvf dist.tar.gz * 

完整示例（不推薦）

 

推薦本地打好包直接：

 

5. 點擊構建後操做，增長構建後操做步驟，選擇send build artificial over SSH， 參數說明：

Name:選擇一個你配好的ssh服務器

Source files ：寫你要傳輸的文件路徑

Remove prefix ：要去掉的前綴，不寫遠程服務器的目錄結構將和Source files寫的一致

Remote directory ：寫你要部署在遠程服務器的那個目錄地址下，不寫就是SSH Servers配置裏默認遠程目錄

Exec command：傳輸完了要執行的命令，我這裏執行了解壓縮和解壓縮完成後刪除壓縮包2個命令 

 

 

接着安裝好nginx 參考Nginx 安裝配置

nginx配置改動下：

注意nginx配置改了後得重啓

/usr/local/webserver/nginx/sbin/nginx -s reload # 從新載入配置文件

/usr/local/webserver/nginx/sbin/nginx -s reopen # 重啓 Nginx

/usr/local/webserver/nginx/sbin/nginx -s stop # 中止 Nginx

 

 

保存

 

1. 如今當咱們在本地將Welcome to Your Vue.js App修改成Jenkins本地打包後發出一個git push，過一會就會發現咱們的服務器上已經部署好了最新的代碼，是否是很6。

 

至此，咱們的自動化部署也完成了，可是若是過程當中有異常怎麼辦，或是咱們想知道每次Jenkins運行的日誌及運行結果，咱們能夠經過配置郵件服務來讓Jenkins每次完成任務後通知相關人員

 

實現郵件提醒

這裏咱們不用E-mail Notification，由於它的郵件服務功能太少，沒法自定義郵件內容及自定義觸發鉤子，並且只能在異常狀況下才能發郵件。咱們使用Editable Email Notification這個。

1. 打開系統管理-系統配置-Extended E-mail Notification，不是系統管理-系統配置-郵件通知，千萬不要配錯了，不然不起做用。配置一下用來發郵件的郵箱，我這裏用的是我本身的qq郵箱。

要是用別的廠家的郵箱服務就查下別的郵箱廠家smtp怎麼配，用qq郵箱的除了user Name和password其餘的和我寫同樣就行。另外password寫的不是qq郵箱的密碼，而是開啓smtp服務後發短信獲取的密碼。

打開建立的那個任務，增長構建後操做步驟選擇Editable Email Notification，Project Recipient List那裏寫你要發給誰郵件，能夠多個，用分號隔開。

而後點擊Advanced Settings-Triggers-Add Trigger，選擇always，意思是不管什麼狀況任務執行完就發郵件，也能夠選擇其餘模式，如任務執行異常了才發郵件。

 

我這裏配置的接收郵件的地址也是個人qq郵箱，這個能夠根據本身公司的工做流程配。
4. 如今當咱們在本地修改代碼後發出一個git push，Jenkins自動構建部署完成後就會給我發一封郵件，郵件附件裏會有本次任務的日誌。