Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

bake0937
September 08, 2021

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/

bake0937

September 08, 2021
Tweet

More Decks by bake0937

Other Decks in Technology

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