FlutterでCI(CircleCI編)

[前回、Github ActionsでCIの記事](https://qiita.com/kasa_le/items/d57ca63f19db0b352790)を書きましたが、やっぱりテストレポートが見づらいので、CircleCIでも回してみることにしました。

# 環境

|ツールなど|バージョンなど|
|:--|:--|
| MacBook Air Early2015|macOS Mojave 10.14.5|
|Android Studio |3.6.1|
|Java |1.8.0_131|
|Flutter|1.12.13+hotfix.5|
|Dart |2.7.0|

Flutterのバージョンが訳あって最新版ではありません。
(恐らく、上記がmacOS Mojaveで動かせる最後のバージョンです)
今回、この点で苦労することになりました(汗)

# 1.ワークフローを作成する

CircleCIのダッシュボードから、プロジェクトを新規作成し、対象のリポジトリを選んで[Setup Project]をクリックします。

|![circleci_setup_project.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103886/a0c89f65-ab33-cd4a-073f-fefbc1715ce9.png)|
|:--|

# Hello Worldを選ぶ

デフォルトで**Hello World**が選ばれているはずですが、なっていない場合は、リストから探して選択して下さい。

|![circleci_start_build.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103886/1e0c89c8-8f9c-8062-44e9-4b855f6740ad.png)|
|:--|

[Start Building]をクリックすると、以下のようなポップアップが出ます。

|![circle_ci_add_config.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103886/ca8f3abb-c281-4195-f48b-477f5f4d16fd.png)|
|:--|

いったん、ブランチが作成されますがそのまま[Add Config]をクリックします。
自動でビルドが開始され、成功するはずです。

# yamlを編集する

[Flutter用のOrb](https://circleci.com/orbs/registry/orb/checkmoney/flutter)を作って下さっている方がいますが、FlutterSDKのバージョンが私の場合、合わないため、自分でDockerイメージを引っ張ってくることにしました。

上記の[Flutter用のOrbのコード](https://circleci.com/orbs/registry/orb/checkmoney/flutter#orb-source)を参考に、

```yaml
    docker:
      - image: cirrusci/flutter:v1.12.13+hotfix.5
```

としようとしたんですが、まずはちゃんとそのバージョンのイメージがあるか調べようと思い、[Docker Hubの作者さんのページ](https://hub.docker.com/r/cirrusci/flutter/tags)を見に行ったら、どうも、ありません。

バージョンは合ってないとさすがにまずいだろう・・・ということで、他のイメージを探し、こちらに発見しました。

[oursky/flutter:v1.12.13-hotfix.5](https://hub.docker.com/layers/oursky/flutter/v1.12.13-hotfix.5/images/sha256-c4429bff513d674c26738dae755cd6e0c62dfeca8b3caf26cd924facd9657fc7?context=explore)

ありがたく使わせて頂きます！

yamlはこうなりました。

```yaml:.circleci/config.yml
version: 2.1

orbs:
 slack: circleci/slack@3.4.2

jobs:
  build:
    docker:
      - image: oursky/flutter:v1.12.13-hotfix.5
    working_directory: ~/repo
    steps:
      - checkout
      - run:
          name: flutter setting
          command: |
            flutter pub get
            flutter pub global activate junitreport
            mkdir -p ./test-reports/ 2>/dev/null
      - run:
          name: Test
          command: |
            export PATH="$PATH":"/flutter/.pub-cache/bin"
            flutter test --machine | tojunit --output ./test-reports/TEST-results.xml
      - store_artifacts:
          when: always
          path: test-reports
          destination: test-reports
      - store_test_results:
          path: test-reports
      - slack/status:
          success_message: ':circleci-pass: $CIRCLE_BRANCH のビルドが完了しました\n:github_octocat: User：$CIRCLE_USERNAME'
          failure_message: ':circleci-fail: $CIRCLE_BRANCH のビルドが失敗しました\n:github_octocat: User：$CIRCLE_USERNAME'
          webhook: '${SLACK_WEBHOOK}'
          
workflows:
  version: 2
  build-deploy:
    jobs:
      - build:
          filters:
            branches:
              only: develop
```

以前作成した`test.sh`は使わないことにしました。CircleCIは、xmlのテスト結果レポートがページ上で見られるので、わざわざhtmlにしてやる必要が無いからですね。
というわけで、[junitreport](https://pub.dev/packages/junitreport)だけ使ってxmlにコンバートするのだけやっています。

後は特に複雑なことをしていないかと思います。

# 感想

Github ActionsとCircle CIで二重にテストが走るようになり、Slack通知が倍！
うるさい(笑)

で、ここまで書いた後で、Codemagicというのを見つけて、なんと**Flutter専用**のCI/CDツールなのだとか！？

Codemagic
https://codemagic.io/start/

Codemagicの設定手順＆ハマりそうなところをまとめてみた
https://qiita.com/yukitaka13-1110/items/2b4fb8a25c1559f3e278

500ビルド/月まで無料なんて、太っ腹すぎない？？

CircleCIは、WebのUIが新旧の遷移が入り交じってて正直今は使いづらいし、ちょっと試してみよう・・・

ということで、次回は、CodemagicでCI編(予定)となります(^^