Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
FanstaにおけるCI・CDの紹介と培った知見
Search
syossan27
September 26, 2024
2
350
FanstaにおけるCI・CDの紹介と培った知見
令和最新版 他人に自慢したいヤバいCI/CD LT会 @ yabaibuki.dev #2 の資料です
syossan27
September 26, 2024
Tweet
Share
More Decks by syossan27
See All by syossan27
監視 やばい
syossan27
4
1.3k
最先端を追う前に、まず広めよう! 〜AIツールの普及活動のすすめ〜
syossan27
1
1.3k
Fanstaの1年を大解剖! 一人SREはどこまでできるのか!?
syossan27
2
570
SRE Trail Mapから考える仲間の増やし方
syossan27
3
610
TerraformサポートされていないFirebase Remote ConfigでもIaCしてみた
syossan27
2
1.4k
実録!一人SREが直面している技術的負債
syossan27
8
3.7k
SREに活かすセルフ・アウェアネス
syossan27
4
1.5k
QAと共に築く、機能性を通じた信頼性担保への取り組み
syossan27
6
5.8k
サイト信頼性を高める前に開発チームからの信頼性を高めよう
syossan27
9
3.2k
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
13
670
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Faster Mobile Websites
deanohume
306
31k
Building Adaptive Systems
keathley
41
2.5k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2k
How to Ace a Technical Interview
jacobian
276
23k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.4k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Music & Morning Musume
bryan
47
6.5k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Transcript
©MIXI FanstaにおけるCI/CDの紹介 と培った知見 株式会社MIXI 井上 翔太
©MIXI 自己紹介 名前:しょっさん Twitter:@syossan27 所属:MIXI 活動: • SRE Kaigi •
SRE Magazine • ゆるSRE勉強会
©MIXI 宣伝! 2025/01/26に SRE Kaigi というカンファレンスを開催します!!!!! 絶賛プロポーザル募集中!!!!!(9/30まで)
©MIXI Fanstaのご紹介 • スポーツ観戦ができる飲食店に特化した検索サービス • スポーツ観戦できる飲食店をエリアやチーム、放映予定から検索し、予約できる • お店にとってはスポーツ観戦ができることを告知し、集客することができる ©Fansta
©MIXI CI/CDでどんなことをやっている か?
©MIXI developブランチにマージされたコミットがこのPRに自動で積まれる。 x-motemen/git-pr-releaseが裏で動いている ▪リリースPRの自動生成
©MIXI API(Rails), Frontend(Next.js), APP(Flutter)に対応。 Frontendはjest-coverage-report-actionを利用し、API, APPはoctocov-actionを利用 ▪テストカバレッジ • Frontend(Next.js)例 •
API(Rails), App(Flutter)例
©MIXI 他にもいろいろ
©MIXI • QA環境管理 • QA環境の自動最新化 • GraphQLスキーマの破壊的変更検知 • Four Keys計測
• README.mdの画像キャッシュパージ • featureブランチのstaging, productionブランチ マージコミット検 知 • MagicPodで利用する検証用アプリのコメントトリガーによるビル ド • Cypressを利用したFrontendでのGAレポート送信チェッカー • Rubocop, Flutter Analyze, ESLintなどの静的解析実行 • RSpec, Flutter Test, Jestなどのテスト実行 • などなど
©MIXI サクッと話せそうなネタ探してきまし た
©MIXI テストカバレッジでの知見 × 2
©MIXI ▪GitHub Actionsを修正した話 Frontendでテストカバレッジを計測するにあたり、 ArtiomTr/jest-coverage-report-actionを利用していた。 前提
©MIXI ▪GitHub Actionsを修正した話 内部的に叩いていたGitHub APIのdiff制限に引っかかる処理があ り、見事に踏み抜いた。 (コミット・PRのdiffは差分20,000行、変更ファイル数300個がある場合、取得で きない) 問題 Frontendでテストカバレッジを計測するにあたり、
ArtiomTr/jest-coverage-report-actionを利用していた。 前提
©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を利用していた。 前提
©MIXI ▪アプリのテストカバレッジを詳細に見れるようにした flutter test –coverage で出力されるLCOVを必要な出力のみに絞っ て、再度LCOVに変換してからoctocov-actionでPRにコメントして いる 前提
©MIXI ▪アプリのテストカバレッジを詳細に見れるようにした octocov-actionでPRにコメントされる内容では詳細までわからず、 LCOVをgenhtmlしたHTMLレポート を見れるようにして欲しいと の要望 問題 flutter test –coverage
で出力されるLCOVを必要な出力のみに絞っ て、再度LCOVに変換してからoctocov-actionでPRにコメントして いる 前提
©MIXI こんなやつ
©MIXI ▪アプリのテストカバレッジを詳細に見れるようにした 解決 genhtmlで出力したレポートをpeaceiris/actions-gh-pages で GitHub Pagesにデプロイする。 (developブランチの内容準拠で、developブランチにマージされたタイミングで 更新) octocov-actionでPRにコメントされる内容では詳細までわからず、
LCOVをgenhtmlしたHTMLレポート を見れるようにして欲しいと の要望 問題 flutter test –coverage で出力されるLCOVを必要な出力のみに絞っ て、再度LCOVに変換してからoctocov-actionでPRにコメントして いる 前提
©MIXI まだまだ改善していきたい
©MIXI • プレビュー環境の自動作成 • CIプラットフォーム障害時のワークアラウンド • Androidリリース前レポート相当の解析 (Firebase Test Lab)
• ArgoCDをArgoCDで管理する • etc…etc…
©MIXI もっと自慢できるCI/CDにしていこう!