前端一鍵部署(jenkins)

---

0.引言

你們好，我是肥羊羊，今天給你們介紹下jenkins一鍵部署。說來慚愧，以前說要寫一篇jenkins的文章，這讓你們一等就是半年，罪過罪過....

1.原理

前端利用jenkins部署其實很簡單，用到的不外乎是ssh,git，git鉤子,shell命令等一些知識。

以前我寫過兩篇文章，實際上已經在自動部署的原理上作了闡述，jenkins的自動部署原理其實都同樣,你們若是想知道來龍去脈以前看我以前的文章吧。
git鉤子與自動化部署（上）
git鉤子與自動化部署（下）

2.流程

jenkins是開源CI&CD軟件領導者， 提供超過1000個插件來支持構建、部署、自動化， 知足任何項目的須要。
程序員提交代碼後，能夠在jenkins上進行測試，打包，部署等操做

對於前端來講，jenkins使用相對簡單，由於測試，打包均可以在本地完成，只須要使用到Jenkins的自動部署功能,後面的文章會先詳細介紹本地打包怎麼作，再簡單介紹下若是想服務器上打包應該怎麼作。

總體流程以下圖，前端在本地開發，經測試、打包後傳到git上，觸發webhook鉤子，向jenkins服務器發送請求，觸發jenkins上響應的腳本，完成部署

下面分三個部分（本地，git,jenkins）介紹一下具體的作法

3.jenkins配置

先說下前置條件

因爲是公司的項目，因此jenkins已經由ops搭建好了，包括ssh也設置好了

插件方面：Publish Over SSH（推送文件用的） 這個插件也安好了

1.建立好一個自由風格的項目，添加上對這個項目的描述
2.首先添加源碼管理
通俗的講就是從哪一個地方拉代碼，能夠從svn,也能夠從git,注意須要提早配置好ssh，而後選擇拉取分支，我這裏選dp分支，也就是gitlab上新建的專門用於部署的分支

拉代碼前能夠選擇刪除工做目錄，看你項目有沒有這個須要，若是須要刪除的話在構建環境中勾選 Dele workspace before buld start
3. 添加觸發器

觸發器就是設置何時開始構建

固然你能夠不添加觸發器，每次提交完代碼在jenkins裏點擊左側的當即構建。不過你們跟羊總這麼久了，羊總像是逼格這麼低的人嗎

也能夠選擇輪詢 SCM，也就是定時查看git分支，若是分支代碼改變，則拉取代碼到工做空間，工做空間就是jenkins服務器你這個項目的所在目錄，你能夠在控制面板的左側找到它

若是你裝了GitLab Plugin，也能夠選擇這個，gitlab代碼更新通知jenkins構建，惋惜咱就是個大頭兵也沒權限安裝這個插件，不過咱也能夠經過別的方式達到這個插件的做用

我這裏選擇的是使用腳本觸發遠程構建，令牌隨便寫，注意下面的觸發URL格式，只要是這個格式的url請求，Jenkins就會自動構建，你們別忘了加上jenkins帳號密碼（http://username:password@xxxxxx），不然沒權限，你們能夠先在瀏覽器裏試一試，看能不能觸發Jenkins的構建

4.構建操做
構建的時候幹啥，通常能夠測試，打包，部署等等

以前說過了，咱們是本地打包，因此線上部署實際上就是把文件從jenkins服務器弄到測試服務器的一個過程，那麼在Jenkins上構建實際只須要壓縮下文件就好了，假設咱們的dp目錄是所有的打包後的文件

咱們這裏選擇執行shell腳本，將全部當前文件打成tar包

5.構建後操做
構建後你們能夠看工做空間應該會多一個tar包文件，咱們把這個tar包經過ssh傳到測試服務器指定目錄就好了（這個目錄nignx已經提早配置過訪問端口了）。因爲公司配了傳送的默認目錄，因此我這裏手動作了下轉移，而後解壓，刪除原來的文件便可

4.gitlab配置

