2. 程式人生 > >手摸手聊聊小程式持續整合Jenkins

手摸手聊聊小程式持續整合Jenkins

阿新 • • 發佈：2019-01-09

本文首發在我的github部落格 github.com/Pasoul/blog… ，感興趣的同學可以點個star，不要迷路哦~

我們為什麼要持續整合？

試想以下兩個場景：

場景一：你在開發新功能的時候，同事A找你要小程式體驗二維碼，於是你只能：

git stash // 快取本地修改
git checkout release // 切換到測試分支
yarn test // 打測試包
... // 預覽、切回分支
git stash pop // 還原本地修改
複製程式碼

然後整理被打斷的程式碼思路，繼續coding，暗自吐槽（二維碼是有35min過期時間的，一會又得找我了...）

場景二：小程式到了提測日期，恰巧負責開發的你今天請假了，意味著沒人可以為測試同學打包，因此耽誤了專案進度。

以上兩個場景我們發現一個共同的問題，小程式的體驗釋出太依賴開發者，因為通常只有開發者熟悉微信開發者工具一系列的上傳流程，從而導致影響開發進度、釋出流程不可控等一系列問題...

default

如果小程式可以通過Jenkins整合，將大大解放開發者的生產力，將Jenkins許可權收回到測試同學手裡，每次釋出都需要測試同學執行構建，一定程度上解決釋出過程不可控的問題。

小程式持續整合的限制

微信開發者工具目前只支援Mac和Windows環境，可以在單獨的Mac mini機器上搭一個Jenkins環境，專門用於打包ios app和小程式。

前期知識儲備

除了圖形化工具，開發者工具還提供了命令列與 HTTP 服務兩種介面供外部呼叫，開發者可以通過命令列或 HTTP 請求指示工具進行登入、預覽、上傳等操作。

官方文件

我們先嚐試使用命令列工具啟動並登入微信開發者工具：

命令列工具所在位置：

macOS: <安裝路徑>/Contents/MacOS/cli

Windows: <安裝路徑>/cli.bat

以下示例皆執行在MacOS 10.13.5環境：

如果微信開發者安裝在應用程式裡面，其中<安裝路徑>則為 /Applications/wechatwebdevtools.app

啟動微信開發者工具

終端執行/Applications/wechatwebdevtools.app/Contents/MacOS/cli -o，結果如下：

image

並且開發者工具已經啟動：

lalpdgq9qca_-cvnadrnau4_334_474 png_620x10000q90g

ps: mac環境下如果是新安裝的開發者工具，一定要先開啟並通過安全驗證。

登入微信開發者工具

終端執行/Applications/wechatwebdevtools.app/Contents/MacOS/cli -l，結果如下：

lalpdgq9qcbcguvnatxnar0_701_725 png_620x10000q90g

掃描二維碼後，終端列印login success，並且此時開發者工具已經登入：

default

我們嘗試使用HTTP 服務預覽專案：

在啟動和登入開發者工具後，我們需要獲取工具執行所在的埠號（埠是不固定的），然後呼叫http服務預覽此專案，執行以下命令獲取埠號：

port=$(cat "/Users/pengyong/Library/Application Support/微信web開發者工具/Default/.ide")
echo "微信開發者工具執行在${port}埠"
複製程式碼

假設我的專案地址在：/User/demo，開發者工具開啟在55228埠，在瀏覽器輸入http://127.0.0.1:55228/preview?projectpath=/User/demo，可以檢視預覽二維碼

image

我們知道開發者可以通過命令列或 HTTP 請求指示工具進行啟動、登入、預覽等操作，接下來就進入正題：安裝和部署Jenkins。

配置Jenkins

Jenkins執行依賴java環境，終端輸入java -version，看輸出是否正確比如：java version "1.8.0_151"

一般Mac安裝Jenkins有兩種方法：

  1. Jenkins官網（jenkins.io/ ）下載安裝包，一路Next。
  2. Tomcat + War

