實現(xiàn)目標

本地push代碼到GitHub，Webhook自動觸發(fā)Jenkins上的構建動作，完成安裝Node插件并且打包，然后通過Publish Over SSH插件，將打包出來的文件，部署到目標服務器上。

公司專注于為企業(yè)提供網站建設、成都做網站、微信公眾號開發(fā)、商城建設，小程序制作，軟件按需設計等一站式互聯(lián)網企業(yè)服務。憑借多年豐富的經驗，我們會仔細了解各客戶的需求而做出多方面的分析、設計、整合，為客戶設計出具風格及創(chuàng)意性的商業(yè)解決方案，創(chuàng)新互聯(lián)更提供一系列網站制作和網站推廣的服務。

前期準備

• GitHub賬號和項目
• CentOS服務器
• 服務器安裝Java SDK
• 服務器安裝Nginx +啟動
• 服務器安裝Jenkins +啟動

Jenkins介紹

Jenkins是開源的，使用Java編寫的持續(xù)集成的工具，在CentOS上可以通過yum命令行直接安裝。Jenkins只是一個平臺，真正運作的都是插件。這就是Jenkins流行的原因，因為Jenkins什么插件都有。

首先登錄服務器更新系統(tǒng)軟件

 
 
 
 

  
  
  
  
$ yum update 
 
 
 
 

安裝Java和Git

 

 
 
 
 

  
  
  
  
$ yum install java  
  
  
  
  
$ yum install git 
 
 
 
 

安裝Nginx

 

 
 
 
 

  
  
  
  
$ yum install nginx //安裝  
  
  
  
  
$ service nginx start //啟動 
 
 
 
 

出現(xiàn)Redirecting to /bin/systemctl start nginx.service。

說明Nginx已經啟動成功了，訪問http://你的ip/，如果成功安裝會出來Nginx默認的歡迎界面：

安裝Jenkins

 

 
 
 
 

  
  
  
  
$ wget -O /etc/yum.repos.d/jenkins.repo http://pkg.jenkins-ci.org/redhat/jenkins.repo 
  
  
  
  
rpm --import https://jenkins-ci.org/redhat/jenkins-ci.org.key  
  
  
  
  
 
  
  
  
  
$ yum install jenkins //完成之后直接使用 yum 命令安裝Jenkins 
  
  
  
  
 
  
  
  
  
$ service jenkins restart  //啟動Jenkins 
 
 
 
 

Jenkins啟動成功后默認的是8080端口，瀏覽器輸入你的服務器IP地址加8080端口就可以訪問了。

輸入cat /var/lib/jenkins/secrets/initialAdminPassword查看初始密碼。

這里我們選擇推薦通用插件安裝即可，選擇后等待完成插件安裝以及初始化賬戶。

 

 

 

 

 

 

然后安裝兩個推薦的插件：Rebuilder、SafeRestart。

在Jenkins中安裝NodeJs插件

因為我們的項目是要用到Node打包的，所以先在Jenkins中安裝NodeJs插件，安裝后進入全局工具配置，配置一個我們要用到的Node版本。

 

 

 

創(chuàng)建任務

點擊創(chuàng)建一個新任務。

 

 

 

Jenkins關聯(lián)GitHub項目地址：

選擇構建環(huán)境并編寫shell命令：

配置完成后點擊立即構建，等待構建完，點擊工作空間，可以發(fā)現(xiàn)已經多出一個打包后的dist目錄。點擊控制臺輸出可以查看詳細構建log。

 

 

到這里已經實現(xiàn)了本地代碼提交到GitHub，然后在Jenkins上點擊構建，可以拉取代碼并且打包，下一步實現(xiàn)打包后的dist目錄放到目標服務器上。

安裝Publish Over SSH插件，我們將通過這個工具實現(xiàn)服務器部署功能

安裝完成后在系統(tǒng)管理-> 系統(tǒng)設置->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，出現(xiàn)Success說明配置成功。

在剛才的testJenkins工程中配置構建后操作，選擇send build artificial over SSH， 參數(shù)說明：

• Name：選擇一個你配好的SSH服務器
• Source files：寫你要傳輸?shù)奈募窂?/li>
• Remove prefix：要去掉的前綴，不寫遠程服務器的目錄結構將和Source files寫的一致
• Remote directory：寫你要部署在遠程服務器的那個目錄地址下，不寫就是SSH Servers配置里默認遠程目錄
• Exec command：傳輸完了要執(zhí)行的命令，我這里執(zhí)行了進入test目錄,解壓縮,解壓縮完成后刪除壓縮包三個命令

注意在構建中添加壓縮dist目錄命令：

填完后執(zhí)行構建。成功后登錄我們目標服務器發(fā)現(xiàn)test目錄下有了要運行的文件：

訪問域名發(fā)現(xiàn)項目可以訪問了。

接下來實現(xiàn)開發(fā)本地push代碼到GitHub上后，觸發(fā)Webhook，Jenkins自動執(zhí)行構建。

• Jenkins安裝Generic Webhook Trigger插件
• GitHub添加觸發(fā)器

配置方法

在剛才的testJenkins工程中點擊構建觸發(fā)器中選擇Generic Webhook Trigger，填寫token：

GitHub配置Webhook。

選擇GitHub項目中的Settings->Webhooks>add webhook配置方式按上圖紅框中的格式，選擇在push代碼時觸發(fā)Webhook，成功后會在下方出現(xiàn)一個綠色的小勾勾。

測試一下，把Vue項目首頁的9900去了，然后push代碼去GitHub，發(fā)現(xiàn)Jenkins中的構建已經自動執(zhí)行。

查看頁面也是ok的。

一套簡單的前端自動化工作流就搭建完成，是選擇代碼push后在Jenkins中手動構建，還是push后自動構建，看公司情況使用。

最后

寫的有點啰嗦，有錯誤的地方希望大家指出，也希望這篇文章對大家有幫助。

文章題目：利用Jenkins與Nginx實現(xiàn)前端項目自動構建與持續(xù)集成
當前URL：http://uogjgqi.cn/article/djhchhg.html