在GitHub Actions上進行Flutter 的測試和部署

GitHub Actions可輕鬆實現全部軟件工做流程的自動化。直接從GitHub構建，測試和部署代碼。使代碼審查，分支機構管理和問題分類工做按您想要的方式進行。

記得在19年末的時候，我看到了Run Flutter Driver tests on GitHub Actions這篇文章，隨即就開始在flutter_deer中去使用，由於當時項目中恰好就有寫好的集成測試。

當時在flutter_deer中會有許多issue都是關於項目運行的問題，許多同窗反映運行不起來，各類報錯。說實話沒法肯定是環境問題仍是自己代碼問題。有了GitHub Actions這個工具，就能夠在GitHub上構建運行測試，只要測試經過，能夠保證在代碼在相應的flutter版本上運行沒有問題。

GitHub Actions的功能很是強大，同時提供有actions市場，咱們在上面能夠搜索使用他人寫好的各類功能的 action。水平有限，這裏我只作簡單的使用介紹，詳細能夠看官方文檔。

1.添加GitHub Actions到項目中

首先在項目中添加.github / workflows目錄。而後建立.yml格式的工做流文件。好比：flutter-drive.yml。它的基礎格式以下：

# workflow 的名稱
name: flutter_deer driver

# 觸發 workflow 的條件
on: [push, pull_request]

# workflow執行的一項或多項任務
jobs:
 ...

觸發workflow 的條件也能夠根據狀況定製。好比指定推送到某一分支、指定某些文件修改時觸發。例如：

# push 提交中修改`pubspec.yaml`觸發
on:
  push:
    paths:
      - 'pubspec.yaml'
 ...

詳細見文檔[Workflow syntax for GitHub Actions
](https://docs.github.com/en/ac...

2.編寫任務

任務的結構以下：

簡單解釋就是jobs下是job（任務），job下是step（步驟），step下是action（動做）。

下面舉一個執行flutter單元測試的例子：

jobs:
  # 任務id，必須是jobs下惟一的
  accessibility_test: 
    # 運行所須要的虛擬機環境。例如 windows-2019, macOS-latest、macOS-10.14
    runs-on: macos-latest
    # job的運行步驟
    steps:
      # 便於獲取flutter源碼
      # https://github.com/actions/checkout
      - uses: actions/checkout@v2
      # 設置flutter環境
      # https://github.com/marketplace/actions/flutter-action
      - uses: subosito/flutter-action@v1
        with:
          flutter-version: '2.0.2'
          channel: 'stable'  # or: 'dev' or 'beta'
        # 運行的命令
      - run: "flutter pub get"
        # 步驟名稱
      - name: "Run Flutter Accessibility Tests"
        run: "flutter test test/accessibility_test.dart"

上面的註釋解釋的很清楚了，其中用到了兩個action，使得整個腳本的書寫簡單了不少。下面再貼上幾個flutter_deer中用到的job，基本能夠無腦使用，只需修改本身的運行命令便可。

3.實例

在iOS設備運行集成測試

drive_ios:
    # 建立一個構建矩陣
    strategy:
      # 設置一組虛擬環境的不一樣配置
      matrix:
        device:
          - "iPhone 8 (14.4)"
          - "iPhone 11 Pro Max (14.4)"
      # 設置爲true時，若是任何矩陣job失敗，GitHub將取消全部正在進行的job。
      fail-fast: false
    runs-on: macOS-latest
    steps:
      - name: "List all simulators"
        run: "xcrun instruments -s"
      - name: "Start Simulator"
        run: |
          UDID=$(
            xcrun instruments -s |
            awk \
              -F ' *[][]' \
              -v 'device=${{ matrix.device }}' \
              '$1 == device { print $2 }'
          )
          xcrun simctl boot "${UDID:?No Simulator with this name found}"
      - uses: actions/checkout@v2
      - uses: subosito/flutter-action@v1
        with:
          flutter-version: '2.0.2' # 指定flutter環境
          channel: 'stable'
      - name: "Run Flutter Driver tests"
        run: "flutter drive --target=test_driver/driver.dart"

在Android設備運行集成測試

drive_android:
    runs-on: macos-latest
    strategy:
      matrix:
        api-level: [21, 29]
        target: [default]
    steps:
      - uses: actions/checkout@v2
      - uses: subosito/flutter-action@v1
        with:
          flutter-version: '2.0.2'
          channel: 'stable'
      - name: "Run Flutter Driver tests"
        # 用於安裝，配置和運行Android模擬器的操做（僅適用於Mac OS）
        # https://github.com/marketplace/actions/android-emulator-runner
        uses: reactivecircus/android-emulator-runner@v2
        with:
          api-level: ${{ matrix.api-level }}
          target: ${{ matrix.target }}
          arch: x86_64
          profile: Nexus 6
          script: "flutter drive --target=test_driver/driver.dart"

Flutter Web的構建及部署

web_build_and_deploy:
    runs-on: macos-latest
    steps:
      - uses: actions/checkout@v2.3.1
      - uses: subosito/flutter-action@v1
        with:
          flutter-version: '2.0.2'
          channel: 'stable'
      - name: "Web Build 🔧"
        run: |
          flutter pub get
          flutter build web
      - name: "Web Deploy 🚀"
        # https://github.com/JamesIves/github-pages-deploy-action
        uses: JamesIves/github-pages-deploy-action@4.0.0
        with:
          token: '${{ secrets.GITHUB_TOKEN }}'
          branch: gh-pages
          folder: build/web

最近flutter發佈了2.0，在stable渠道就能夠構建Web了。使用這個job咱們就能夠輕鬆將本身的Web版代碼部署在Github的page上了。

這裏須要注意，部署完成後，須要咱們去設置GitHub Pages後才能夠訪問。設置位置在項目主頁的Settings菜單裏。

4. 其餘

1. 當咱們推送代碼到GitHub上時，任務就會自動執行，詳細信息能夠在項目的Actions菜單中看到。
   
   上圖就是其中一次的執行結果，能夠看到有成功的、取消的、失敗的。

1. 咱們能夠建立workflows執行狀態的徽章，添加到項目的Markdown中。
   
   展現效果：
   

---

固然用法也不止我上面說到的這些，你也能夠作打包、自動發佈這些功能，也不止Flutter能夠用到。一切看你的需求。最後奉上本篇的完整代碼。

最後的最後，若是本篇對你有所幫助，不妨點贊收藏一波。

5.參考

• Run Flutter Driver tests on GitHub Actions
• CI_CD_Flutter_Demo