這篇文章主要為大家展示了“如何利用Jenkins與Nginx實(shí)現(xiàn)前端項目自動構(gòu)建與持續(xù)集成”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“如何利用Jenkins與Nginx實(shí)現(xiàn)前端項目自動構(gòu)建與持續(xù)集成”這篇文章吧。

成都創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比分宜網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式分宜網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋分宜地區(qū)。費(fèi)用合理售后完善，十余年實(shí)體公司更值得信賴。

Jenkins介紹

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

首先登錄服務(wù)器更新系統(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已經(jīng)啟動成功了，訪問http://你的ip/，如果成功安裝會出來Nginx默認(rèn)的歡迎界面：

安裝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啟動成功后默認(rèn)的是8080端口，瀏覽器輸入你的服務(wù)器IP地址加8080端口就可以訪問了。

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

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

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

在Jenkins中安裝NodeJs插件

因?yàn)槲覀兊捻椖渴且玫絅ode打包的，所以先在Jenkins中安裝NodeJs插件，安裝后進(jìn)入全局工具配置，配置一個我們要用到的Node版本。

創(chuàng)建任務(wù)

點(diǎn)擊創(chuàng)建一個新任務(wù)。

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

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

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

到這里已經(jīng)實(shí)現(xiàn)了本地代碼提交到GitHub，然后在Jenkins上點(diǎn)擊構(gòu)建，可以拉取代碼并且打包，下一步實(shí)現(xiàn)打包后的dist目錄放到目標(biāo)服務(wù)器上。

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

安裝完成后在系統(tǒng)管理-> 系統(tǒng)設(shè)置->Publish over SSH里設(shè)置服務(wù)器信息：

• Passphrase：密碼(key的密碼，沒設(shè)置就是空)

• Path to key：key文件(私鑰)的路徑

• Key：將私鑰復(fù)制到這個框中(path to key和key寫一個即可)

SSH Servers的配置：

• SSH Server Name：標(biāo)識的名字(隨便你取什么)

• Hostname：需要連接SSH的主機(jī)名或IP地址(建議IP)

• Username：用戶名

• Remote Directory：遠(yuǎn)程目錄(上面第二步建的testjenkins文件夾的路徑)

高級配置：

• Use password authentication, or use a different  key：勾選這個可以使用密碼登錄，不想配SSH的可以用這個先試試

• Passphrase/Password：密碼登錄模式的密碼

• Port：端口(默認(rèn)22)

• Timeout(ms)：超時時間(毫秒)默認(rèn)300000

這里配置的是賬號密碼登錄，填寫完后點(diǎn)擊test，出現(xiàn)Success說明配置成功。

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

• Name：選擇一個你配好的SSH服務(wù)器

• Source files：寫你要傳輸?shù)奈募窂?/p>

• Remove prefix：要去掉的前綴，不寫遠(yuǎn)程服務(wù)器的目錄結(jié)構(gòu)將和Source files寫的一致

• Remote directory：寫你要部署在遠(yuǎn)程服務(wù)器的那個目錄地址下，不寫就是SSH Servers配置里默認(rèn)遠(yuǎn)程目錄

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

注意在構(gòu)建中添加壓縮dist目錄命令：

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

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

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

• Jenkins安裝Generic Webhook Trigger插件

• GitHub添加觸發(fā)器

配置方法

在剛才的testJenkins工程中點(diǎn)擊構(gòu)建觸發(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中的構(gòu)建已經(jīng)自動執(zhí)行。

查看頁面也是ok的。

以上是“如何利用Jenkins與Nginx實(shí)現(xiàn)前端項目自動構(gòu)建與持續(xù)集成”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！