CIは5分以内！素早い開発サイクルを支えるCI

2024/02/20開催の「TechBrew in 東京 〜CI/CDパイプライン改善の取り組み〜」で発表したスライドです。

https://findy.connpass.com/event/309537/

Transcript

1. CIは5分以内！ 素早い開発サイクルを支えるCI TechBrew in 東京 〜CI/CDパイプライン改善 最適化の取り組み〜 2024/02/20 ham
2. 【略歴】 新卒でSIerとして就職 その後、Web系企業やスタートアップを経て2022年5月に ファインディに参画 ファインディではFindy Team+を開発しつつ、EMとして 開発チームのマネジメントを担当 写真撮影 󰢍　SNSへの投稿 󰢍　マサカリ 🥺 浜田 直人 (ham) ファインディ株式会社 @hamchance0215
3. Findy Team+(チームプラス)とは？
 3
 開発生産性の可視化、開発プロセスの伸びしろの発見、継続的な改善をサポート 生産性可視化 生産性向上 事業開発スピード加速 (開発スピードの向上により、仮説検証スピードも加速) 開発プロセス改善 (開発フロー･配置･ツールの伸びしろを可視化・最適化) 文化づくり・自己組織化 (メンバーの自発的な改善促進、改善を称賛する文化作り) 継続的な生産性向上サイクル データ 連携 Biz Engineer Engineer 開発組織ブランディング (エンジニアは、開発生産性が高い組織で働きたい) Recruit
4. Agenda • 開発サイクルにおけるCIの役割 • CIを速くする実例
5. 開発サイクルにおける CIの役割
6. 開発サイクルにおけるCIの役割 コードを書く
 レビュー
 マージ
 CIを通す
 (PR作成)

7. 開発サイクルにおけるCIの役割 コードを書く
 レビュー
 マージ
 CIを通す
 (PR作成)
 CIでは下記を実⾏ ‧lintや型などの静的解析 ‧⾃動テスト ‧build CIにより下記を担保 ‧コーディングルールに従っていること ‧既存実装が壊れていないこと ‧デプロイ可能であること
8. 開発サイクルにおけるCIの役割 コードを書く
 レビュー
 マージ
 CIを通す
 (PR作成)
 CIでは下記を実⾏ ‧lintや型などの静的解析 ‧⾃動テスト ‧build CIにより下記を担保 ‧コーディングルールに従っていること ‧既存実装が壊れていないこと ‧デプロイ可能であること CIがあることで レビュー負荷を下げつつ ⾼速でマージしても品質を担保することができる 素早い開発サイクルを⽀えるために必要なもの それが CI (Continuous Integration)
9. CIは素早い開発サイクルを実現するために重要な役割を持っていることがわかりました が、PRごとに実行されるので実行時間が長いとツラいです CIの実⾏時間 CIって どれくらいの時間が 適正なんだろう？
10. CIの実⾏時間 継続的デリバリー 信頼できるソフトウェアリリースのための ビルド‧テスト‧デプロイメントの⾃動化 https://www.kadokawa.co.jp/product/301706000296/ 1つの目安として「継続的デリバリー」では10分がほぼ限 界と記載されています。 そのため、ファインディでも10分を1つの目安としていま す。 ただ、個人的には5分を超えるとストレスを感じ始めます。 3.3.3. ビルドプロセスとテストプロセスを短く保て > 我々の考えでは10分がほぼ限界である。
11. CIの実⾏時間 5分以内で終わると PR作成してからdiscriptionを書いたりコードのセルフチェックをしている間に CIが終わり、スムー ズにレビュー依頼できる PRヨシ！ CIヨシ！ レビュー依頼 ヨシ！
12. 5分以上かかると セルフチェックが終わった時点で CIが終わっておらず、CIを待つ間に別の作業を始めてしまう。そ のためレビュー依頼が遅くなって、リードタイムが延びる。 CIの実⾏時間 PRヨシ！ CIまだ CI待ち
13. CIを速くする実例
14. • バックエンドの主な技術 ◦ Ruby / Rails / RSpec / Rubocop / Brakeman • CI (GitHub Actions) ◦ テスト(RSpec) / 静的解析(Rubocop) / セキュリティ(Brakeman) バックエンド バックエンドのCIは「テスト」に時間がかかります。 現時点で素直に実⾏すると20〜30分かかる。
15. • バックエンドの主な技術 ◦ Ruby / Rails / RSpec / Rubocop / Brakeman • CI (GitHub Actions) ◦ テスト(RSpec) / 静的解析(Rubocop) / セキュリティ(Brakeman) バックエンド テストを分割して並列実⾏する仕組みを社内で⾃作。 configでサクッと並列数を変更できるようにしている。 CIの⼀部抜粋(testを8分割) 👉
16. • フロントエンドの主な技術 ◦ React / TypeScript / Jest / ESLint / webpack / Nx • CI (GitHub Actions) ◦ テスト(Jest) / 静的解析(TypeScript / ESLint) / ビルド(webpack) フロントエンド フロントエンドのCIは「テスト」「ビルド」「静的解析 (TypeScript)」に時間がかかります。 現時点で素直に実⾏するとそれぞれ15〜20分かかる。
17. フロントエンド https://nx.dev/ Nxを使って機能ごとに分割 - apps - pages - libs - feature-a - feature-b - … - feature-z - ui - shared - utils 依存 pages → feature → ui / shared / utils
18. フロントエンド https://nx.dev/ Nxを使って機能ごとに分割 - apps - pages - libs - feature-a - feature-b - … - feature-z - ui - shared - utils 依存 pages → feature → ui / shared / utils ここがすごいよ「Nx」！！ ‧依存関係を解釈して関連するところだけCIを実⾏ →featureを変更した場合、変更したfeatureとfeature に依存しているpagesのみCIが実⾏され、他はキャッ シュが使われる
19. フロントエンド 過去30⽇間のNxのCIキャッ シュにより削減された時間👉 CI(feature)の⼀部抜粋👇
20. Findy 採⽤ https://findy.co.jp/service/ https://careers.findy.co.jp/ Findy サービス CIを高速化して 最高の開発者体験を実現しましょう！！