原文來著我的掘金，歡迎查閱矿咕，寫教程不容易轉(zhuǎn)載請帶上這句話
上一篇文章已經(jīng)介紹了服務(wù)器所需要軟件的安裝和配置抢肛。下面介紹一下 jenkins 關(guān)聯(lián) GitHub關(guān)聯(lián)，實現(xiàn) GitHub 代碼 push 之后自動觸發(fā) jenkins 打包代碼并且發(fā)布到服務(wù)器;
題記 如果你還沒有安裝配置好對應(yīng)服務(wù)器的環(huán)境碳柱，可以查看 一套真實前端開發(fā)環(huán)境搭建+可持續(xù)集成+自動化部署實踐（第一篇環(huán)境搭建配置）
1捡絮、github 操作配置生成Personal Access Token
進入github --> setting -->developers--> Personal Access Token --> Generate new token, 新建一個有讀寫權(quán)限的用戶
新增一個描述，勾選如圖配置莲镣，點擊生成對應(yīng)的 token
注意８Ｎ取！瑞侮！ 生成 token 之后一定要復(fù)制記到記事本記錄下來的圆，不然之后這個編號就再也看到不了；
2区岗、github 設(shè)置GitHub webhooks（具體需要持續(xù)集成的項目）略板，新建或者設(shè)置現(xiàn)有項目的webhooks選項，url：你之前部署jenkins的服務(wù)器的IP+端口+ github-webhook,填寫完成確認(rèn)添加慈缔。
3叮称、設(shè)置jenkins的github配置
jenkins 安裝Github Plugin插件,因為我們在配置jenkins的時候已經(jīng)安裝了所以這里可跳過， 如果沒有 key 在jenkins 系統(tǒng)管理-->插件管理-->可選插件中安裝。
jenkins 新建項目瓤檐，選擇構(gòu)建自由風(fēng)格項目
完成之后的頁面如下赂韵，后面我們做關(guān)于項目的配置設(shè)置都是基于這樣頁面??????
jenkins 系統(tǒng)管理 --> 系統(tǒng)設(shè)置 --> GitHub --> Add GitHub Sever,設(shè)置一下jenkins關(guān)聯(lián) GitHub
按照如下圖選擇添加配置，這個時候就需要用到了我們第一步生成的 GitHub Personal Access Token挠蛉，填寫完畢確認(rèn)添加
image
選擇生成的憑證祭示，測試jenkins連接github服務(wù)器,如下圖說明一切都配置 ok，最后記得在頁面底部保存配置
image
2谴古、設(shè)置jenkins的項目 configure 配置
General 配置
image
Source Code Management 配置质涛，這里會我在配置的時候會有些坑
- 坑1、Repository URL地址報錯掰担，這里我們填入是項目吃 clone 地址汇陆，可以嘗試Clone with SSH、Clone with HTTPS兩個地址都嘗試一下带饱。
- 坑2毡代、無法下拉選擇配置的權(quán)限用戶。直接點擊 Add 添加一個權(quán)限用戶以Username with password勺疼，直接用 GitHub的登錄名稱和命名創(chuàng)建教寂。這個時候完成了就應(yīng)該跳出下拉選項了；
Build Triggers && Build Environment && Bindings 選擇配置
image
Build 項目打包發(fā)布配置执庐，添加執(zhí)行 Shell酪耕，由于不同的前端項目技術(shù)架構(gòu)和打包方式不一樣，這里需要你根據(jù)的你項目轨淌，了解一下一些常用shell命令因妇，這里的命令操作可以理解為在你的服務(wù)器環(huán)境中。這里我以打包 vue 項目為例猿诸，構(gòu)建打包后代碼文件解壓到nginx的指定目錄
echo $PATH
node -v
npm -v #檢查編譯環(huán)境
npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver
npm install
npm run build #編譯項目
cd dist
tar -zcvf dist.tar.gz * #所有文件壓縮
tar -zxvf /root/.jenkins/workspace/vue-online-admin/dist/dist.tar.gz -C /usr/share/nginx/html #壓縮文件解壓到nginx映射目錄
cd /root/.jenkins/workspace/vue-online-admin
rm -R dist #刪除項目打包后的殘留
4、測試驗證成果
所有的流程狡忙，這一路配置下來梳虽，是期望代碼 push 到 GitHub 上的時候觸發(fā)GitHub 的 webhooks，再利用jenkins完成項目的打包部署灾茁。
GitHub 也顯示構(gòu)建成功
之前已經(jīng)在服務(wù)器上配置啟動了nginx窜觉，所以直接用你的服務(wù)器 ip 訪問，How nice ~~北专，這樣一套前端開發(fā)環(huán)境搭建+可持續(xù)集成+自動化部署實踐到這來算是圓滿完成了實踐禀挫，當(dāng)然這只是一個比較粗范的配置，各個項目技術(shù)的差異還需要更多細(xì)致的配置
后記: 把這個實踐記錄下來拓颓，一是記錄一下分享給需要的同學(xué)們语婴，二是有個時間和機會去接觸一下服務(wù)器的東西，還是比較 nice 的。最后謝謝查閱砰左。如果覺得還闊以,點個贊再走唄匿醒，老鐵~
