yii.
← Writing
Flutter 技術 · · 4 min read

Flutter CICD 使用 Gitlab Runner 和 App Center 實作 part.2

這篇寫於 2022 年。工具和 API 變化很快，部分步驟可能已經不適用。

原來 CICD 這麼有幫助，快來學習吧～

上一篇我們進行了 Apple、Gitlab Runner、iOS、App Center 設定，完成所需的前置作業。而本文是很重要的一環，要撰寫機器運行的工作內容，要請它幫我們處理一些事情，最後將APP部署到指定平台，讓大家可以下載使用。

Flutter CICD 使用 Gitlab Runner 和 App Center 實作 part.1原來 CICD 這麼有幫助，快來學習吧～yii · writing

AppCenter CLI 設定#

必須在運行 Runner 前準備好 AppCenter CLI，在進行部署時需透過指令存取 App Center

安裝#

npm install --location=global appcenter-clib

GitHub - microsoft/appcenter-cli: Command-line Interface (CLI) for Visual Studio App CenterVisual Studio App Center command line interface (CLI) is a unified tool for running App Center services from the…github.com

Gitlab Runner 運行文件撰寫#

需要在 Flutter 專案根目錄新建 .gitlab-ci.yml，描述每個任務的內容與流程

相關參數：

  • extends → 繼承 Job，使用它的東西
  • stage → 執行階段，一個易讀的名稱，可以多個 Job 綁定相同 stage
  • variables → 使用到的變數
  • dependencies → 需要依賴的 Job 運行成功後才會繼續，可以使用它們的東西，例如：artifacts 檔案
  • rule → 設定執行條件
  • before_script → 執行 script 之前，做一些前置處理
  • script → 執行主要 script
  • after_script → 完成 script 之後，做一些收尾的動作
  • artifacts → 生產物描述，以 path 聲明檔案的路徑
  • tags → Runner 標籤。可以指定運行某些 Runner，允許他們可以跑這個工作，根據當初建立時給予的 tag

Job: flutter_test，測試#

flutter_test: #工作名稱
  stage: test #工作類型
  script:
    - flutter test
  tags:
    - flutter

Job: flutter_build_android，建置 Android#

flutter_build_android:
  stage: build
  dependencies:
    - flutter_test
  before_script:
    #下載並取得套件
    - flutter packages get
    #刪除緩存，清出空間
    - flutter clean
  script:
    #創建一個未簽署的.apk安裝檔，可以給任何Android設備安裝使用
    - flutter build apk
  after_script:
    #更新檔案路徑與名稱，這邊看個人需求
    - mv build/app/outputs/apk/release/app-release.apk ./android-release.apk
  artifacts:
    #聲明檔案路徑
    paths:
      - ./android-release.apk
  tags:
    #指定運行的Runner，不一定要設置
    - flutter

Job: flutter_build_ios，建置 iOS#

flutter_build_ios:
  stage: build
 dependencies:
    - flutter_test
 variables:
  FLUTTER_PROJECT_NAME: "cicdtest02"
    WORKSPACE_PATH: "ios/Runner.xcworkspace"
    ARCHIVE_PATH: "ios/RunnerArchive.xcarchive"
    EXPORT_OPTIONS_PATH: "ios/ExportOptions.plist"
    FINAL_EXPORT_PATH: "./build/ios"
    FILE_NAME: "ios-release.ipa"
  before_script:
    - flutter packages get
    - flutter clean
  script:
    #執行iOS建置
    - flutter build ios
    #執行iOS存擋
    - xcodebuild clean archive -workspace $WORKSPACE_PATH -scheme Runner -archivePath $ARCHIVE_PATH -destination "generic/platform=iOS"
    #執行檔案簽署並產出.ipa安裝檔
    - xcodebuild -exportArchive -archivePath $ARCHIVE_PATH -exportOptionsPlist $EXPORT_OPTIONS_PATH -exportPath $FINAL_EXPORT_PATH
  after_script:
    - mv $FINAL_EXPORT_PATH/$FLUTTER_PROJECT_NAME.ipa ./$FILE_NAME
  artifacts:
    paths:
      - ./$FILE_NAME
  tags:
    - flutter

