Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

優化 Angular 團隊開發流程:實現 DevOps 開發維運一體化

2.866 Aufrufe

Veröffentlicht am

這是 Will 保哥在 2017/6/24 台灣 Angular 社群小聚中的演講簡報。
https://2017.angular.tw/

在多人的開發團隊中建構一個 Angular 網站,需考慮彼此之間如何分工合作,對模組與元件也須進行適當的架構規劃,開發習慣與程式碼樣式也需建立規範,這樣才能提高應用程式的可維護性。當系統需要進行整合時,又該如何實現持續整合與部署?又該如何監控線上 Angular 應用程的執行效能與問題分析?本次演說將帶大家細說從頭,了解在 Angular 如何實踐 DevOps 流程。

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

優化 Angular 團隊開發流程:實現 DevOps 開發維運一體化

  1. 1. AngularJS User Group Taiwan 優化 Angular 團隊開發流程: 實現 DevOps 開發維運一體化 多奇數位創意有限公司 技術總監 黃保翕 ( Will 保哥 ) 部落格:http://blog.miniasp.com/
  2. 2. AngularJS User Group Taiwan 關於 DevOps 的不同階段
  3. 3. AngularJS User Group Taiwan 優化 Angular 開發流程 Plan  Create  Verify
  4. 4. AngularJS User Group Taiwan 妥善規劃 Angular 應用程式 • 規劃功能清單 ( Function List ) • 規劃網站地圖 ( Sitemap ) • 規劃網頁線稿 ( Wireframe ) • 網頁設計提案 ( Visual Design ) • 網頁前端切版 ( Front-end Design )
  5. 5. AngularJS User Group Taiwan • 建立 Angular 專案 ( Angular CLI ) • ng new myapp --routing • 建立 Angular 模組 (依據網站地圖分組) • ng g m module1 --routing -m=app • 建立 Angular 元件 (依據網站地圖中的每個頁面) • ng g c module1/page1 -m=module1 開始打造 Angular 應用程式雛形
  6. 6. AngularJS User Group Taiwan • 依據實際需求建立必要的 Angular 元件 (每個模組都切乾淨) • cd src/app/module1 • ng g c page1 • ng g d diretive1 • ng g p pipe1 • ng g s common -m=module1 • 定義模組下的路由、子路由、路由守門員 • 所有模組都擁有自己的路由、子路由、路由守門員 • ng g g login -m=module1 • 先將所有頁面都串起來 • 共通的版型都先套用在 AppComponent 下,最後再來調整整體版面 • 全站的路由連結都先套用完成 依據模組進行工作切割與專案分工
  7. 7. AngularJS User Group Taiwan • 程式碼風格檢查 • codelyzer (GitHub) • ng lint • TSLint (Visual Studio Code) • npm install --save-dev codelyzer@latest • 單元測試開發 • Karma • Jasmine v.s. Jest • Protractor • https://angular.io/guide/testing 驗證 Angular 專案品質
  8. 8. AngularJS User Group Taiwan 優化 Angular 部署流程 Package  Release  Configuration
  9. 9. AngularJS User Group Taiwan • 切換建置環境 • npm run build • npm run build -- --prod • npm run build-prod (需自訂 package.json 的 scripts 命令) • 多重應用程式 • ng build --app 0 (須配合調整 .angular-cli.json 設定檔) • 佈署虛擬目錄 • ng build --prod --base-href /myapp/ • ng build --prod --base-href /myapp/ --deploy-url=/myapp/ 建置 Angular 部署檔案
  10. 10. AngularJS User Group Taiwan • 準備一個 Visual Studio Team Services 專案 (Git 儲存庫) • 建立一個 Azure Web App 網站 • 透過 Git 上傳 Angular 專案到 Visual Studio Team Services • 設定 Builds 持續整合 (CI) • 設定 Releases 持續部署 (CD) 實現 Angular 持續整合/持續部署
  11. 11. AngularJS User Group Taiwan • npm install • npm run lint • npm run build • Publish Build Artifact • Path to Publish: dist • Artifact Name: drop • Artifact Type: Server 在 VSTS 設定 Builds 持續整合 (CI)
  12. 12. AngularJS User Group Taiwan • Azure App Service Deployment • Azure subscription: • App Service name: • Package or folder: $(System.DefaultWorkingDirectory)/ngdevops-CI/drop 在 VSTS 設定 Releases 持續部署 (CD)
  13. 13. AngularJS User Group Taiwan 優化 Angular 監控作業 Monitoring
  14. 14. AngularJS User Group Taiwan import { ErrorHandler } from '@angular/core'; class MyErrorHandler implements ErrorHandler { handleError(error) { // do something with the exception } } @NgModule({ providers: [{provide: ErrorHandler, useClass: MyErrorHandler}] }) class MyModule {} 自訂 Angular 錯誤處理器 ( ErrorHandler )
  15. 15. AngularJS User Group Taiwan • Angular CLI • TSLint - An extensible linter for the TypeScript language. ( Rules ) • codelyzer (GitHub) • Angular - Testing • Setting up a CI pipeline for deploying your Angular application to Azure using Visual Studio Team Services and GitHub • Angular - ErrorHandler 相關連結
  16. 16. AngularJS User Group Taiwan • The Will Will Web 記載著 Will 在網路世界的學習心得與技術分享 • http://blog.miniasp.com/ • Will 保哥的技術交流中心 (臉書粉絲專頁) • http://www.facebook.com/will.fans • Will 保哥的噗浪 • http://www.plurk.com/willh/invite • Will 保哥的推特 • https://twitter.com/Will_Huang 聯絡資訊
  17. 17. AngularJS User Group Taiwan Thank you

×