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
180
FanstaにおけるCI・CDの紹介と培った知見
令和最新版 他人に自慢したいヤバいCI/CD LT会 @ yabaibuki.dev #2 の資料です
syossan27
September 26, 2024
Tweet
Share
More Decks by syossan27
See All by syossan27
SRE Trail Mapから考える仲間の増やし方
syossan27
3
320
TerraformサポートされていないFirebase Remote ConfigでもIaCしてみた
syossan27
2
1.1k
実録!一人SREが直面している技術的負債
syossan27
8
3.4k
SREに活かすセルフ・アウェアネス
syossan27
4
1.2k
QAと共に築く、機能性を通じた信頼性担保への取り組み
syossan27
6
5.5k
サイト信頼性を高める前に開発チームからの信頼性を高めよう
syossan27
9
3k
OSS builder
syossan27
0
87
初心者がGoでCLIツール作ってみて学んだこと
syossan27
0
100
雑兵エンジニアから学ぶ転職の失敗・成功
syossan27
0
170
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
355
29k
Faster Mobile Websites
deanohume
304
30k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Typedesign – Prime Four
hannesfritz
39
2.4k
Why You Should Never Use an ORM
jnunemaker
PRO
53
9k
Side Projects
sachag
452
42k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
Rails Girls Zürich Keynote
gr2m
93
13k
Producing Creativity
orderedlist
PRO
341
39k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
Raft: Consensus for Rubyists
vanstee
136
6.6k
Designing for humans not robots
tammielis
249
25k
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にしていこう!