如何利用Jenkins與Nginx實現前端項目自動構建與持續集成

這篇文章主要為大家展示了“如何利用Jenkins與Nginx實現前端項目自動構建與持續集成”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“如何利用Jenkins與Nginx實現前端項目自動構建與持續集成”這篇文章吧。

Jenkins介紹

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

首先登錄服務器更新系統軟件

$ yum update

安裝Java和Git

$ yum install java  $ yum install git

安裝Nginx

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

出現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版本。

創建任務

點擊創建一個新任務。

Jenkins關聯GitHub項目地址：

選擇構建環境并編寫shell命令：

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

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

安裝Publish Over 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，出現Success說明配置成功。

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

• Name：選擇一個你配好的SSH服務器

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

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

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

• Exec command：傳輸完了要執行的命令，我這里執行了進入test目錄,解壓縮,解壓縮完成后刪除壓縮包三個命令

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

填完后執行構建。成功后登錄我們目標服務器發現test目錄下有了要運行的文件：

訪問域名發現項目可以訪問了。

接下來實現開發本地push代碼到GitHub上后，觸發Webhook，Jenkins自動執行構建。

• Jenkins安裝Generic Webhook Trigger插件

• GitHub添加觸發器

配置方法

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

GitHub配置Webhook。

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

測試一下，把Vue項目首頁的9900去了，然后push代碼去GitHub，發現Jenkins中的構建已經自動執行。

查看頁面也是ok的。

以上是“如何利用Jenkins與Nginx實現前端項目自動構建與持續集成”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！