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

Transcript

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

   Meetup - Flutter

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

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

4. 最近やっていること • 社内ツール開発 ◦ Saasと社内システムの連携 ▪ Node.js + TypeScript ▪

   AWSによるサーバレスな構成 • Developer eXperience の推進 ◦ CI/CDの構築、開発フローの整備、bot開発など

5. 目次 • 背景 • 目的 • 方法 • 構成 •

   まとめ

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

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

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

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

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

11. 作業スタート時
 まぁアレだろ! Ruby on Rails や Vue CLI アプリのCI/CD 環境と似た感じなものを作れば良いんでしょ！

    主な経験言語 Ruby, JavaScript, PHP

12. 数時間後...
 証明書って何？ Apple Developer? Bitrise? Codemagic? CircleCIじゃダメなの？ iOSビルドとアーカイブって何 が違うの？ そもそも

    Dart 触ったこと無 かったわ

13. 内容を整理する • iOSアプリのビルド及び配布をするためには以下の工程が必要 ◦ Apple Developer アカウントの作成 ◦ ビルド ◦

    証明書の作成・設定 ◦ アーカイブ ◦ 配布 • Flutterアプリ開発でよく使われてそうなCI/CDサービス ◦ Bitrise ◦ Codemagic ◦ GitHub Actions ◦ Cirrus CI(Dockerイメージでよく見かける) • CircleCI でもCI/CD環境を構築する方法はある(最近有料化したばっかりでして...)

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

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

    API + Codemagic CLI tools

16. ①CircleCI + fastlane • 公式で紹介されている方法 • Apple Developerのアカウントが必要 • 証明書無しでiOSビルド

    → fastlane で証明書の生成・取得・設定 し、アーカイブを実行 • 証明書を管理するためのリポジトリが必要 ◦ え？証明書のためだけにリポジトリが必要なの!? fastlane とは? • iOS/Android のビルドやリリース作業を自動するツール

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」でアーカイブまで一気に実行 • 証明書を管理するためのリポジトリが不要になりそう

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

    + Codemagic CLI tools

19. 本当は②にしたかった...
 • ローカル環境(macOS)では成功 • CircleCI のコンテナデバッグで検証 ◦ macOS(xcode: 12.5.1)で失敗 •

    惜しいところまでいったが時間切れに ◦ あと少し時間があったら..(言い訳) 検証用に仮で置いている 
 (現在は削除済み)


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

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

22. 構成② iOSビルド構成

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

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

25. 結果 • ビルドが自動化された ◦ 本来の開発に集中できる • 属人化が解消された ◦ 誰かによる手動のビルド作業が無くなった ◦

    開発者は Flutter のコードを push するだけで良い ◦ Apple Developer への登録も不要

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

27. まとめ • iOSアプリのビルドとアーカイブを CircleCI で自動化した • CI/CD環境の実現方法は CircleCI + fastlane

    を採用した • FlutterというよりiOSアプリを配信するまでの作業をキャッチ アップできた

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

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