從 Legacy 到 Lovely，用 CI/CD 改建二十年祖產全記錄

於 Laravel x Vue Conf Taiwan 2022 的演講簡報，主要描述一個多年的 Legacy 專案如何慢慢的演變為現代化框架為基底的專案過程。

Transcript

1. 從 Legacy 到 Lovely 陳佑⽵ aka. 墨嗓 @Laravel & Vue Conf Taiwan ⽤ CI/CD 改建⼆⼗年祖產全記錄
2. • 陳佑⽵，朋友都叫我墨嗓 Mouson • GitLab Hero • 資深系統分析師 • GitLab Taipei User Group / DevOps Taiwan / Laravel Taiwan 志⼯ • mouson@gmail.com • https://gitlab.com/mo-playground • https://gitlab.com/mouson About Me
3. 世成科技
4. Legacy 什麼是 Legacy?
5. 什麼是 Legacy?
6. 什麼是 Legacy? • 年代久遠
7. 什麼是 Legacy? • 年代久遠 • 結構龐⼤
8. 什麼是 Legacy? • 年代久遠 • 結構龐⼤ • 經歷多次迭代
9. 什麼是 Legacy? • 年代久遠 • 結構龐⼤ • 經歷多次迭代 • 沒有⽂件
10. 該怎麼⾯對 Legacy?
11. 該怎麼⾯對 Legacy?
12. • ⾯對它 • 接受它 • 處理它 • 放下它 該怎麼處理 Legacy? 重構或重寫 Legacy code 的幾個階段 https://jaceju.net/steps-of-refactoring-or-rebuilding/
13. ⾯對它
14. ⾯對它 • 不要仇視它
15. ⾯對它 • 不要仇視它 • 你的薪⽔可能是它提供的
16. ⾯對它 • 不要仇視它 • 你的薪⽔可能是它提供的 • 深入解析
17. ⾯對它 • 不要仇視它 • 你的薪⽔可能是它提供的 • 深入解析 • 調查⽬前的規格、背景故事等
18. ⾯對它 • 不要仇視它 • 你的薪⽔可能是它提供的 • 深入解析 • 調查⽬前的規格、背景故事等 • 理解 Legacy Code 的架構
19. 接受它
20. 接受它 • 導入單元測試
21. 接受它 • 導入單元測試 • 導入持續整合 CI
22. 接受它 • 導入單元測試 • 導入持續整合 CI • 導入持續部署/發佈 CD
23. 接受它 • 導入單元測試 • 導入持續整合 CI • 導入持續部署/發佈 CD • 導入 E2E ⾃動化測試
24. 處理它
25. 處理它 • 不⽤⼀次到位，⼀次調整⼀點
26. 處理它 • 不⽤⼀次到位，⼀次調整⼀點 • 選⽤好的⼯具
27. 處理它 • 不⽤⼀次到位，⼀次調整⼀點 • 選⽤好的⼯具 • 可以考慮使⽤ Feature Toggle 來重構 • 遇到問題可切回上⼀版本
28. 處理它 • 不⽤⼀次到位，⼀次調整⼀點 • 選⽤好的⼯具 • 可以考慮使⽤ Feature Toggle 來重構 • 遇到問題可切回上⼀版本 • 挑⼀個適合的好框架改寫
29. 放下它
30. 放下它 • 持續向前、持續改善
31. 放下它 • 持續向前、持續改善 • 透過加入單元測試，讓原始碼的保護越來越⾼
32. 放下它 • 持續向前、持續改善 • 透過加入單元測試，讓原始碼的保護越來越⾼ • 透過靜態分析⼯具，持續調整改善原始碼
33. 放下它 • 持續向前、持續改善 • 透過加入單元測試，讓原始碼的保護越來越⾼ • 透過靜態分析⼯具，持續調整改善原始碼 • 童軍守則：讓離開時的營地比進去時乾淨
34. 以上為「理論」的部分
35. 我們的故事 2014.07 1.5P
36. PHP 4 我們的版本 - ⾯對它 • Apache 1.3 • PHP 4.1.2 • 核⼼為使⽤ C 編寫之 PHP Extension • PHP 程式碼超過千隻 PHP 程式 • LoC 超過 20 萬⾏(僅PHP) • 版本控制(CVS)服務損毀 • 非 PHP 原始碼遺落或不完整 • 使⽤非常⾒的商⽤資料庫 Native Custom Extension PHP Extension Custom Software 6 Database Project Backend Frontend HTML, JavaScript, PHP ODBC Driver 4 1.3 4.1.2
37. ⾯對它 - Legacy • 年代久遠 • 結構龐⼤ • 經歷多次迭代 • 沒有⽂件
38. ⾯對它 - Legacy • 年代久遠 • 結構龐⼤ • 經歷多次迭代 • 沒有⽂件 • 沒有原始碼
39. ⾯對它 - Legacy • 年代久遠 • 結構龐⼤ • 經歷多次迭代 • 沒有⽂件 • 沒有原始碼 -FHBDZ
    Ⴉᗇ
