Flutter開発とGitHub Actions

6.1K Views

October 26, 23

スライド概要

【AI要約】このスライドでは、Flutter開発において自動化している作業や、Flutter開発でのGitHub Actionsのおすすめポイントを紹介しました。GitHub Actionsは、GitHubで発生するイベントが利用できるため、テストやビルドだけでなく開発プロセス全体で利用できます。また、パブリックリポジトリは無料で、毎月一定の無料枠があります。さらに、サードパーティーのアクションが豊富で、カスタマイズ性が高いため、開発者にとって便利な環境です。GitHub-hosted runnerは、GitHubが提供するCIの実行環境であり、Windows、Linux、macOSの各OSから選択できます。ジョブの実行単位でまっさらなインスタンスが割り当てられるため、分単位で課金されます。

profile-image

iOS / Swift / Flutter / CICD

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

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

2.

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

3.

CIサービス戦国時代?

4.

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

5.

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

6.

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

7.

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

8.

一つだけ挙げるとしたら

9.

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

10.

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

11.

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

12.

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

13.

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

14.

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

15.

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

16.

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

17.

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

18.

reg-suitを使ったVRT(Visual Regression Test)

19.
[beta]
参考: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()

20.

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

21.

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

22.

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

23.

ありがとうございました