持續集成-UniApp

一個基礎的APP構建腳本，大佬請無視本文。作者才疏學淺，只能重復嘗試總結經驗。
FROM 假的前端工程師

背景

UniApp官方開發工具HBX（HbuilderX簡稱）本地打包需要手動導出工程文件然后對於Android項目一頓操作。

回想起之前測試追着我這個開發一直要安裝包的場景（之前利用Jenkins對IOS平台項目進行持續集成，但是遠不能到達提交代碼就可以自動打包生成一個APP的地步）

實現的效果

1. 提交代碼即可打包（自動流水線操作）
2. 支持在gitlab-ci.yml配置打包的證書
3. 支持定義包名
4. 支持自定義APP名稱

流程階段

按照傳統的思路，即：

1. HbuilderX生成APP資源文件
2. 按照模版生成原生工程替換文件
3. 生成文件替換原生工程文件
4. Android Studio打包

其他思路是借助fastlane之類的自動化打包工具

部署示例圖

NPM 緩存可選

gitlab-ci.yml文件展示

stages:
    - build_uniapp_file
    - rewrite_android_file
    - replace_android_file
    - build_app

variables:
    BUILD_TYPE: app-plus # 目前該流程僅可打包APP
    PackageName: com.harrycode.testbuild23232 # APP包名
    APPID: __UNI__APPID #UNI_APPID
    APPNAME: 測試 # 軟件顯示的名字
    CerPwd: 123456 # 用於打包的證書密碼
    CerAlias: app  # 打包證書的別名
    CerAliasPwd: 123456  # 打包哦證書別名的密碼
    CerPath: ../../../cer/app.keystore # 打包證書的位置，不建議修改，改位置為提交項目的根目錄的cer文件夾

cache:
    key: ${CI_COMMIT_SHA}
    paths:
        - build-dist/           # UNIAPP app-plus 生成文件
        - android-files/        # 生成的Android文件（部分）
        - android-temp/HBuilder-Hello/ # Android工程文件（可下載后手動操作）

Build source files:
    image: 192.168.1.178:5555/uni-node:v3 # 該鏡像是node+vue cli+ UniApp項目模板工程精簡文件（詳見DockerHub）
    stage: build_uniapp_file
    script:
        - opath=$(pwd)
        - cp -rf . /buildwork/src
        - cd /buildwork
        - rm src/package.json
        - mv src/build.package.json package.json
        # - set SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ && npm install node-sass  # 由於為了加速打包過程，鏡像安裝了node-sass
        - npm update && npm install &&  npm run build:$BUILD_TYPE
        - mkdir $opath/build-dist/ -p
        - cp -r /buildwork/dist/build/app-plus/* $opath/build-dist/
    artifacts: 
        paths: 
            - build-dist/

change files as wish:
  image:
    name: 192.168.1.178:5555/uniappbuildhelper:latest # 該鏡像為Android文件生成工具鏡詳見DockerHbu（需要配置更多參數需要修改這個文件后，在下一步復制到對應的位置）
  stage: rewrite_android_file
  script:
    - opath=$(pwd)
    - cd /app
    - dotnet UniAppBuildHelper.dll
    - \cp -r /app/dist/. $opath/android-files
  artifacts: 
        paths: 
          - android-files/  # 本階段產物，自定義的部分配置文件

change file in Android Project:
    image: busybox
    stage: replace_android_file # 本階段使用自定義生成的文件替換進入Android工程
    script:
        - opath=$(pwd)
        - source_file_path=$opath/android-files
        - uni_source=$(pwd)/build-dist
        - mkdir android-temp && cd android-temp
        - wget http://192.168.1.178:9090/HBuilder-Hello.zip
        - unzip HBuilder-Hello.zip
        - project_src=$(pwd)/HBuilder-Hello
        - \cp $source_file_path/AndroidManifest.xml $project_src/app/src/main
        - rm -rf $project_src/app/src/main/java/io
        # 替換包名為文件
        - java_dir_path=$(echo "$PackageName"| sed "s/\./\//g")
        - mkdir $project_src/app/src/main/java/$java_dir_path -p
        # WXEntryActivity.java
        - \cp $source_file_path/WXEntryActivity.java $project_src/app/src/main/java/$java_dir_path
        # WXPayEntryActivity.java
        - \cp $source_file_path/WXPayEntryActivity.java $project_src/app/src/main/java/$java_dir_path
        # dcloud_control.xml
        - \cp $source_file_path/dcloud_control.xml $project_src/app/src/main/assets/data
        # build.gradle
        - \cp $source_file_path/build.gradle $project_src/app
        # strings.xml
        - \cp $source_file_path/strings.xml $project_src/app/src/main/res/values
        # uniapp files
        - rm -rf $project_src/app/src/main/assets/apps/*
        - mkdir  $project_src/app/src/main/assets/apps/$APPID/www -p
        - \cp -r $uni_source/. $project_src/app/src/main/assets/apps/$APPID/www
    artifacts: 
        paths: 
            - android-temp/HBuilder-Hello/ # 本階段產物為替換文件后的Android工程文件

build_app:
    stage: build_app
    image: 192.168.1.178:5555/android-build-box:1.15.0
    before_script: # 預操作安裝gradle，請放置與內網的nginx靜態服務器加速下載
        - wget http://192.168.1.178:9090/gradle-5.4.1-bin.zip
        - mkdir /opt/gradle -p
        - unzip -d /opt/gradle gradle-5.4.1-bin.zip
        - export PATH=/opt/gradle/gradle-5.4.1/bin:$PATH
    script: # 進行打包
        - mkdir android-temp/HBuilder-Hello/app/build/outputs/apk/ -p
        - opath=$(pwd)
        - cd android-temp/HBuilder-Hello/
        - gradle wrapper
        - bash ./gradlew assembleRelease
        - \cp -r $opath/android-temp/HBuilder-Hello/app/build/outputs/apk/. $opath/outputs
        - rm -rf android-temp/
    artifacts: 
        paths: 
            - outputs/ # 本階段的產物為Release文件夾及其下的APP安裝包
    

效果

提交目錄結構

注意：build.package.json為NPM版本生成的package.json，如需使用NPM，新需要的模塊構建時請同步添加dependencies與devDependencies下的依賴。本目錄下的cer文件夾為打包UniApp的證書（證書路徑與定義的變量CerPath有關，文中的路徑為提交文件的本目錄下的cer）。

參考命令

#創建容器
docker run -d --name gitlab-runner-12.10.1 --restart always -v ~/gitlab-runner/config/:/etc/gitlab-runner/  -v /var/run/docker.sock:/var/run/docker.sock  gitlab/gitlab-runner:latest

#進入容器后執行注冊Runner
sudo gitlab-runner register -n  --url=GitLb地址 --registration-token=GitlabRunnerToken自行獲取 --executor=docker --description="HP-Mini-PC" --docker-image="docker:19.03.8" --docker-volumes /var/run/docker.sock:/var/run/docker.sock  --locked=false

其他事項

1. 本文使用的鏡像將盡快加入DockerHub
2. 本文的Gitlab-Runner均運行於Docker環境，Gitlab也運行在Docker上。
3. 本文Gitlab-Runner容器通過官方文檔中的掛載/var/run/docker.sock的方式實現。
4. 本文已經經過構建驗證，撰寫本文期間構建次數為182次。
5. 簡易Android文件生成器源碼 https://gitee.com/harry7988/uniappbuildhelper