Job: deploy_android，部署 Android#

deploy_android:
  stage: deploy
  dependencies:
    #依賴stage(flutter_build_android)，使用它產出的artifacts檔案
    - flutter_build_android
variables:
  APP_CENTER_USER_NAME: "yii"
  APP_CENTER_PROJECT_NAME: "Test-Android"
  APP_CENTER_GROUP_NAME: "Collaborators"
  FILE_PATH: "./android-release.apk"
before_script:
  #透過API token登入App Center
  - appcenter login --token $APP_CENTER_API_TOKEN
  #設置App Center要部署的專案資訊，username、project需修改成自己的資料
  - appcenter apps set-current $APP_CENTER_USER_NAME/$APP_CENTER_PROJECT_NAME
script:
  #發布Android的apk安裝檔到App center
  - appcenter distribute release --file $FILE_PATH --group $APP_CENTER_GROUP_NAME
tags:
  - flutter

Job: deploy_ios，部署 iOS#

deploy_ios:
  stage: deploy
  dependencies:
    #依賴stage(flutter_build_ios)，使用它產出的artifacts檔案
    - flutter_build_ios
  variables:
    APP_CENTER_USER_NAME: "yii"
    APP_CENTER_PROJECT_NAME: "Test-iOS"
    APP_CENTER_GROUP_NAME: "Heros"
    FILE_PATH: "./ios-release.ipa"
  before_script:
    - appcenter login --token $APP_CENTER_API_TOKEN
    - appcenter apps set-current $APP_CENTER_USER_NAME/$APP_CENTER_PROJECT_NAME
  script:
    #發布iOS的ipa安裝檔到App center
    - appcenter distribute release --file $FILE_PATH --group $APP_CENTER_GROUP_NAME
  tags:
    - flutter

聲明要執行哪些 stage#

本文範例的運行流程為

  1. test 測試
  2. build 建置
  3. deploy 部署

開始 Gitlab Runner CICD#

開啟 Terminal，執行 Runner，會持續檢查Repo是否有更新

提醒：因為不是 root 執行，有些目錄權限可能需要設定為777或755

gitlab-runner run

在 Gitlab 上的 Runner 頁會顯示運行狀態

Repo 更新後，Runner 就會開始執行 gtltab-ci.yml 設定好的 CICD 流程。當然大部分情境應該會設置指定的 tag，才不會導致每次 push 都建置新版。

完成 CICD#

檢查工作是否都有綠色勾勾，並顯示 passed

雙平台部署成功

群組內的成員會收到App新版通知，方便安裝使用

Gitlab Runner 其他設定#

移除 Runer#

gitlab-runner verify --delete -t <token> -u https://gitlab.com/

細部調整#

檔案路徑：~/.gitlab-runner/config.toml

  • concurrent → 設置同時可運行幾個 Runner
  • check_interval → 設置多久檢查一次是否有新的 Job 要執行，單位：秒

到這邊 Flutter CICD 就完成了，不會很難對吧，我只是提供一種實作方式，不要太侷限於文中的每個設定與細節，過程中你想要做其他事情，另起一些服務也可以，取決於你的需求和專案。

有什麼 CICD 的想法也能跟我分享和討論，我很樂於吸收新知，希望有幫助到大家～

其他文章#

關於我#

贊助#

謝謝你花費時間看完，非常感謝！

如果覺得文章不錯的話可以贊助，讓我有更多動力和熱情分享學習紀錄和生活！請我喝一杯咖啡吧～

https://www.buymeacoffee.com/yiichenhi

最後#

希望有幫助到你/妳，歡迎追蹤我，方便瀏覽最新的文章～

本文原刊登於 Medium。