前端CI/CD 實戰
持續集成/持續交付/持續部署
目錄：
-
DevOps
- DevOps 的目的和知識點
- DevOps架構
- CICD
-
專案實戰導入CICD流程
- 開發 > CI > PR > CodeReview > Release
我們的目標：
分成三大類來講解：
- 掌握基礎知識
-
基於DevOps概念搭建一套完整的技術框架/流程標準
- 透過工具，從規劃，開發者，測試人員，運營人員等角度去實現devops。
- 製定一套標準規範流程，實現目的高效開發運維。
- 透過實戰來講解如何從專案管理開始跑整個流程
DevOps 的目的
- 改變做事的方式
- 透過溝通，協作，整合，自動化等方式
- DevOps最終目的也是快速，頻繁地交付。
- DevOps希望通過更好跨部門合作以及自動化來實現目標！
如何做
- 相關部門一同參與專案開發，對掌握度更清楚
- 讓透明更順暢，自動化，穩定
- 因為大家都處在同一個環境/平台，彼此之間都可以很密集協作以及討論。
參與
狀態
持續整合
每個階段
什么是DevOps
- DevOps 是開發 (dev) 和 IT運營技術人員 (ops) 是一組過程，方法與系統統稱。用於促進開發，運營和QA部門之間溝通，協作與整合。
- DevOps 是一個重視開發 (dev) 和 IT運營技術人員 (ops) 之間溝通合作的文化。
- DevOps要求開發(dev)，測試(QA)，運營(Ops)一體化
- DevOps是一個有效組織團隊之間通過自動化的工具 (輔助) 來進行協作和溝通來完成軟體開發生命週期 (SDLC)。
什麼是DevOps 【總結】
歸納以及總結 DevOps核心概念是CAMS
CAMS代表：
- C：文化
- A：自動化
- M：度量
- S：共享
為什麼我們需要DevOps (2)
- 降低風險：穩定性交付，增強可預測性
- 保證品質：效率提升同時保證品質穩定
- 組織優化：提高工作效率
DevOps
什麼是CI/CD？
CI/CD 基本概念
主要針對不了解同志們，對一些專有名詞解釋
- 持續 continuous - 不斷得到反饋(feedback)
- 集成/整合 integration - 編譯(compile), testing, build
- 交付 delivery - 當持續集成完成後，代表產品處在可交付狀態
- 部署 deployment - 正式產品環境部署 (環境：Production)
CI 持續集成特點
- 靜態語法分析 (styles, linter)
- 編譯構建 (es6 to es5, 檔案壓縮，合併檔案...)
- 單元測試 (unit tests)
- 測試報告 (test reports)
- 測試覆蓋率 (code coverages - > 70%)
- 保證工程師所提交(commit) 的程式品質(quality)
- 持續集成每個任務都是自動化完成，無需人工去操作。
- 提高工作效率，持續追蹤問題 (紀錄)，更快修正問題
- 大大降低工程師工作負擔，減少不必要重覆工作，減少手動錯誤 (例： 部署參數弄錯) 。
CI 持續集成作用
了解DevOps之前
先來回顧傳統開發模式
傳統模式
優點
- 分工和責任很細
- 品質有保證
- 容易把控
缺點
- 溝通成本很高
- 等待成本很高
- QA需要了解需求才可以進行測試
- 造成時程延遲
進入DevOps
什麼是DevOps？
- DevOps 是開發 (dev) 和 IT運營技術人員 (ops) 是一組過程，方法與系統統稱。用於促進開發，運營和QA部門之間溝通，協作與整合。
- DevOps 是一個重視開發 (dev) 和 IT運營技術人員 (ops) 之間溝通合作的文化。
- 倒不如說DevOps是一種文化 ：團隊協作，工作流程，專案管理，資源分配，鼓勵創新，容許錯誤，持續改善)
溝通
協作
集成
自動化
DevOps 定義 ？
DevOps 在目前來說是沒有一個標準定義！例如：各家亞馬遜, 微軟, IBM, Airbnb...，他們定義標準有所不同。
- DevOps要求開發(dev)，測試(QA)，運營(Ops)一體化
- DevOps是一個有效組織團隊之間通過自動化的工具來進行協作和溝通來完成軟體開發生命週期 (SDLC)。
- DevOps 是一種文化，軟體開發生命週期 (SDLC) 從瀑布式(Waterfall)到敏捷(Agile)再到精益(Lean)的發展
- 頻繁地交付... 軟體產品迭代速度...
DevOps 定義？
DevOps是人員，程序 (process) 及產品的結合，為使用者提供持續性的價值傳遞
微軟開發團隊DevOps 經理 Donovan Brown定義：
[以下] Azure DevOps 所採用作法：
Plan
code-build-test
release-deploy
operate
Dev
阻礙牆
QA
阻礙牆
Ops
我開發好了，但正在編譯中！
等待開發，就只能等待！！！
只能等
存在問題：
- 當一個部門完成他們工作，會把完成後交給下一個階段的人員
- 不管單一個部門工作流程多麼有效率，但存在阻礙牆造成問題。
- 部門之間缺乏溝通，造成合作上有阻礙。
- 溝通，等待，時程延遲各種問題。
DevOps 架構圖
DevOps組織所採用途徑：
- 計劃
- 持續集成
- 持續交付
- 持續監控及回饋
- 持續改善
plan
code
build
test
release
deploy
operate
DevOps 架構圖
DevOps
C I
持續集成
C D
持續交付/持續部署
feedback
monitor
共享
自動化
度量
文化
plan
code
build
test
release
deploy
operate
DevOps
C I
持續集成
C D
持續交付/持續部署
feedback
monitor
DevOps包含從計劃，code，build，測試，發佈，部署，以及運營和監控。
- 持續集成：需求不斷變動觸法，持續build/test 流程。
- 持續交付：完成集成後，可隨時交付狀態 (release和deployment之間階段)
- 持續部署：將交付的業務部署到生產環境
- 持續監控：時時監控應用程式以及系統平台執行狀況
- 持續反饋：基於監控應用程式的使用情況，持續給出意見
- 持續改善：基於反饋的寶貴意見，啟動新的改善計劃流程
Azure DevOps
使用一組現代化的裝置服務，更聰明地規劃、更佳地共同作業並更快地交付。
開始進入
前端導入DevOps流程
DevOps - Plans 專案管理 Backlog 1
專案管理 Backlog
- 團隊規劃
- 追蹤工作進度
- 代辦事項工作上管理
- user story腳本
plan
dev
deploy
operate
test
DevOps - 前端 開發 持續集成 2
plan
dev
deploy
operate
test
DevOps - 前端 持續交付 持續部署 1
plan
dev
test
deploy
operate
Stage
dev
preview
alpha
beta
production
aws s3
CDN
end user
DevOps - 前端 持續交付 持續部署 2
DevOps - QA 1
plan
dev
test
deploy
operate
- 創建test case
- 在test case 裡創建【測試步驟】對你每個步驟進行判斷，是否達到您預期結果！
- 使用test plans裡提供手動探勘測試工具
- 如： 截圖，影片，開bug，根據work item進行探勘explore測試
- end to end 測試
定義
執行
DevOps - 監控 1
plan
code
build
test
release
deploy
operate
- 監控系統穩定性和效能
- 監控應用程使用資源，網路流量
安裝bugsee chrome plugin
- 可以捕捉使用者點擊行為網頁
- 監聽每個事件問題
- 監聽network traffic 網路流量 (call api的時候)
主動
被動
DevOps - 監控 2
Demo
參考資料
參考 ppt