FlutterアプリのiOSビルドとアーカイブを CircleCI で自動化してみた / Tried automating the iOS build and archive of the Flutter app with CircleCI

ラクスR&D Meetup - Flutter での登壇資料です。
https://rakus.connpass.com/event/220540/

Transcript

1. FlutterアプリのiOSビルドとアーカイブを
   CircleCI で自動化してみた
   岡部恭平 / CO-OP Sapporo
   2021.9.8 / ラクスR&D Meetup - Flutter
   

   View Slide

2. 自己紹介
   生活協同組合コープさっぽろ
   デジタル推進本部 システム部
   AWS・エンジニアリングチーム　エンジニア
   岡部恭平 @okabeeeat
   Webアプリケーションエンジニア
   

   View Slide

3. コープさっぽろDX
   引用: https://dx.sapporo.coop/
   

   View Slide

4. 最近やっていること
   ● 社内ツール開発
   ○ Saasと社内システムの連携
   ■ Node.js + TypeScript
   ■ AWSによるサーバレスな構成
   ● Developer eXperience の推進
   ○ CI/CDの構築、開発フローの整備、bot開発など
   

   View Slide

5. 目次
   ● 背景
   ● 目的
   ● 方法
   ● 構成
   ● まとめ
   

   View Slide

6. 背景
   ・・・
   引用: https://dx.sapporo.coop/n/n23376af197fa
   

   View Slide

7. 背景
   ・・・
   引用: https://dx.sapporo.coop/n/n23376af197fa
   

   View Slide

8. Flutter のプロジェクトが
   始まったっぽい
   

   View Slide

9. そんな中
   ビルドが辛いので自動化し
   たい！
   Aさんはビルドできるの
   に私はできません
   エンジニア
   なるほどね
   私
   

   View Slide

10. 目的
    CI/CD環境を構築し、ビルドの自動化と属
    人化の解消を実現する
    

    View Slide

11. 作業スタート時

    まぁアレだろ! Ruby on Rails や Vue CLI アプリのCI/CD
    環境と似た感じなものを作れば良いんでしょ！
    主な経験言語
    Ruby, JavaScript, PHP
    

    View Slide

12. 数時間後...

    証明書って何？
    Apple Developer?
    Bitrise? Codemagic?
    CircleCIじゃダメなの？
    iOSビルドとアーカイブって何
    が違うの？
    そもそも Dart 触ったこと無
    かったわ
    

    View Slide

13. 内容を整理する
    ● iOSアプリのビルド及び配布をするためには以下の工程が必要
    ○ Apple Developer アカウントの作成
    ○ ビルド
    ○ 証明書の作成・設定
    ○ アーカイブ
    ○ 配布
    ● Flutterアプリ開発でよく使われてそうなCI/CDサービス
    ○ Bitrise
    ○ Codemagic
    ○ GitHub Actions
    ○ Cirrus CI(Dockerイメージでよく見かける)
    ● CircleCI でもCI/CD環境を構築する方法はある(最近有料化したばっかりでして...)
    

    View Slide

14. そこからさらに調査...
    

    View Slide

15. 方法
    良さそうな方法が2つに絞られた
    ①CircleCI + fastlane
    ②CircleCI + Apple Store Connect API + Codemagic CLI tools
    

    View Slide

16. ①CircleCI + fastlane
    ● 公式で紹介されている方法
    ● Apple Developerのアカウントが必要
    ● 証明書無しでiOSビルド → fastlane で証明書の生成・取得・設定
    し、アーカイブを実行
    ● 証明書を管理するためのリポジトリが必要
    ○ え？証明書のためだけにリポジトリが必要なの!?
    fastlane とは?
    ● iOS/Android のビルドやリリース作業を自動するツール
    

    View Slide

17. 公式: https://flutter.dev/docs/deployment/ios#create-a-build-archive-with-codemagic-cli-tools
    ②CircleCI + Apple Store Connect API + Codemagic CLI tools
    ● 公式に書いてある方法を CircleCI で実行する方法
    ● Codemagic CLI tools + Apple Store Connect API で 証明書の取
    得・設定をする
    ○ Codemagic CLI tools 自体は無料で使える
    ● 「flutter build ipa」でアーカイブまで一気に実行
    ● 証明書を管理するためのリポジトリが不要になりそう
    

    View Slide

18. どっちにしたの？
    ①CircleCI + fastlane
    ②CircleCI + Apple Store Connect API + Codemagic CLI tools
    

    View Slide

19. 本当は②にしたかった...

    ● ローカル環境(macOS)では成功
    ● CircleCI のコンテナデバッグで検証
    ○ macOS(xcode: 12.5.1)で失敗
    ● 惜しいところまでいったが時間切れに
    ○ あと少し時間があったら..(言い訳)
    検証用に仮で置いている
    

    (現在は削除済み)

    

    View Slide

20. 気を取り直して①で進める
    

    View Slide

21. 構成① 証明書管理リポジトリ
    

    View Slide

22. 構成② iOSビルド構成
    

    View Slide

23. サンプルコード等
    後日ブログ等にまとめます󰢛
    

    View Slide

24. 結果
    無事自動化できた🎉
    

    View Slide

25. 結果
    ● ビルドが自動化された
    ○ 本来の開発に集中できる
    ● 属人化が解消された
    ○ 誰かによる手動のビルド作業が無くなった
    ○ 開発者は Flutter のコードを push するだけで良い
    ○ Apple Developer への登録も不要
    

    View Slide

26. 今後やること
    ● iOSアプリの配信の自動化
    ● Androidアプリのビルド・配信の自動化
    

    View Slide

27. まとめ
    ● iOSアプリのビルドとアーカイブを CircleCI で自動化した
    ● CI/CD環境の実現方法は CircleCI + fastlane を採用した
    ● FlutterというよりiOSアプリを配信するまでの作業をキャッチ
    アップできた
    

    View Slide

28. 参考
    ● Continuous delivery with Flutter
    ○ https://flutter.dev/docs/deployment/cd#integrating-fastlane-with-existing-workflows
    ● Build and release an iOS app
    ○ https://flutter.dev/docs/deployment/ios#create-a-build-archive-with-codemagic-cli-tools
    ● `flutter build ipa` でiOS向けのビルドとアーカイブを同時に実行
    ○ https://medium.com/flutter-jp/ipa-e176de0276c6
    ● CircleCI 2.1 と fastlane で Flutter の iOS と Android をビルドして DeployGate で配布する
    ○ https://qiita.com/masashi-sutou/items/08c4d4eb5b9cb2dcd47a
    ● fastlane match を使用して iOS の証明書管理を行う
    ○ https://qiita.com/kotarella1110/items/840af2cf80aaea1fb035
    ● fastlaneでCode Signing StyleをAutomaticからManualに変更する
    ○ https://tech.studyplus.co.jp/entry/2018/05/28/115637
    

    View Slide

29. ご清聴ありがとうございました
    

    View Slide