FanstaにおけるCI・CDの紹介と培った知見

令和最新版 他人に自慢したいヤバいCI/CD LT会 @ yabaibuki.dev #2 の資料です

Transcript

1. ©MIXI FanstaにおけるCI/CDの紹介 と培った知見 株式会社MIXI 井上 翔太
2. ©MIXI 自己紹介 名前：しょっさん
 Twitter：@syossan27
 所属：MIXI
 活動：
 • SRE Kaigi • SRE Magazine • ゆるSRE勉強会
3. ©MIXI 宣伝！ 2025/01/26に SRE Kaigi というカンファレンスを開催します！！！！！ 
 絶賛プロポーザル募集中！！！！！（9/30まで） 

4. ©MIXI Fanstaのご紹介 • スポーツ観戦ができる飲食店に特化した検索サービス • スポーツ観戦できる飲食店をエリアやチーム、放映予定から検索し、予約できる • お店にとってはスポーツ観戦ができることを告知し、集客することができる ©Fansta
5. ©MIXI CI/CDでどんなことをやっている か？
6. ©MIXI developブランチにマージされたコミットがこのPRに自動で積まれる。 x-motemen/git-pr-releaseが裏で動いている ▪リリースPRの自動生成
7. ©MIXI API（Rails）, Frontend（Next.js）, APP（Flutter）に対応。 Frontendはjest-coverage-report-actionを利用し、API, APPはoctocov-actionを利用 ▪テストカバレッジ • Frontend（Next.js）例 • API（Rails）, App（Flutter）例
8. ©MIXI 他にもいろいろ
9. ©MIXI • QA環境管理 • QA環境の自動最新化 • GraphQLスキーマの破壊的変更検知 • Four Keys計測 • README.mdの画像キャッシュパージ • featureブランチのstaging, productionブランチ マージコミット検 知 • MagicPodで利用する検証用アプリのコメントトリガーによるビル ド • Cypressを利用したFrontendでのGAレポート送信チェッカー • Rubocop, Flutter Analyze, ESLintなどの静的解析実行 • RSpec, Flutter Test, Jestなどのテスト実行 • などなど
10. ©MIXI サクッと話せそうなネタ探してきまし た
11. ©MIXI テストカバレッジでの知見 × ２
12. ©MIXI ▪GitHub Actionsを修正した話 Frontendでテストカバレッジを計測するにあたり、 ArtiomTr/jest-coverage-report-actionを利用していた。 前提
13. ©MIXI ▪GitHub Actionsを修正した話 内部的に叩いていたGitHub APIのdiff制限に引っかかる処理があ り、見事に踏み抜いた。 （コミット・PRのdiffは差分20,000行、変更ファイル数300個がある場合、取得で きない） 問題 Frontendでテストカバレッジを計測するにあたり、 ArtiomTr/jest-coverage-report-actionを利用していた。 前提
14. ©MIXI ▪GitHub Actionsを修正した話 解決 haya14busaさんのReviewDogでも同一の問題が存在し、既に解決 済みだったため、JavaScriptに置き換えて実装。 （Acceptヘッダーを利用したPR取得APIからのdiff取得ではなく、PRのbranchと base branchのSHAを取得して、GitHub APIのCompare two commitsを叩く） 内部的に叩いていたGitHub APIのdiff制限に引っかかる処理があ り、見事に踏み抜いた。 （コミット・PRのdiffは差分20,000行、変更ファイル数300個がある場合、取得で きない） 問題 Frontendでテストカバレッジを計測するにあたり、 ArtiomTr/jest-coverage-report-actionを利用していた。 前提
15. ©MIXI ▪アプリのテストカバレッジを詳細に見れるようにした flutter test –coverage で出力されるLCOVを必要な出力のみに絞っ て、再度LCOVに変換してからoctocov-actionでPRにコメントして いる 前提
16. ©MIXI ▪アプリのテストカバレッジを詳細に見れるようにした octocov-actionでPRにコメントされる内容では詳細までわからず、 LCOVをgenhtmlしたHTMLレポート を見れるようにして欲しいと の要望 問題 flutter test –coverage で出力されるLCOVを必要な出力のみに絞っ て、再度LCOVに変換してからoctocov-actionでPRにコメントして いる 前提
17. ©MIXI こんなやつ
18. ©MIXI ▪アプリのテストカバレッジを詳細に見れるようにした 解決 genhtmlで出力したレポートをpeaceiris/actions-gh-pages で GitHub Pagesにデプロイする。 （developブランチの内容準拠で、developブランチにマージされたタイミングで 更新） octocov-actionでPRにコメントされる内容では詳細までわからず、 LCOVをgenhtmlしたHTMLレポート を見れるようにして欲しいと の要望 問題 flutter test –coverage で出力されるLCOVを必要な出力のみに絞っ て、再度LCOVに変換してからoctocov-actionでPRにコメントして いる 前提
19. ©MIXI まだまだ改善していきたい
20. ©MIXI • プレビュー環境の自動作成 • CIプラットフォーム障害時のワークアラウンド • Androidリリース前レポート相当の解析 （Firebase Test Lab） • ArgoCDをArgoCDで管理する • etc…etc…
21. ©MIXI もっと自慢できるCI/CDにしていこう！