Flutter開発とGitHub Actions

Flutter開発とGitHub Actions YORIFUJI MITSUNORI ORION SALON #31

自己紹介 • YORIFUJI MITSUNORI • @yorifuji on X/GitHub/Zenn • 金融系スタートアップのiOSエンジニア

CIサービス戦国時代？

GitHub Actions https://github.co.jp/features/actions

• https://github.co.jp/features/actions

fl fl GitHub Actionsで自動化している作業 • Check(formatter/lint) • Build & Deploy • utter format • Staging(Firebase App Distribution) • utter analyze • Production(Google Play, App Store) • Test • Unit/Widget/Integration Test • VRT(Visual Regression Test) • Bump up • pubspec.yml の version更新&PR作成 • Nightly build

FlutterのCI環境として GitHub Actionsを 採用する理由を考えてみた

推し要素をリストアップ！ GitHub Actionsのおすすめポイント Flutter開発でのおすすめポイント • GitHubに付属しているのですぐに使い始められる • FlutterSDKのインストールが簡単 • GitHubで発生するイベントが利用できる • パブリックリポジトリは無料、毎月一定の無料枠あり • サードパーティーのアクションが豊富 • カスタマイズ性が高い • 無料プランで最大20並列までジョブが実行できる • Self-hosted runnerが使える • VSCode Extensionが便利 • ドキュメントが豊富、日本語翻訳あり • ワークフローやターゲットに合わせてRunnerの使い 分けができる • 開発環境（Xcodeなど）は複数バージョンがインス トール済み • Windows, Linux, macOSを使ってビルドできる • 複数のJobを並列に同時実行できる • CheckやAndroidとiOSの build & deploy

一つだけ挙げるとしたら

パブリックリポジトリは無料、毎月一定の無料枠あり

GitHubで発生するイベントとの連携 • 他のCIサービスではPUSH・PR・TagなどのGitに関するトリガーをサポート • GitHub ActionsではGitHubで発生するイベントをワークフロー（ジョブ）実行の トリガーにすることができる • 例：IssueやPRに内容に合わせてLabelをつける • GitHub Actionsはテストやビルドだけでなく開発プロセス全体で利用できる

GitHub-hosted runner • GitHub-hosted runnerはGitHubが標準で提供しているCIの実行環境（VM） • Windows, Linux(ubuntu), macOSから選択可能 • macOSはMonterey, Venturaが提供されている • GitHubが運用管理しているため自分でメンテナンスは不要 • ジョブの実行単位でまっさらなインスタンスが割り当てられる • 分単位で課金 • macOSは最も安いLinuxの10倍の値段がするので適材適所で使い分けする

参考：GitHub-hosted runnerのソフトウェアの構成 • CI環境にインストールされているソフトの一覧などはGitHub上で公開されている • https://github.com/actions/runner-images (2023.10.8時点)

• https://github.com/actions/runner-images

Self-hosted runner • プライベートリポジトリでGitHub-hosted runnerでmacOSを使うと利用時間が x10 換算のため無料 枠の消費が早い • Self-hosted runnerは所有しているマシンでGitHub Actionsのワークフロー実行するシステム • メリット • プライベートリポジトリでRunnerの利用時間に対する料金が発生しない • デメリット • マシンの管理・運用コストは全て自腹（OSやツールのアップデート、通信費用など） • GitHub-hostedとは異なり標準ではVMの機能が提供されていないのでゴミが残ったりする -

Flutterのビルド環境のセットアップ • GitHubが提供するRunnerにはFlutter SDKがインストールされていない • テストやビルドを行うためにSDKのインストールが必要 • third-partyのアクションがある • https://github.com/marketplace/actions/ utter-action • Gitから直接clone • XcodeやAndroid SDKなどは複数バージョンがインストール済みで切り替えも簡単 fl • Xcodeなら環境変数 DEVELOPER_DIR で切り替え可能

• https://github.com/marketplace/actions/flutter-action

ワークフローの目的でRunnerを切り替える • 静的解析（ utter analyze）やテスト、ビルド&デプロイで利用する ケース • 静的解析やテストは最も安いLinuxで実行 • ビルドはAndroidやWebならLinux、iOSはmacOS • ワークフローやビルドターゲットに合わせてRunnerを使い分けるこ fl とで費用をコントロールできる

ワークフローの再利用性が高い • GitHub Actionsのワークフローの定義はyamlファイルなので再利用性が高い • 新しいプロジェクトを開始したら既存のファイルをコピーするだけCI/CDの セットアップが完了する • GUIのワークフローエディタをポチポチしなくて良い（一長一短）

ワークフローのカスタマイズ性が高い • CIジョブの中でJavaScriptを使って処理を記述できる • https://github.com/actions/github-script • Job Summaries • ワークフローの実行結果の画面にMarkdown形式などで出力できる

• https://github.com/actions/github-script

reg-suitを使ったVRT（Visual Regression Test）

参考：reg-suitのサマリーをJob Summariesに出力

- name: Generate Comment
uses: actions/github-script@v6
with:
script: |
const fs = require('fs');
（途中省略）
await core.summary
.addHeading(`${icon} reg-suit has checked for visual changes`, 3)
.addTable([
["🔴 Changed", "🟡 New",
"⚫ Deleted", "🔵 Passing"],
[stats.changed, stats.newItems, stats.deleted, stats.passing]
])
.addHeading("📝 Log", 3)
.addCodeBlock(log, "log")
.write()

GitHub Actionsのruns（実行ログ）のページに表示された内容

今後の改善を期待するポイント • ファイルアップローダー機能 • iOSアプリのビルドでは各種証明書やProvisioning Pro leが必要 • GitHub Actionsはファイルアップローダーが提供されていない • ファイルをbase64に変換してsecretに登録 -> CIジョブの中でファイルに書 き出す作業が必要 • Bitriseなどはファイルアップロード機能からアップロードができる fi • デバッグしやすくしてほしい

具体的なワークフローの例はこちらの記事を参考に🙏 https://zenn.dev/yorifuji

• https://zenn.dev/yorifuji

ありがとうございました