Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
FlutterアプリのiOSビルドとアーカイブを CircleCI で自動化してみた 岡部恭平 / CO-OP Sapporo 2021.9.8 / ラクスR&D Meetup - Flutter
Slide 2
Slide 2 text
自己紹介 生活協同組合コープさっぽろ デジタル推進本部 システム部 AWS・エンジニアリングチーム エンジニア 岡部恭平 @okabeeeat Webアプリケーションエンジニア
Slide 3
Slide 3 text
コープさっぽろDX 引用: https://dx.sapporo.coop/
Slide 4
Slide 4 text
最近やっていること ● 社内ツール開発 ○ Saasと社内システムの連携 ■ Node.js + TypeScript ■ AWSによるサーバレスな構成 ● Developer eXperience の推進 ○ CI/CDの構築、開発フローの整備、bot開発など
Slide 5
Slide 5 text
目次 ● 背景 ● 目的 ● 方法 ● 構成 ● まとめ
Slide 6
Slide 6 text
背景 ・・・ 引用: https://dx.sapporo.coop/n/n23376af197fa
Slide 7
Slide 7 text
背景 ・・・ 引用: https://dx.sapporo.coop/n/n23376af197fa
Slide 8
Slide 8 text
Flutter のプロジェクトが 始まったっぽい
Slide 9
Slide 9 text
そんな中 ビルドが辛いので自動化し たい！ Aさんはビルドできるの に私はできません エンジニア なるほどね 私
Slide 10
Slide 10 text
目的 CI/CD環境を構築し、ビルドの自動化と属 人化の解消を実現する
Slide 11
Slide 11 text
作業スタート時 まぁアレだろ! Ruby on Rails や Vue CLI アプリのCI/CD 環境と似た感じなものを作れば良いんでしょ！ 主な経験言語 Ruby, JavaScript, PHP
Slide 12
Slide 12 text
数時間後... 証明書って何？ Apple Developer? Bitrise? Codemagic? CircleCIじゃダメなの？ iOSビルドとアーカイブって何 が違うの？ そもそも Dart 触ったこと無 かったわ
Slide 13
Slide 13 text
内容を整理する ● iOSアプリのビルド及び配布をするためには以下の工程が必要 ○ Apple Developer アカウントの作成 ○ ビルド ○ 証明書の作成・設定 ○ アーカイブ ○ 配布 ● Flutterアプリ開発でよく使われてそうなCI/CDサービス ○ Bitrise ○ Codemagic ○ GitHub Actions ○ Cirrus CI(Dockerイメージでよく見かける) ● CircleCI でもCI/CD環境を構築する方法はある(最近有料化したばっかりでして...)
Slide 14
Slide 14 text
そこからさらに調査...
Slide 15
Slide 15 text
方法 良さそうな方法が2つに絞られた ①CircleCI + fastlane ②CircleCI + Apple Store Connect API + Codemagic CLI tools
Slide 16
Slide 16 text
①CircleCI + fastlane ● 公式で紹介されている方法 ● Apple Developerのアカウントが必要 ● 証明書無しでiOSビルド → fastlane で証明書の生成・取得・設定 し、アーカイブを実行 ● 証明書を管理するためのリポジトリが必要 ○ え？証明書のためだけにリポジトリが必要なの!? fastlane とは? ● iOS/Android のビルドやリリース作業を自動するツール
Slide 17
Slide 17 text
公式: 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」でアーカイブまで一気に実行 ● 証明書を管理するためのリポジトリが不要になりそう
Slide 18
Slide 18 text
どっちにしたの？ ①CircleCI + fastlane ②CircleCI + Apple Store Connect API + Codemagic CLI tools
Slide 19
Slide 19 text
本当は②にしたかった... ● ローカル環境(macOS)では成功 ● CircleCI のコンテナデバッグで検証 ○ macOS(xcode: 12.5.1)で失敗 ● 惜しいところまでいったが時間切れに ○ あと少し時間があったら..(言い訳) 検証用に仮で置いている (現在は削除済み)
Slide 20
Slide 20 text
気を取り直して①で進める
Slide 21
Slide 21 text
構成① 証明書管理リポジトリ
Slide 22
Slide 22 text
構成② iOSビルド構成
Slide 23
Slide 23 text
サンプルコード等 後日ブログ等にまとめます
Slide 24
Slide 24 text
結果 無事自動化できた🎉
Slide 25
Slide 25 text
結果 ● ビルドが自動化された ○ 本来の開発に集中できる ● 属人化が解消された ○ 誰かによる手動のビルド作業が無くなった ○ 開発者は Flutter のコードを push するだけで良い ○ Apple Developer への登録も不要
Slide 26
Slide 26 text
今後やること ● iOSアプリの配信の自動化 ● Androidアプリのビルド・配信の自動化
Slide 27
Slide 27 text
まとめ ● iOSアプリのビルドとアーカイブを CircleCI で自動化した ● CI/CD環境の実現方法は CircleCI + fastlane を採用した ● FlutterというよりiOSアプリを配信するまでの作業をキャッチ アップできた
Slide 28
Slide 28 text
参考 ● 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
Slide 29
Slide 29 text
ご清聴ありがとうございました