---
title: Flutter開発とGitHub Actions
tags:  #flutter #github actions #自動化 #ci #テスト  
author: [yorifuji](https://convert.docswell.com/user/yorifuji)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/L7358ZLDE5.jpg?width=480
description: 【AI要約】このスライドでは、Flutter開発において自動化している作業や、Flutter開発でのGitHub Actionsのおすすめポイントを紹介しました。GitHub Actionsは、GitHubで発生するイベントが利用できるため、テストやビルドだけでなく開発プロセス全体で利用できます。また、パブリックリポジトリは無料で、毎月一定の無料枠があります。さらに、サードパーティーのアクションが豊富で、カスタマイズ性が高いため、開発者にとって便利な環境です。GitHub-hosted runnerは、GitHubが提供するCIの実行環境であり、Windows、Linux、macOSの各OSから選択できます。ジョブの実行単位でまっさらなインスタンスが割り当てられるため、分単位で課金されます。
published: October 26, 23
canonical: https://convert.docswell.com/s/yorifuji/KGXMNM-2023-10-26-011249
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/L7358ZLDE5.jpg)

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


# Page. 2

![Page Image](https://bcdn.docswell.com/page/87DDMRN27G.jpg)

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


# Page. 3

![Page Image](https://bcdn.docswell.com/page/VJPXRW5L78.jpg)

CIサービス戦国時代？


# Page. 4

![Page Image](https://bcdn.docswell.com/page/2EVLR8P6JQ.jpg)

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


# Page. 5

![Page Image](https://bcdn.docswell.com/page/57GXM5P2EL.jpg)

fl
fl
GitHub Actionsで自動化している作業
• Check(formatter/lint)
• Build &amp; 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更新&amp;PR作成
• Nightly build


# Page. 6

![Page Image](https://bcdn.docswell.com/page/4EQ8RZ29JP.jpg)

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


# Page. 7

![Page Image](https://bcdn.docswell.com/page/KJ4283PRE1.jpg)

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


# Page. 8

![Page Image](https://bcdn.docswell.com/page/LE1M219V7G.jpg)

一つだけ挙げるとしたら


# Page. 9

![Page Image](https://bcdn.docswell.com/page/GEW3R8Q3E2.jpg)

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


# Page. 10

![Page Image](https://bcdn.docswell.com/page/47ZVR8WGE3.jpg)

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


# Page. 11

![Page Image](https://bcdn.docswell.com/page/YJ65RPGQ7V.jpg)

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


# Page. 12

![Page Image](https://bcdn.docswell.com/page/GJ5Y8KV2J4.jpg)

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


# Page. 13

![Page Image](https://bcdn.docswell.com/page/9E2GKW31ER.jpg)

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


# Page. 14

![Page Image](https://bcdn.docswell.com/page/D7YVNL147M.jpg)

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


# Page. 15

![Page Image](https://bcdn.docswell.com/page/VENMX426J8.jpg)

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


# Page. 16

![Page Image](https://bcdn.docswell.com/page/Y79N8Q1R73.jpg)

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


# Page. 17

![Page Image](https://bcdn.docswell.com/page/G78K8G4GJD.jpg)

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


# Page. 18

![Page Image](https://bcdn.docswell.com/page/L7LZRG6XER.jpg)

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


# Page. 19

![Page Image](https://bcdn.docswell.com/page/4EMVRQ53EW.jpg)

参考：reg-suitのサマリーをJob Summariesに出力
- name: Generate Comment
uses: actions/github-script@v6
with:
script: |
const fs = require(&#039;fs&#039;);
（途中省略）
await core.summary
.addHeading(`${icon} reg-suit has checked for visual changes`, 3)
.addTable([
[&quot;🔴 Changed&quot;, &quot;🟡 New&quot;,
&quot;⚫ Deleted&quot;, &quot;🔵 Passing&quot;],
[stats.changed, stats.newItems, stats.deleted, stats.passing]
])
.addHeading(&quot;📝 Log&quot;, 3)
.addCodeBlock(log, &quot;log&quot;)
.write()


# Page. 20

![Page Image](https://bcdn.docswell.com/page/PER2R83R79.jpg)

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


# Page. 21

![Page Image](https://bcdn.docswell.com/page/P7XDR84YJX.jpg)

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


# Page. 22

![Page Image](https://bcdn.docswell.com/page/37KXRKZ4JD.jpg)

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


# Page. 23

![Page Image](https://bcdn.docswell.com/page/LJ358ZDD75.jpg)

ありがとうございました


