Slide 1

Slide 1 text

CIは5分以内! 素早い開発サイクルを支えるCI TechBrew in 東京 〜CI/CDパイプライン改善 最適化の取り組み〜 2024/02/20 ham

Slide 2

Slide 2 text

【略歴】 新卒でSIerとして就職 その後、Web系企業やスタートアップを経て2022年5月に ファインディに参画 ファインディではFindy Team+を開発しつつ、EMとして 開発チームのマネジメントを担当 写真撮影 󰢍 SNSへの投稿 󰢍 マサカリ 🥺 浜田 直人 (ham) ファインディ株式会社 @hamchance0215

Slide 3

Slide 3 text

Findy Team+(チームプラス)とは?
 3
 開発生産性の可視化、開発プロセスの伸びしろの発見、継続的な改善をサポート 生産性可視化 生産性向上 事業開発スピード加速 (開発スピードの向上により、仮説検証スピードも加速) 開発プロセス改善 (開発フロー・配置・ツールの伸びしろを可視化・最適化) 文化づくり・自己組織化 (メンバーの自発的な改善促進、改善を称賛する文化作り) 継続的な生産性向上サイクル データ 連携 Biz Engineer Engineer 開発組織ブランディング (エンジニアは、開発生産性が高い組織で働きたい) Recruit

Slide 4

Slide 4 text

Agenda ● 開発サイクルにおけるCIの役割 ● CIを速くする実例

Slide 5

Slide 5 text

開発サイクルにおける CIの役割

Slide 6

Slide 6 text

開発サイクルにおけるCIの役割 コードを書く
 レビュー
 マージ
 CIを通す
 (PR作成)


Slide 7

Slide 7 text

開発サイクルにおけるCIの役割 コードを書く
 レビュー
 マージ
 CIを通す
 (PR作成)
 CIでは下記を実⾏ ‧lintや型などの静的解析 ‧⾃動テスト ‧build CIにより下記を担保 ‧コーディングルールに従っていること ‧既存実装が壊れていないこと ‧デプロイ可能であること

Slide 8

Slide 8 text

開発サイクルにおけるCIの役割 コードを書く
 レビュー
 マージ
 CIを通す
 (PR作成)
 CIでは下記を実⾏ ‧lintや型などの静的解析 ‧⾃動テスト ‧build CIにより下記を担保 ‧コーディングルールに従っていること ‧既存実装が壊れていないこと ‧デプロイ可能であること CIがあることで レビュー負荷を下げつつ ⾼速でマージしても品質を担保することができる 素早い開発サイクルを⽀えるために必要なもの それが CI (Continuous Integration)

Slide 9

Slide 9 text

CIは素早い開発サイクルを実現するために重要な役割を持っていることがわかりました が、PRごとに実行されるので実行時間が長いとツラいです CIの実⾏時間 CIって どれくらいの時間が 適正なんだろう?

Slide 10

Slide 10 text

CIの実⾏時間 継続的デリバリー 信頼できるソフトウェアリリースのための ビルド‧テスト‧デプロイメントの⾃動化 https://www.kadokawa.co.jp/product/301706000296/ 1つの目安として「継続的デリバリー」では10分がほぼ限 界と記載されています。 そのため、ファインディでも10分を1つの目安としていま す。 ただ、個人的には5分を超えるとストレスを感じ始めます。 3.3.3. ビルドプロセスとテストプロセスを短く保て > 我々の考えでは10分がほぼ限界である。

Slide 11

Slide 11 text

CIの実⾏時間 5分以内で終わると PR作成してからdiscriptionを書いたりコードのセルフチェックをしている間に CIが終わり、スムー ズにレビュー依頼できる PRヨシ! CIヨシ! レビュー依頼 ヨシ!

Slide 12

Slide 12 text

5分以上かかると セルフチェックが終わった時点で CIが終わっておらず、CIを待つ間に別の作業を始めてしまう。そ のためレビュー依頼が遅くなって、リードタイムが延びる。 CIの実⾏時間 PRヨシ! CIまだ CI待ち

Slide 13

Slide 13 text

CIを速くする実例

Slide 14

Slide 14 text

● バックエンドの主な技術 ○ Ruby / Rails / RSpec / Rubocop / Brakeman ● CI (GitHub Actions) ○ テスト(RSpec) / 静的解析(Rubocop) / セキュリティ(Brakeman) バックエンド バックエンドのCIは「テスト」に時間がかかります。 現時点で素直に実⾏すると20〜30分かかる。

Slide 15

Slide 15 text

● バックエンドの主な技術 ○ Ruby / Rails / RSpec / Rubocop / Brakeman ● CI (GitHub Actions) ○ テスト(RSpec) / 静的解析(Rubocop) / セキュリティ(Brakeman) バックエンド テストを分割して並列実⾏する仕組みを社内で⾃作。 configでサクッと並列数を変更できるようにしている。 CIの⼀部抜粋(testを8分割) 👉

Slide 16

Slide 16 text

● フロントエンドの主な技術 ○ React / TypeScript / Jest / ESLint / webpack / Nx ● CI (GitHub Actions) ○ テスト(Jest) / 静的解析(TypeScript / ESLint) / ビルド(webpack) フロントエンド フロントエンドのCIは「テスト」「ビルド」「静的解析 (TypeScript)」に時間がかかります。 現時点で素直に実⾏するとそれぞれ15〜20分かかる。

Slide 17

Slide 17 text

フロントエンド https://nx.dev/ Nxを使って機能ごとに分割 - apps - pages - libs - feature-a - feature-b - … - feature-z - ui - shared - utils 依存 pages → feature → ui / shared / utils

Slide 18

Slide 18 text

フロントエンド 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が実⾏され、他はキャッ シュが使われる

Slide 19

Slide 19 text

フロントエンド 過去30⽇間のNxのCIキャッ シュにより削減された時間👉 CI(feature)の⼀部抜粋👇

Slide 20

Slide 20 text

Findy 採⽤ https://findy.co.jp/service/ https://careers.findy.co.jp/ Findy サービス CIを高速化して 最高の開発者体験を実現しましょう!!