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

by syossan27

Slide 1

Slide 1 text

©MIXI FanstaにおけるCI/CDの紹介と培った知見株式会社MIXI 井上翔太

Slide 2

Slide 2 text

©MIXI 自己紹介名前：しょっさん  Twitter：@syossan27  所属：MIXI  活動：  ● SRE Kaigi ● SRE Magazine ● ゆるSRE勉強会

Slide 3

Slide 3 text

©MIXI 宣伝！ 2025/01/26に SRE Kaigi というカンファレンスを開催します！！！！！   絶賛プロポーザル募集中！！！！！（9/30まで）  

Slide 4

Slide 4 text

©MIXI Fanstaのご紹介 • スポーツ観戦ができる飲食店に特化した検索サービス • スポーツ観戦できる飲食店をエリアやチーム、放映予定から検索し、予約できる • お店にとってはスポーツ観戦ができることを告知し、集客することができる ©Fansta

Slide 5

Slide 5 text

©MIXI CI/CDでどんなことをやっているか？

Slide 6

Slide 6 text

©MIXI developブランチにマージされたコミットがこのPRに自動で積まれる。 x-motemen/git-pr-releaseが裏で動いている ■リリースPRの自動生成

Slide 7

Slide 7 text

©MIXI API（Rails）, Frontend（Next.js）, APP（Flutter）に対応。 Frontendはjest-coverage-report-actionを利用し、API, APPはoctocov-actionを利用 ■テストカバレッジ ● Frontend（Next.js）例 ● API（Rails）, App（Flutter）例

Slide 8

Slide 8 text

©MIXI 他にもいろいろ

Slide 9

Slide 9 text

©MIXI ● QA環境管理 ● QA環境の自動最新化 ● GraphQLスキーマの破壊的変更検知 ● Four Keys計測 ● README.mdの画像キャッシュパージ ● featureブランチのstaging, productionブランチマージコミット検知 ● MagicPodで利用する検証用アプリのコメントトリガーによるビルド ● Cypressを利用したFrontendでのGAレポート送信チェッカー ● Rubocop, Flutter Analyze, ESLintなどの静的解析実行 ● RSpec, Flutter Test, Jestなどのテスト実行 ● などなど

Slide 10

Slide 10 text

©MIXI サクッと話せそうなネタ探してきました

Slide 11

Slide 11 text

©MIXI テストカバレッジでの知見 × ２

Slide 12

Slide 12 text

©MIXI ■GitHub Actionsを修正した話 Frontendでテストカバレッジを計測するにあたり、 ArtiomTr/jest-coverage-report-actionを利用していた。前提

Slide 13

Slide 13 text

©MIXI ■GitHub Actionsを修正した話内部的に叩いていたGitHub APIのdiff制限に引っかかる処理があり、見事に踏み抜いた。（コミット・PRのdiffは差分20,000行、変更ファイル数300個がある場合、取得できない）問題 Frontendでテストカバレッジを計測するにあたり、 ArtiomTr/jest-coverage-report-actionを利用していた。前提

Slide 14

Slide 14 text

©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を利用していた。前提

Slide 15

Slide 15 text

Slide 16

Slide 16 text

©MIXI ■アプリのテストカバレッジを詳細に見れるようにした octocov-actionでPRにコメントされる内容では詳細までわからず、 LCOVをgenhtmlしたHTMLレポートを見れるようにして欲しいとの要望問題 flutter test –coverage で出力されるLCOVを必要な出力のみに絞って、再度LCOVに変換してからoctocov-actionでPRにコメントしている前提

Slide 17

Slide 17 text

©MIXI こんなやつ

Slide 18

Slide 18 text

©MIXI ■アプリのテストカバレッジを詳細に見れるようにした解決 genhtmlで出力したレポートをpeaceiris/actions-gh-pages で GitHub Pagesにデプロイする。（developブランチの内容準拠で、developブランチにマージされたタイミングで更新） octocov-actionでPRにコメントされる内容では詳細までわからず、 LCOVをgenhtmlしたHTMLレポートを見れるようにして欲しいとの要望問題 flutter test –coverage で出力されるLCOVを必要な出力のみに絞って、再度LCOVに変換してからoctocov-actionでPRにコメントしている前提