這裡我推薦第二種安裝方式，因為第一種方式會生成一個共享的使用者Jenkins，接下來所有構建的操作都是基於Jenkins這個使用者的，它的許可權與你當前登入的系統使用者許可權不同，導致構建過程中出現很多問題。

安裝Tomcat

  1. 官網下載Tomcat安裝包，我下載的是apache-tomcat-8.5.37.tar.gz這個版本，重新命名為Tomcat8，放在/Users/使用者/Library這個目錄下。
  2. 將Tomcat的bin路徑新增到環境變數中：
sudo vi ~/.bash_profile
export PATH=$JAVA_HOME/bin:$PATH:/Users/pengyong/Library/Tomcat8/bin
source ~/.bash_profile
複製程式碼
  1. 為了避免許可權問題，給你的Tomcat/bin/*.sh分配許可權

sudo chmod 755 /Users/pengyong/Library/Tomcat8/bin/*.sh

  1. 檢視8080埠是否被佔用，使用kill PID解除佔用
lsof -i:8080
kill PID
複製程式碼
  1. 終端輸入startup.sh，如果出現下圖所示內容，則啟動成功

image

  1. 瀏覽器訪問http://localhost:8080/

image

  1. 關閉Tomcat使用shutdown.sh

至此，Tomcat的安裝基本上完成了，接下來安裝Jenkins

安裝Jenkins

1. 官網下載Jenkins war包，放入你的Tomcat/webapps目錄下

image

  1. 瀏覽器訪問http://localhost:8080/jenkins

  2. 初次訪問會讓你輸入密碼，可以根據路徑提示獲取密碼

image

如果檔案提示沒有許可權無法開啟，需要先修改許可權，如下：

image

  1. 輸入密碼，點選continue，進入外掛安裝頁面

image

  1. 點選推薦安裝，等待安裝完成

image

  1. 安裝成功後，進入建立Jenkins使用者介面，填寫完成點選Save and Continue

image

  1. 使用者建立完成後進入配置Jenkins URL介面，你可以將其修改成你期望的地址，然後點Save and Finish

image

  1. 到了這個介面，恭喜你設定Jenkins成功，但是我們還差最後一步：重啟Jenkins

image

  1. 瀏覽器訪問http://localhost:8080/jenkins/restart(你的jenkins地址+restart)，點選Yes重啟

image

有可能頁面一直展示loading，你可以嘗試直接訪問Jenkins主頁，如果出現這個頁面，Jenkins的安裝過程到此結束，你可以建立任務了。

image

  1. 外掛安裝：系統管理 - 外掛管理 - 可選外掛(Available)

Git parameter: 能夠實現選擇指定分支進行構建的功能 description setter: 用於生成預覽二維碼

至此準備工作已完成，讓我們開始構建小程式吧。

任務構建-配置

  1. 我們新建一個名為wechat的任務，選擇構建一個自由風格的軟體專案，點選ok進入到配置介面

image

  1. General配置選擇引數化構建過程

build_type用於選擇構建的是開發版、測試版還是生產版的小程式

image

branch用於選擇構建的分支（如果沒有這個選項，檢查Git parameter這個外掛有沒有安裝）

image

upload_desc和upload_version兩個文字引數分別用於在構建時填寫小程式的備註和版本

image

  1. 原始碼管理選擇Git，填上倉庫地址，分支這裡預設是master，改成我們構建時選擇的分支（注：本地生成的 id_rsa.pub 新增到git倉庫的ssh認證，否則jenkins無法連線git）

image

  1. 構建選擇執行shell

指令碼如下，可以按需修改：

echo -------------------------------------------------------
echo GIT_BRANCH: ${GIT_BRANCH}
echo -------------------------------------------------------
# 執行專案構建
yarn install 
if [ "$build_type" == "dev" ]
  then
  yarn run test
else
  yarn run $build_type
fi
# 開啟微信開發者工具
/Applications/wechatwebdevtools.app/Contents/Resources/app.nw/bin/cli -o
port=$(cat "/Users/pengyong/Library/Application Support/微信web開發者工具/Default/.ide")
echo "微信開發者工具執行在${port}埠"
return_code=$(curl -sL -w %{http_code} http://127.0.0.1:${port}/open)
if [ $return_code == 200 ]
  then
  echo "返回狀態碼200，devtool啟動成功！"
else
  echo "返回狀態碼${return_code}，devtool啟動失敗"
  exit 1
fi
if [ "$build_type" == "dev" ]
  then
  echo "釋出開發版！"
  # wget -o下載預覽二維碼，以build_id命名
  /usr/local/bin/wget -O $BUILD_ID.png http://127.0.0.1:${port}/preview?projectpath=/Users/pengyong/.jenkins/workspace/wechat
  echo "預覽成功！請掃描二維碼進入開發版！"
elif [ "$build_type" == 'prod' ] || [ "$build_type" == "test" ] || [ "$build_type" == "test:demo" ]
  then
  echo "準備上傳！"
  # 上傳到微信平臺
  /Applications/wechatwebdevtools.app/Contents/Resources/app.nw/bin/cli -u $upload_version@/Users/pengyong/.jenkins/workspace/wechat --upload-desc $upload_desc
  echo "上傳成功！請到微信小程式後臺設定體驗版或提交稽核！"
fi
複製程式碼
  1. 構建後操作選擇Set build description（沒有則檢查description setter外掛是否安裝）

image

這裡使用img標籤用於展示構建後的二維碼（注：埠號是你jenkins啟動的埠，任務名稱是我們任務構建這一步填寫的名稱，這裡我們是wechat）:

<img src="http://本機ip:埠/job/任務名稱/ws/${BUILD_ID}.png" alt="非開發版請到後臺預覽" width="200" height="200" /> <a href="http://本機ip:埠/job/任務名稱/ws/${BUILD_ID}.png" target="_blank">二維碼${BUILD_ID}</a>

至此我們的任務構建配置基本完成了

任務構建-預覽小程式

  1. 選擇Build with parameters，選擇你要構建的型別、分支等引數，這裡我們選擇的是開發版：

image

  1. 構建完成後發現二維碼以文字的形式展示，沒有展示圖片

image

解決的方法是在系統管理 -> 全域性安全配置 -> 標記格式器 -> 選擇Safe HTML

image

這時預覽二維碼就出來了，注意二維碼是有過期時間的（35min）

image

至此預覽二維碼的構建任務已經完成，我們嘗試上傳程式碼到微信平臺

任務構建-上傳程式碼

  1. 依然是選擇構建型別、分支，不同的是上傳程式碼需要填小程式版本號和專案備註，然後執行構建

image

  1. 到運營平臺或開發平臺檢視提交的版本

image

友情提示

  1. 開發者工具必須在登入狀態下進行預覽、上傳的操作，為了避免賬戶衝突，可以在Jenkins伺服器上使用專門的微信賬號進行登入，這個賬戶要開啟開發者和體驗者許可權，儘量不要使用開發者的賬號。
  2. 不要直接在官網下載Jenkins安裝執行，坑真的很多。

總結

目前小程式的釋出大多還是依賴開發者手動上傳，並且小程式持續整合還是有很多問題：開發者工具不支援Linux環境、無法通過命令列生成體驗版二維碼等等。但是持續整合這個方向還是值得大家研究的，開發和釋出要兩開花嘛...

參考：

相關推薦

手摸手聊聊小程式持續整合Jenkins

本文首發在我的github部落格 github.com/Pasoul/blog… ，感興趣的同學可以點個star，不要迷路哦~ 我們為什麼要持續整合？ 試想以下兩個場景： 場景一：你在開發新功能的時候，同事A找你要小程式體驗二維碼，於是你只能： git stash // 快取本地修改 git

手摸手教你微信小程式開發之自定義元件

前言  相信大家在開發小程式時會遇到某個功能多次使用的情況，比如彈出框。這個時候大家首先想到的是元件化開發，就是把彈出框封裝成一個元件，然後哪裡使用哪裡就呼叫，對，看來大家都是有思路的人，但是要怎樣實現呢。可能你會去看官方文件，但是微信的官方文件也是說的不太清楚，所以寫起來也

【手摸手，帶你搭建前後端分離商城系統】03 整合Spring Security token 實現方案，完成主業務登入

## 【手摸手，帶你搭建前後端分離商城系統】03 整合Spring Security token 實現方案，完成主業務登入 上節裡面，我們已經將基本的前端 `VUE + Element UI` 整合到了一起。並且通過 `axios` 傳送請求到後端API。 解決跨域問題後、成功從後端獲取到資料。 本小結

【轉】手摸手，帶你用vue擼後臺 系列二(登錄權限篇)

userinfo ogr abort 變化 再次 狀態碼 quest -o 監聽 前言 拖更有點嚴重，過了半個月才寫了第二篇教程。無奈自己是一個業務猿，每天被我司的產品虐的死去活來，之前又病了一下休息了幾天，大家見諒。 進入正題，做後臺項目區別於做其它的項目，權限驗證與

手摸手教你自己動手實現一個前端路由

前言 用過現代前端框架的同學，對前端路由一定不陌生, vue, react, angular 都有自己的 router, 那麼你對 router 的工作原理了解嗎？ 如果還不瞭解, 那麼請跟我一起來手寫一個簡單的前端路由, 順便了解一下. 實現路由的2種方式 hash模式

手摸手帶你部署git伺服器實現自動釋出程式碼

前段趁著活動買了個騰訊雲伺服器，一直沒抽時間去折騰，最近才開始部署了一個自己專屬的git倉庫，實現程式碼自動釋出部署功能。（我也想成為努力向上，積極進取的有志青年啊！）文章的內容基本都是參考自谷歌搜尋，然後按我的思路重新整理一遍，既是為了分享也是為了鞏固知識。 我也是第一次折騰伺服器，前期部署就

手摸手，帶你實現程式碼自動部署

為什麼？ 為什麼要實現自動部署？ 在2個月的時間裡，一直都在忙著整理部落格，每一個程式設計師都有一個部落格夢（當然也不排除有些是沒有的），我先後使用過各種部落格系統: vuepress react-static jekyll hexo ... 這些都因為前前後後的原因，

手摸手教你使用WebSocket[其實WebSocket也不難]

在本篇文章之前，WebSocket很多人聽說過，沒見過，沒用過，以為是個很高大上的技術，實際上這個技術並不神祕，可以說是個很容易就能掌握的技術，希望在看完本文之後，馬上把文中的栗子拿出來自己試一試，實踐出真知。 游泳、健身瞭解一下：部落格、前端積累文件、公眾

手摸手帶你玩轉Xcode Extensions

題圖：from imgur 事情是這樣的前段時間看到，E神寫了個新玩具叫Code Friend很酷炫，私下裡給E神說拿來推廣讓iOSTips的讀者體驗一番，E神說目前功能還不完善，等再牛逼一點再拿來分享，然後就有了接下來的分享。 有沒有這樣的體驗，我們經常要開啟終端，跳轉到當前工程目錄，

手摸手教你寫ShineButton動畫

移動端訪問不佳，請訪問我的個人部落格 前段時間在github上看見一個非常nice的動畫效果，可惜是安卓的，想著用swift寫一個iOS版的，下下來原始碼研究了一下，下面是我寫程式碼的心路歷程 分析動畫過程 剛開始看的時候感覺這個動畫很

手摸手，帶你用vue擼後臺 系列二(登入許可權篇)

前言 拖更有點嚴重，過了半個月才寫了第二篇教程。無奈自己是一個業務猿，每天被我司的產品虐的死去活來，之前又病了一下休息了幾天，大家見諒。 進入正題，做後臺專案區別於做其它的專案，許可權驗證與安全性是非常重要的，可以說是一個後臺專案一開始就必須考慮和搭建的基礎核心功能

你討厭寫selector背景了嗎？手摸手教你封裝個控制元件！

前段時間專案裡要寫好幾個按下去狀態變化的button, 於是在drawable資料夾裡寫了一堆檔案， 想想好煩啊， 也是浪費時間，搞了一堆檔案，還要起名，真心煩！ 一氣之下， 一勞永逸， 寫一個控制元件，各種屬性程式碼xml配置或者程式碼設定。因此也就有了St

手摸手，帶你用合理的姿勢使用 webpack 4（上）

（點選上方公眾號，可快速關注）作者：華爾街見聞技術團隊 - 花褲衩segmentfault.co

手摸手，帶你用vue實現後臺管理許可權系統及頂欄三級選單顯示

手摸手，帶你用vue實現後臺管理許可權系統及頂欄三級選單顯示 效果演示地址 專案demo展示 重要功能總結 許可權功能的實現 許可權路由思路： 根據使用者登入的roles資訊與路由中配置的roles資訊進行比較過濾，生成可以訪問的路由表，並通過router.addRoutes(store.gett

Spring Boot2(十二)：手摸手教你搭建Shiro安全框架

一、前言 SpringBoot+Shiro+Mybatis完成的。 之前看了一位小夥伴的Shiro教程，跟著做了，遇到蠻多坑的(´இ皿இ｀) 修改整理了一下，成功跑起來了。可以通過postman進行測試 不多比比∠( ᐛ 」∠)＿，直接上原始碼：https://github.com/niaobulashi/s

原創 | 手摸手帶您學會 Elasticsearch 單機、叢集、外掛安裝(圖文教程)

歡迎關注筆者的公眾號: 小哈學Java, 每日推送 Java 領域乾貨文章，關注即免費無套路附送 100G 海量學習、面試資源喲！！ 個人網站: https://www.exception.site/essay/elasticsearch-single-cluster-plugin-install 目

根據vue-cli手摸手實現一個自己的腳手架

故事背景 身為一個入門前端七個月的小菜雞，在我入門前端的第一天就接觸到了vue，並且死皮賴臉的跟他打了這麼久的交到，還記得第一次用vue init webpack 這句命令一下生成一個模板的時候那種心情，當時我就想，要是自己也能寫一個的話，那會是灰常吃雞的吧 o(￣▽￣)ブ,所以說今天我們也要簡單實現一個自

圖解AQS的設計與實現，手摸手帶你實現一把互斥鎖！

AQS是併發程式設計中非常重要的概念，它是juc包下的許多併發工具類，如CountdownLatch，CyclicBarrier，Semaphore 和鎖, 如ReentrantLock， ReaderWriterLock的實現基礎，提供了一個基於int狀態碼和佇列來實現的併發框架。本文將對AQS框架的幾個重

淺談Java中的Condition條件佇列，手摸手帶你實現一個阻塞佇列！

條件佇列是什麼？可能很多人和我一樣答不出來，不過今天終於搞清楚了！ 什麼是條件佇列 條件佇列：當某個執行緒呼叫了wait方法，或者通過Condition物件呼叫了await相關方法，執行緒就會進入阻塞狀態，並加入到對應條件佇列中。 在等待喚醒機制相關文章中我們提到了條件佇列，即當物件獲取到同步鎖之後，如果呼叫

基於七牛雲物件儲存,搭建一個自己專屬的極簡Web圖床應用(手摸手的註釋講解核心部分的實現原理)

一個極簡的Web圖床應用,支援複製貼上與拖拽上傳圖片 1.開發緣由 日常使用Vs Code編寫markdown筆記與部落格文章時,在文章中插入圖片時發現非常不便 使用本地檔案編寫相對路徑---沒法直接複製貼上到其它地方 使用第三方的圖床---需要登入賬號(還是放到自己"口袋"裡放心) vs code內建外掛