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

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