一套真實前端開發環境搭建+可持續集成+自動化部署實踐（第二篇 jenkins關聯 GitHub自動打包部署）

上一篇文章已經介紹了服務器所須要軟件的安裝和配置。下面介紹一下 jenkins 關聯 GitHub關聯，實現 GitHub 代碼 push 以後自動觸發 jenkins 打包代碼而且發佈到服務器;

題記 若是你尚未安裝配置好對應服務器的環境，能夠查看 一套真實前端開發環境搭建+可持續集成+自動化部署實踐（第一篇環境搭建配置）

一、github 操做配置生成Personal Access Token

進入github --> setting -->developers--> Personal Access Token --> Generate new token, 新建一個有讀寫權限的用戶

新增一個描述，勾選如圖配置，點擊生成對應的 token

注意！！！ 生成 token 以後必定要複製記到記事本記錄下來，否則以後這個編號就再也看到不了；

二、github 設置GitHub webhooks（具體須要持續集成的項目），新建或者設置現有項目的webhooks選項，url：你以前部署jenkins的服務器的IP+端口+ github-webhook,填寫完成確認添加。

三、設置jenkins的github配置

jenkins 安裝Github Plugin插件,由於咱們在配置jenkins的時候已經安裝了因此這裏可跳過， 若是沒有 key 在jenkins 系統管理-->插件管理-->可選插件中安裝。

jenkins 新建項目，選擇構建自由風格項目

完成以後的頁面以下，後面咱們作關於項目的配置設置都是基於這樣頁面👇👇👇

jenkins 系統管理 --> 系統設置 --> GitHub --> Add GitHub Sever,設置一下jenkins關聯 GitHub

按照以下圖選擇添加配置，這個時候就須要用到了咱們第一步生成的 GitHub Personal Access Token，填寫完畢確認添加

選擇生成的憑證，測試jenkins鏈接github服務器,以下圖說明一切都配置 ok，最後記得在頁面底部保存配置

二、設置jenkins的項目 configure 配置

General 配置

Source Code Management 配置，這裏會我在配置的時候會有些坑

• 坑一、Repository URL地址報錯，這裏咱們填入是項目吃 clone 地址，能夠嘗試Clone with SSH、Clone with HTTPS兩個地址都嘗試一下。
• 坑二、沒法下拉選擇配置的權限用戶。直接點擊 Add 添加一個權限用戶以Username with password，直接用 GitHub的登陸名稱和命名建立。這個時候完成了就應該跳出下拉選項了；

Build Triggers && Build Environment && Bindings 選擇配置

Build 項目打包發佈配置，添加執行 Shell，因爲不一樣的前端項目技術架構和打包方式不同，這裏須要你根據的你項目，瞭解一下一些經常使用shell命令，這裏的命令操做能夠理解爲在你的服務器環境中。這裏我以打包 vue 項目爲例，構建打包後代碼文件解壓到nginx的指定目錄

echo $PATH
node -v
npm -v #檢查編譯環境
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 #刪除項目打包後的殘留

複製代碼

四、測試驗證成果

全部的流程，這一路配置下來，是指望代碼 push 到 GitHub 上的時候觸發GitHub 的 webhooks，再利用jenkins完成項目的打包部署。

GitHub 也顯示構建成功

以前已經在服務器上配置啓動了nginx，因此直接用你的服務器 ip 訪問，How nice ~~，這樣一套前端開發環境搭建+可持續集成+自動化部署實踐到這來算是圓滿完成了實踐，固然這只是一個比較粗範的配置，各個項目技術的差別還須要更多細緻的配置

後記: 把這個實踐記錄下來，一是記錄一下分享給須要的同窗們，二是有個時間和機會去接觸一下服務器的東西，仍是比較 nice 的。最後謝謝查閱。若是以爲還闊以,點個贊再走唄，老鐵~