1. 新增一個bp分支
2. 添加一個webhook（在setting/integration裏面）,每次bp分支更新了就向指定url發請求，url就是3.3觸發器裏面的url

千萬千萬別忘了選bp分支更新代碼觸發，添加完鉤子能夠先測試下url能不能jenkins

5.本地項目配置

本地須要作的是：

本地打包完之後，進入打包dist目錄，，新建立一個git倉庫，將 目錄裏全部內容 強行推送到遠程bp分支，而後刪除.git文件，回到上層目錄

羊總，說好的一鍵部署呢？？？你這不是爲難我胖虎嗎？？？

莫急，莫急，我寫了一個sh腳本，你們放到項目裏面（gitignore裏面能夠添加忽略sh文件，由於這個sh裏面有帳號密碼等私密信息，不該該共享，共同開發的時候每一個人的也不同！），而後添加一個npm script

//package.json中的配置
"scripts": {
    "dp": "sh dp.sh",
  },

mac用戶直接運行npm run dp便可完成一鍵部署
windows用戶也簡單，稍微改一改sh命令，在gitbash裏面運行npm run dp便可完成一建部署。
改動1， 去掉sudo,windows裏面沒有這個命令
改動2， cd後面的目錄地址不對，本身在gitbash裏面輸入pwd看一下

sh腳本以下 //touch dp.sh

#!/usr/bin/env sh

# 確保腳本拋出遇到的錯誤
set -e

# 沒有打包先打包，每次必須保證dist是新的
 npm run build
# 進入dist目錄，注意路徑別寫錯了,window用戶特別注意
# cd path/to/dist
cd dist

git init
git add -A
git commit -m 'deploy'


# 若是ssh已配，直接走ssh推送
#git push -f git@xxxx/share.git master:dp （必定是master分支，由於這個是dist裏面新建的git庫，千萬不要覺得是外面的根目錄下的git庫）
# 若是ssh連接有問題，請走http連接推送
# git push -f http://yourCount:yourPassword@yourGitProjectUrl/share.git  master:dp

git push -f http://xxxx@xxxx/share.git  master:dp

# 刪除.git 不然當前項目有兩個.git文件 沒法推送master
sudo rm -rf .git

cd -

6.jenkins線上測試/打包

線上打包很簡單，jenkins簡單改改就好了
第一個，構建環境須要支持node
第二個，構建的時候shell腳本改改就好了

至於本地和git上怎麼改，只要大家讀懂文章了，我相信也不難配

7.一些思考

• 打包應該放在本地仍是線上

只要不是超大型項目，我以爲本地打包仍是很不錯的，緣由有一下幾點

1. 不知道爲啥，我本地打包比服務器快不少，mac就是香...
2. Npm intall的時候，你們遇到過報錯沒有，本地怎麼解決的，服務器上通常就怎麼解決，也就是須要將修復命令放到shell腳本里。因此我我的以爲本地打包可控性更高，更方便。

• 推什麼目錄到dp分支

這個也是由你的打包方案決定的，線上打包你確定只能將dev分支（項目根目錄層級）合到dp分支上，而後推到git上

其實這是第一個問題的延續，個人本地打包推送dist目錄裏的文件的方案有什麼好處？
一、本地沒有dp分支，乾淨
二、不用頻繁合併分支，避免衝突，省心

• 後續優化

你們發現沒有，jenkins配置主要集中在目錄和項目地址的不一樣上。
我應該是能夠用參數化構建讓用戶去主動填這兩個參數，而後自動生成配置構建項目
這樣，我不用每次新項目都生成一個jenkins項目，同事的其餘項目也均可以在個人這個jenkins項目上完成構建，是否是省了不少時間。

8.總結

npm run dp ==> 一鍵部署

以上就是我給你們帶來的Jenkins前端一建打包部署方案分享，若是文章有什麼問題，歡迎在評論區支出。若是你以爲本文對你有很大的幫助，求點贊，求收藏， 求打賞 ，大家的支持是做者寫做的最大動力！