FlutterのVRT画像生成をDockerで 実行しようとして失敗した話

【Mobile勉強会 ウォンテッドリー × チームラボ × Sansan #22】にてチームラボのスマホアプリエンジニアが登壇用に作成したスライドです。

Mobile勉強会とは
ウォンテッドリー・チームラボ・Sansanが共催するMobile勉強会です。
モバイルアプリに関する技術的なことを共有する勉強会です。LT形式で各自が共有したいことを話します。
iOS/Androidの話から、KMPやFlutterといった技術の話など、モバイルアプリに関することであれば話す内容はなんでもOK。
オンラインとオフラインでハイブリット開催しました。

https://teamlab.connpass.com/event/366306/

Transcript

1. FlutterのVRT画像生成をDockerで 実行しようとして失敗した話 1 そた スマートフォンチーム テックスペシャリスト
2. 2 自己紹介 そた スマートフォンチーム テックスペシャリスト 業務では主にFlutterとKotlin Multiplatform 社内FlutterTemplateのアーキテクチャ設計 複数の案件での技術領域サポートなど FlutterKaigi 2025 登壇予定
3. 3 会社紹介
4. 4 VRT導入している人 󰜲
5. 5 CIでのVRTの実行にmacOSを利用してる人󰜲
6. 6 macOSの利用料金高いと思う人󰜲
7. 7 macOSの実行料金めっちゃ高い！！！ GitHub Actions の課金 https://docs.github.com/ja/billing/concepts/product-billing/github-actions より引用 例えばGitHubActions CIでmacOSを動かすと高い
8. 8 macOSの実行料金めっちゃ高い！！！ GitHub Actions の課金 https://docs.github.com/ja/billing/concepts/product-billing/github-actions より引用 例えばGitHubActions なんと10倍！ CIでmacOSを動かすと高い
9. 9 じゃあLinux使えばいいじゃん
10. 10 じゃあLinux使えばいいじゃん →できないんです.....
11. 11 そもそもVRTとは • VRT(Visual Regression Testing) • 視覚的回帰テスト • ある地点のコードでレンダリングされるUIの画像を期待画像として保存しておき、実際の レンダリング結果と比較を行う • 比較して差分があったらTest失敗扱い VRTは何が嬉しい？
12. 12 そもそもVRTとは 期待画像 結果画像 VRTは何が嬉しい？
13. 13 そもそもVRTとは 期待画像 結果画像 マスク画像 差分画像 VRTは何が嬉しい？
14. 14 何が嬉しいの？ • 意図しない UIの変更を防ぐ ◦ 意図したUIの変更のみを再レンダリングしてcommit ◦ 意図していないものは画像が更新されてないのでテストが失敗 • コードの変更による UIへの影響を可視化 ◦ PRのコードを実行しなくてもどのようなUIの変更が行われたか把握可能に → Test工数を削減すると共に開発を効率化！ VRTは何が嬉しい？
15. 15 それがなぜmacOSと関係が？
16. 16 VRTのレンダリングはOSに依存する！ Golden files are not consistent between Flutter versions and different OS versions https://github.com/flutter/flutter/issues/36667 →VRTの画像レンダリングは実行プラットフォームによって変わるから、 実行プラットフォームを統一してね！ VRTのレンダリング
17. 17 アプリ開発者は皆macOS →CIもmacOSで実行する必要が... 🫠
18. 18 Linux使いたい！！ 高いからCIの実行はLinux使いたいぜ！！！！ 取れる手段は2つ 1. VRTの画像生成までCIで行う 2. 開発者がLinuxを使う
19. 19 Linux使いたい！！ 高いからCIの実行はLinux使いたいぜ！！！！ 取れる手段は2つ 1. VRTの画像生成までCIで行う →時間かかるしワークフローが複雑になりすぎる 2. 開発者がLinuxを使う
20. 20 Linux使いたい！！ 高いからCIの実行はLinux使いたいぜ！！！！ 取れる手段は2つ 1. VRTの画像生成までCIで行う →時間かかるしワークフローが複雑になりすぎる 2. 開発者がLinuxを使う →iOSの開発ができなくなる！！！！ 両方非現実的... 😩
21. 21 VRTの実行時だけPCが Linuxになってくれたらな〜〜〜〜〜〜
22. 22 あ！！！
23. 23 いいのあるじゃ〜ん！！！！
24. 24 • 主にサーバーサイドの開発で利用される コンテナ化のプラットフォーム • 実行環境を「コンテナ」と呼ばれる 隔離された環境としてパッケージ化 ◦ 仮想的なマシンを作成するようなイメージ • 実行環境を仮想的に共通化することで 異なる環境でも一貫した動作を保証 Docker Dockerとは
25. 25 • 主にサーバーサイドの開発で利用される コンテナ化のプラットフォーム • 実行環境を「コンテナ」と呼ばれる 隔離された環境としてパッケージ化 ◦ 仮想的なマシンを作成するようなイメージ • 実行環境を仮想的に共通化することで 異なる環境でも一貫した動作を保証 Docker Dockerとは VRTの画像レンダリングだけDocker使って 仮想Linuxで実行したらCIをLinuxにできるんじゃん！
26. 26 だめでした 😭😭😭😭
27. 27 調べたら言及されてた... Golden tests paint different pixels using same Docker image on different platforms https://github.com/flutter/flutter/issues/131559 →VRTのわずかなdiffはマシンのハードウェアの違いによるものだから同じ dockerコンテナを利用しても 違いが出ることがあるとのこと ... 同一のDocker imageでVRTを実行しても差分が発生する
28. 28 やったことは全く意味がなかったのか？
29. 29 Dockerでの実行は意味がなかった？ 画像の差分がめちゃくちゃ少なくなった！ macOSでレンダリングした画像でCIのテスト実行 ══╡ EXCEPTION CAUGHT BY FLUTTER TEST FRAMEWORK ╞══════════════════ The following assertion was thrown while running async test code: Golden "goldens/normal_button_components.png": Pixel test failed, 0.63%, 5517px diff detected. A: ある程度は意味があったかも
30. 30 Dockerでの実行は意味がなかった？ 画像の差分がめちゃくちゃ少なくなった！ macOSでレンダリングした画像でCIのテスト実行 ══╡ EXCEPTION CAUGHT BY FLUTTER TEST FRAMEWORK ╞══════════════════ The following assertion was thrown while running async test code: Golden "goldens/normal_button_components.png": Pixel test failed, 0.63%, 5517px diff detected. dockerのLinuxでレンダリングした画像でCIのテスト実行 ══╡ EXCEPTION CAUGHT BY FLUTTER TEST FRAMEWORK ╞══════════════════ The following assertion was thrown while running async test code: Golden "goldens/normal_button_components.png": Pixel test failed, 0.00%, 1px diff detected. A: ある程度は意味があったかも ほとんど誤差 なしに！！
31. 31 Dockerでの実行は意味がなかった？ 画像の差分がめちゃくちゃ少なくなった！ macOSでレンダリングした画像でCIのテスト実行 ══╡ EXCEPTION CAUGHT BY FLUTTER TEST FRAMEWORK ╞══════════════════ The following assertion was thrown while running async test code: Golden "goldens/normal_button_components.png": Pixel test failed, 0.63%, 5517px diff detected. dockerのLinuxでレンダリングした画像でCIのテスト実行 ══╡ EXCEPTION CAUGHT BY FLUTTER TEST FRAMEWORK ╞══════════════════ The following assertion was thrown while running async test code: Golden "goldens/normal_button_components.png": Pixel test failed, 0.00%, 1px diff detected. A: ある程度は意味があったかも 誤差を許容する設定の場合より小さい閾値を設定できる ほとんど誤差 なしに！！
32. 32 • VRTは予期せぬUIの変更を防げたりする便利な技術 • VRTの実行は同一のプラットフォームに制限されてしまうのが欠点 • その欠点をdockerによる仮想化を用いることで解決できないか挑戦 • ハードウェアレベルの誤差により完全に同一にはできない.. • しかし、ほとんどの誤差は吸収できるのでVRTの運用によっては使えそう まとめ まとめ
33. 33 終わりに Flutterの開発を一緒に行ってくれる 仲間を募集しています！ 会社説明会 エントリー