41. 先從重要的開始
42. Part 1 - 接受它
43. Part 1 - 接受它 • 建立 Issue Tracking System
44. Part 1 - 接受它 • 建立 Issue Tracking System • 建立版本控制系統
45. Part 1 - 接受它 • 建立 Issue Tracking System • 建立版本控制系統 • The One DevOps Platform
46. Part 1 - 接受它 • 建立 Issue Tracking System • 建立版本控制系統 • The One DevOps Platform • 建立研發團隊⼯作流程
47. Part 1 - 接受它 • 透過各種⽅法了解系統結構 • 透過新需求了解程式架構 • 撰寫⽂件
48. Part 1 - 處理它 PHP 4 Native Custom Extension PHP Extension Custom Software 6 Database Project Backend Frontend HTML, JavaScript, PHP ODBC Driver 4 1.3 4.1.2 PHP 5 Native Custom Extension PHP Extension Custom Software 6 Database Project Backend Frontend HTML, JavaScript, PHP ODBC Driver 5.1 2.2 5.2.17
49. Part 1 - 接受它 • 藉此更了解系統結構、架構 • 初步升級 PHP 5.2.17 及核⼼元件
50. Part 1 - 接受它 • 藉此更了解系統結構、架構 • 初步升級 PHP 5.2.17 及核⼼元件 • 依然沒有 namespace
51. Part 1 - 接受它 • 藉此更了解系統結構、架構 • 初步升級 PHP 5.2.17 及核⼼元件 • 依然沒有 namespace • 依然沒有 Composer Package 可以⽤
52. 說好的 CI CD 呢？
53. Part 2 - 處理它
54. Part 2 - 處理它 • 導入單元測試，以測試描述規格
55. Part 2 - 處理它 • 導入單元測試，以測試描述規格 • 寫 PHP 5.2 與 PHP 5.6 相容的語法
56. Part 2 - 處理它 • 導入單元測試，以測試描述規格 • 寫 PHP 5.2 與 PHP 5.6 相容的語法 • 導入 TDD 進⾏新功能開發
57. Part 2 - 處理它 • 導入單元測試，以測試描述規格 • 寫 PHP 5.2 與 PHP 5.6 相容的語法 • 導入 TDD 進⾏新功能開發 • 持續針對重要核⼼演算法重構、補上測試
58. Part 2 - 處理它 • 導入單元測試，以測試描述規格 • 寫 PHP 5.2 與 PHP 5.6 相容的語法 • 導入 TDD 進⾏新功能開發 • 持續針對重要核⼼演算法重構、補上測試 • 透過 GitLab 的 CI/CD 功能加入⾃動化測試
59. Part 2 - 處理它 • 持續累積研發團隊(2.5P) Credit • 錯了代表以測試所描述的規格還不夠完整 • 補測試後就不會再錯，不再改 A 壞 B
60. Part 2 - 處理它 • 持續累積研發團隊(2.5P) Credit • 錯了代表以測試所描述的規格還不夠完整 • 補測試後就不會再錯，不再改 A 壞 B • 程式⼜算錯了！
61. Part 2 - 處理它 • 持續累積研發團隊(2.5P) Credit • 錯了代表以測試所描述的規格還不夠完整 • 補測試後就不會再錯，不再改 A 壞 B • 可能不是程式寫錯，⽽ 是使⽤端設定錯誤 • 程式⼜算錯了！
62. PHP 5 Native Custom Extension PHP Extension Custom Software 6 Database Project Backend Frontend HTML, JavaScript, PHP ODBC Driver 5.1 2.2 5.2.17 Part 3 - ⾯對它 - 下⼀⽬標？ PHP 7.3 Native Custom Extension PHP Extension Custom Software 6 Database Project Backend Frontend HTML, JavaScript, PHP ODBC Driver 5.1 .3
63. PHP 7.3 Native Custom Extension PHP Extension Custom Software 6 Database Project Backend Frontend HTML, JavaScript, PHP ODBC Driver 5.1 .3 Part 3 - ⾯對它 - 下⼀⽬標？ • 升級 PHP 到 PHP 7 • 導入 ORM • 如果可能導入 Laravel 作 為後端核⼼ • 作業系統升級 • 資料庫版本升級
64. PHP 7.3 Native Custom Extension PHP Extension Custom Software 6 Database Project Backend Frontend HTML, JavaScript, PHP ODBC Driver 5.1 .3 Part 3 - ⾯對它 - 下⼀⽬標？ • 升級 PHP 到 PHP 7 • 導入 ORM • 如果可能導入 Laravel 作 為後端核⼼ • 作業系統升級 • 資料庫版本升級
65. Part 3 - ⾯對它 - 升級 PHP 7.3 • Use Register Global 問題 • PHP 7.3 語法相容 • Custom Extension PHP 7.3 Native Custom Extension PHP Extension Custom Software 6 Database Project Backend Frontend HTML, JavaScript, PHP ODBC Driver 5.1 .3
66. Part 3 - 處理它 - 升級 PHP 7.3 • ⼤量修正使⽤ Register Global 問題
67. Part 3 - 處理它 - 升級 PHP 7.3 • ⼤量修正使⽤ Register Global 問題
68. Part 3 - 處理它 - 升級 PHP 7.3 • Custom Extension • 以 TDD 的⽅法重建 Extension • ⼤部分直接以 PHP 直接重寫 • 少量 PHP Extension
69. Part 3 - 處理它 - 升級 PHP 7 • PHP 7.3 語法相容調整 • 透過 PHPCompatibility 產出報告逐⼀修正 • https://github.com/PHPCompatibility • mcrypt 語法移除：改寫
70. PHP 7.3 Native Custom Extension PHP Extension Custom Software 6 Database Project Backend Frontend HTML, JavaScript, PHP ODBC Driver 5.1 .3 下⼀⽬標？ PHP 7.4 Native Custom Extension PHP Extension Software Database Project Backend Frontend HTML, JavaScript, PHP ODBC Driver 5.4 .4 8
71. Part 4 - 導入 Laravel 需要？ • 使 Laravel ⽀援 DBMaker • 非 Laravel 架構的原始碼處 置 • 檔案上傳儲存機制調整 PHP 7.4 Native Custom Extension PHP Extension Software Database Project Backend Frontend HTML, JavaScript, PHP ODBC Driver 5.4 .4 8
72. Part 4 - 使 Laravel ⽀援 DBMaker • 使 Eloquent 能夠⽀援 DBMaker，建立 Eloquent Driver
73. Part 4 - 使 Laravel ⽀援 DBMaker • 使 Eloquent 能夠⽀援 DBMaker，建立 Eloquent Driver https://mouson.im/Publication/PHP/20170701-laravelconf-taiwan-2017-eloquent-destruct/
74. Part 4 - 非 Laravel 架構的原始碼處置 • Legacy • Route • Controller
75. Part 5 - 程式碼品質持續改善 • Code Lint 置入開發⽇常 • 程式碼品質資料蒐集、討論 • 在 GitLab Merge Request Highlight
76. Part 5 - 程式碼品質持續改善 • Code Lint 置入開發⽇常
77. Part 5 - 程式碼品質持續改善 • Code Lint 置入開發⽇常 • 建立程式碼格式的團隊規則共識
78. Part 5 - 程式碼品質持續改善 • Code Lint 置入開發⽇常 • 建立程式碼格式的團隊規則共識 • 減少不必要的 Commit 留存
79. Part 5 - 程式碼品質持續改善 • Code Lint 置入開發⽇常 • 建立程式碼格式的團隊規則共識 • 減少不必要的 Commit 留存
80. Part 5 - 程式碼品質持續改善 • Code Lint 置入開發⽇常 • 建立程式碼格式的團隊規則共識 • 減少不必要的 Commit 留存
81. Part 5 - 程式碼品質持續改善 • Code Lint 置入開發⽇常 • 程式碼品質資料蒐集、討論 • 在 GitLabMerge Request Highlight
82. Part 5 - 程式碼品質持續改善 • Code Lint 置入開發⽇常 • 程式碼品質資料蒐集、討論 • 在 GitLabMerge Request Highlight
83. Part 5 - 程式碼品質持續改善 • Code Lint 置入開發⽇常 • 程式碼品質資料蒐集、討論 • 在 GitLabMerge Request Highlight
84. Part 5 - 程式碼品質持續改善 • Code Lint 置入開發⽇常 • 程式碼品質資料蒐集、討論 • 在 GitLabMerge Request Highlight
85. Part 5 - 程式碼品質持續改善 • Code Lint 置入開發⽇常 • 程式碼品質資料蒐集、討論 • 在 GitLabMerge Request Highlight
86. Part 5 - 程式碼品質持續改善 • Code Lint 置入開發⽇常 • 程式碼品質資料蒐集、討論 • 在 GitLab Merge Request Highlight
87. Part 5 - 程式碼品質持續改善 • Code Lint 置入開發⽇常 • 程式碼品質資料蒐集、討論 • 在 GitLab Merge Request Highlight
88. Part 5 - 程式碼品質持續改善 • Code Lint 置入開發⽇常 • 程式碼品質資料蒐集、討論 • 在 GitLab Merge Request Highlight
89. Part 5 - 程式碼品質持續改善 • Code Lint 置入開發⽇常 • 程式碼品質資料蒐集、討論 • 在 GitLab Merge Request Highlight
90. Part 6 - 程式碼品質主動監控
91. Part 6 - 程式碼品質主動監控 • 搭配 Laravel Logging 主動通知服務執⾏異常
92. Part 6 - 程式碼品質主動監控 • 搭配 Laravel Logging 主動通知服務執⾏異常
93. Part 6 - 程式碼品質主動監控 • 搭配 Laravel Logging 主動通知服務執⾏異常 • PHP SAST(static application security testing)
94. Part 6 - 程式碼品質主動監控 • 搭配 Laravel Logging 主動通知服務執⾏異常 • PHP SAST(static application security testing)
95. Part 7 - 持續交付、部署 (CD)
96. Part 7 - 持續交付、部署 (CD) • 持續交付 (Continuous Delivery)
97. Part 7 - 持續交付、部署 (CD) • 持續交付 (Continuous Delivery) • 持續部署 (Continuous Deployment)
98. Part 8 - 持續改善
99. Part 8 - 持續改善 PHP 4 Native Custom Extension PHP Extension Custom Software 6 Database Project Backend Frontend HTML, JavaScript, PHP ODBC Driver 4 1.3 4.1.2
100. Part 8 - 持續改善 PHP 4 Native Custom Extension PHP Extension Custom Software 6 Database Project Backend Frontend HTML, JavaScript, PHP ODBC Driver 4 1.3 4.1.2 PHP 5 Native Custom Extension PHP Extension Custom Software 6 Database Project Backend Frontend HTML, JavaScript, PHP ODBC Driver 5.1 2.2 5.2.17
101. Part 8 - 持續改善 PHP 4 Native Custom Extension PHP Extension Custom Software 6 Database Project Backend Frontend HTML, JavaScript, PHP ODBC Driver 4 1.3 4.1.2 PHP 5 Native Custom Extension PHP Extension Custom Software 6 Database Project Backend Frontend HTML, JavaScript, PHP ODBC Driver 5.1 2.2 5.2.17 PHP 7.3 Native Custom Extension PHP Extension Custom Software 6 Database Project Backend Frontend HTML, JavaScript, PHP ODBC Driver 5.1 .3
102. Part 8 - 持續改善 PHP 4 Native Custom Extension PHP Extension Custom Software 6 Database Project Backend Frontend HTML, JavaScript, PHP ODBC Driver 4 1.3 4.1.2 PHP 5 Native Custom Extension PHP Extension Custom Software 6 Database Project Backend Frontend HTML, JavaScript, PHP ODBC Driver 5.1 2.2 5.2.17 PHP 7.3 Native Custom Extension PHP Extension Custom Software 6 Database Project Backend Frontend HTML, JavaScript, PHP ODBC Driver 5.1 .3 PHP 7.4 Native Custom Extension PHP Extension Software Database Project Backend Frontend HTML, JavaScript, PHP ODBC Driver 5.4 .4 8
103. PHP 7.4 Native Custom Extension PHP Extension Software Database Project Backend Frontend HTML, JavaScript, PHP ODBC Driver 5.4 .4 8 Part 8 - 持續改善
104. PHP 7.4 Native Custom Extension PHP Extension Software Database Project Backend Frontend HTML, JavaScript, PHP ODBC Driver 5.4 .4 8 Part 8 - 持續改善 • ⼤型範圍重構需⼀點⼀滴 的改善及累積
105. PHP 7.4 Native Custom Extension PHP Extension Software Database Project Backend Frontend HTML, JavaScript, PHP ODBC Driver 5.4 .4 8 Part 8 - 持續改善 • ⼤型範圍重構需⼀點⼀滴 的改善及累積 • ⼤⽬標需要切割成⼩⽬標
106. PHP 7.4 Native Custom Extension PHP Extension Software Database Project Backend Frontend HTML, JavaScript, PHP ODBC Driver 5.4 .4 8 Part 8 - 持續改善 • ⼤型範圍重構需⼀點⼀滴 的改善及累積 • ⼤⽬標需要切割成⼩⽬標 • 團隊需要有共識的作取捨
107. PHP 7.4 Native Custom Extension PHP Extension Software Database Project Backend Frontend HTML, JavaScript, PHP ODBC Driver 5.4 .4 8 Part 8 - 持續改善 • ⼤型範圍重構需⼀點⼀滴 的改善及累積 • ⼤⽬標需要切割成⼩⽬標 • 團隊需要有共識的作取捨 • 如果可能，重構要盡早
108. PHP 7.4 Native Custom Extension PHP Extension Software Database Project Backend Frontend HTML, JavaScript, PHP ODBC Driver 5.4 .4 8 Part 8 - 持續改善 • ⼤型範圍重構需⼀點⼀滴 的改善及累積 • ⼤⽬標需要切割成⼩⽬標 • 團隊需要有共識的作取捨 • 如果可能，重構要盡早
109. PHP 7.4 Native Custom Extension PHP Extension Software Database Project Backend Frontend HTML, JavaScript, PHP ODBC Driver 5.4 .4 8 我們的下⼀⽬標？
110. PHP 7.4 Native Custom Extension PHP Extension Software Database Project Backend Frontend HTML, JavaScript, PHP ODBC Driver 5.4 .4 8 我們的下⼀⽬標？ PHP 8.2 Native Custom Extension PHP Extension Software Project Backend Frontend HTML, JavaScript, PHP ODBC Driver .2 9
111. 我們的 GitLab CI
112. 我們的 GitLab CI
113. 今天跟⼤家介紹的 GitLab CI
114. 今天跟⼤家 Demo 的 GitLab CI 範例 https://gitlab.com/mo-playground/laravel-vue-conf-taiwan-2022-gitlabci-example/
115. 軟體開發 版本規劃 組譯 測試 產品釋出 發佈部署 維運 監控
116. Summary https://twitter.com/markbrooks/status/1573286323515170816/photo/1
117. Summary https://twitter.com/markbrooks/status/1573286323515170816/photo/1 願景 Vision 技能 Skills 誘因 Incentives 資源 Resources ⾏動計畫 Action Plan 改變 Change 技能 誘因 資源 ⾏動計畫 困惑 Confusion 願景 誘因 資源 ⾏動計畫 焦慮 Anxiety 願景 技能 資源 ⾏動計畫 抵抗 Resistance 願景 技能 誘因 ⾏動計畫 挫折 Frustration 願景 技能 誘因 資源 ⼀開始就失敗 False Starts • 願景、技能、誘因、資 源、⾏動計畫，形成改變 • 沒有「願景」會造成困惑 • 沒有「技能」會令⼈焦慮 • 沒有「誘因」會讓⼈抵抗 • 沒有「資源」會使⼈挫折 • 沒有「⾏動計畫」則⼀開 始就失敗
118. 讓每⼀次的 Commit 都是⼀次改善的機會 https://www.facebook.com/groups/DevOpsTaiwan/posts/5610989525654714/
119. Q&A