マイナビニュースがチーム開発をするためにやってきたこと / What Mynavi News did to do team development

マイナビ Tech Night #3 でのマイナビニュースの登壇資料です。
https://mynavi.connpass.com/event/151607/

Transcript

1. マイナビニュースが
 チーム開発をするためにやっ てきたこと
 岡部恭平 / Mynavi Corporation
 2019.11.20 マイナビ Tech Night #3
2. 岡部恭平 @okabeeeat
 Webアプリケーションエンジニア
 IT戦略事業部 IT開発統括部
 開発2部 ニュース開発1課

3. 最近（というか結構前）
 ISUCON9 に参加しました！
4. 本日の目標
 以下の内容を知ってもらえるよう頑張ります
 • マイナビニュースについて
 • チーム開発をする上での課題と取り組み
 • これからやっていくこと

5. マイナビニュースとは？

7. マイナビニュース
 ・ビジネスパーソンのON/OFF、男女を問わず、 幅広いジャンルの情報を提供する総合ニュース メディア
 ・ニュースに限らず、役立つノウハウや体験レ ポート、まじめなレビュー、柔らかい記事から硬 派な記事まで網羅
 その先を伝える総合情報サイト
8. https://www.youtube.com/watch?v=bu9yJ7wcpXc ガチャピンが紹介してバズった記事も
 https://news.mynavi.jp/article/20190108-753067/
9. チーム構成
 ディレクター
 エンジニア
 エンジニア(リモート)
 ニュースメディア事業部
 IT戦略事業部 
 開発ベンダー
 エンジニア
 インフラ・マーケティングチーム 
 システム統括部
 編集・制作・事業推進・営業など
 120人規模

10. マイナビニュースを支える技術 開発言語 コミュニケーション・情報共有 開発支援 インフラ
11. 開発の雰囲気
12. チーム開発，割とできている のでは？

13. NO!!!

14. 入社時はこんな状態ではな かった・・・

15. チーム開発をする上での
 課題と取り組み

16. 入社時(2019年1月)の課題
 • プルリクエストの情報が GitHub 上に無い
 • え！誰が今どの環境でデプロイしてるの？
 • システムリニューアル時の流れで使っている Git-flow

17. 入社時(2019年1月)の課題
 • プルリクエストの情報が GitHub 上に無い
 • え！誰が今どの環境でデプロイしてるの？
 • システムリニューアル時の流れで使っている Git-flow

18. プルリクエストの情報が GitHub 上に無い
 え！？プルリクエストが紐付いてない？
 (master に直接 push している??)
 入社して数日後のこと．．．

19. プルリクエストの情報が GitHub 上に無い
 原因
 • 開発ベンダー側は自社の GitLab で開発を進めて いた
 • リニューアル時に実装した主要なロジックの意図 を commit のみで探るのが辛い・・・

20. プルリクエストの情報が GitHub 上に無い
 解決方法
 
 マイナビの GitHub に統合する

21. やったこと
 開発フローの整備

22. やったこと
 CI 環境の構築
 ◦ マイナビ側では CircleCI 利用していた
 ◦ 開発メンバーが増えるため契約コンテナ数が 足りない!?

23. CI 環境の構築
 https://speakerdeck.com/mynavi_sys/aws-codebuild-as-a-ci-software
 詳しくはこちらにまとめました

24. 結果
 
 • プルリクエストがわかるようになった
 • 全員でコードレビューができるようになった
 
 

25. 入社時(2019年1月)の課題
 • プルリクエストの情報が GitHub 上に無い
 • え！誰が今どの環境でデプロイしてるの？
 • システムリニューアル時の流れで使っている Git-flow

26. え！誰が今どの環境でデプロイしてるの？
 
 リリースだ！ エンジニア
27. え！誰が今どの環境でデプロイしてるの？
 
 次のタスクやろう ディレクター あいつ今日リリース予 定って聞いたけどちゃ んとリリースしたの か？ エンジニア エンジニア リリース したの？ してないの？ Slack などで報告・共有を忘れる...
28. え！誰が今どの環境でデプロイしてるの？
 
 解決方法
 
 Capistrano プラグインの導入

29. やったこと
 
 capistrano-github-releases の導入
 • 本番リリース時にプルリクエストへのコメントの自動化と Tags ・ Releases を自動生成

30. やったこと
 capistrano-releases-notification の導入
 • デプロイ時に Slack に通知するようにした

31. 結果
 
 • 報告・共有が自動化された
 • リリースノートができた！！
 リリースだ！ ディレクター リリースされた！ エンジニア エンジニア リリース された！！
32. 入社時(2019年1月)の課題
 • プルリクエストの情報が GitHub 上に無い
 • え！誰が今どの環境でデプロイしてるの？
 • リニューアル時の流れで使っている Git-flow

33. リニューアル時の流れで使っている Git-flow
 
 master ← develop ← feature
 • リニューアル時から続いているブランチ構成
 • 切り戻し（複数の feature ブランチを取り込んだ develop ブランチ）に時間が掛かる
 • リニューアル後，Git-flow にする理由は特に見当 たらなかった

34. 解決方法
 
 GitHub Flow に変更 
 リニューアル時の流れで使っている Git-flow

35. • develop ブランチの廃止
 • 開発フローの整備
 やったこと

36. • git 操作の作業量とミスが削減した
 • 開発速度が上がった
 • 開発フローがよりシンプルになった
 結果

37. その他の効果
 • issue や プルリクエストに開発業務の証跡を残す 習慣がチームに身についてきた
 • マイナビと開発ベンダーで開発チームとしての一 体感が増した
 ラフなやり取りもできるようになった！ 

38. 一旦は色々整った
 （まだ色々できそうだけど）

39. これからやっていくこと

40. サーバーサイド
 プロダクトのグロースと変化により対応できる構成へ
 
 • 新機能・運用負荷軽減のため機能開発
 ◦ CMS の機能追加・改修
 ◦ Slack bot・アプリの開発
 • モノリシックリポジトリの分離
 ◦ ニュース・CMS・API を機能毎に分離
 ◦ 変化に対応しやすくする

41. フロントエンド
 コンポーネント管理ができるフロントエンド開発へ
 
 • E2Eテストの導入
 • jQuery から Vue.js への移行
 ◦ Vue.js は一部は入っている
 ◦ jQuery のコードはまだまだ多い
 ◦ 単一ファイルコンポーネント使いたい！

42. インフラ
 インフラのコード化と最適化
 
 • CloudFormation のリファクタリング
 ◦ テンプレートファイルの分割
 • Terraform の検証・導入
 ◦ CloudFormation とのハイブリット構成の検討
 • AWS リソースのコスト最適化
 ◦ リソースの見直し
 ◦ リザーブドインスタンス化

43. 他にもやりたいことがいっぱ いある！！！

44. まとめ
 • マイナビニュースと開発チームについて紹介した
 • チーム開発をする上での課題と解決方法をお話 した
 ◦ GitHub への統合
 ◦ Capistrano プラグインの導入
 ◦ GitHub フローへの変更
 • これからやっていくことがとにかく沢山ある

45. 参考
 • capistrano-github-releases
 ◦ https://github.com/linyows/capistrano-github-releases 
 • capistrano-releases-notification
 ◦ https://github.com/kimromi/capistrano-releases-notification 
 

46. ご清聴ありがとうございました